Skip to content

Instantly share code, notes, and snippets.

@appikonda

appikonda/collapsible

Last active October 21, 2015 23:07
Show Gist options
  • Save appikonda/9c034caa5feaf3d52799 to your computer and use it in GitHub Desktop.
Save appikonda/9c034caa5feaf3d52799 to your computer and use it in GitHub Desktop.
Download ZIP
how to collapse div in safari
Raw
collapsible
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel panel-default" >
<div class="panel-heading">
<span class="glyphicons glyphicons-building"></span>
<label>test</label>
<span class="pull-right clickable"><i class="glyphicon glyphicon-menu-up"></i></span>
</div>
<div class="panel-body" sytle="margin-top: -15px;">
<div class="row"> test block</div>
</div>
</div>
</body>
</html>
<script>
$(document).on('click', '.panel-heading span.clickable', function(e){
var $this = $(this);
if(!$this.hasClass('panel-collapsed')) {
$this.parents('.panel').find('.panel-body').slideUp();
$this.addClass('panel-collapsed');
$this.find('i').removeClass('glyphicon-menu-up').addClass('glyphicon-menu-down');
} else {
$this.parents('.panel').find('.panel-body').slideDown();
$this.removeClass('panel-collapsed');
$this.find('i').removeClass('glyphicon-menu-down').addClass('glyphicon-menu-up');
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment