Skip to content

Instantly share code, notes, and snippets.

@hpainter

hpainter/expander.js

Last active September 24, 2015 19:02
Show Gist options
  • Save hpainter/05a3adb7a9b5d8c648e1 to your computer and use it in GitHub Desktop.
Save hpainter/05a3adb7a9b5d8c648e1 to your computer and use it in GitHub Desktop.
Download ZIP
expanding sections
Raw
expander.js
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
/* add your css here */
</style>
</head>
<body>
<div class="expandable-panel" id="cp-1">
<div class="expandable-panel-heading">
<h2>Content heading 1</h2>
</div>
<div class="expandable-panel-content">
<p>Panel HTML...</p>
</div>
</div>
<div class="expandable-panel" id="cp-2">
<div class="expandable-panel-heading">
<h2>Content heading 2</h2>
</div>
<div class="expandable-panel-content">
<p>Panel HTML...</p>
</div>
</div>
<div class="expandable-panel" id="cp-3">
<div class="expandable-panel-heading">
<h2>Content heading 3</h2>
</div>
<div class="expandable-panel-content">
<p>Panel HTML...</p>
</div>
</div>
<script type="text/javascript">
(function($) {
$(document).ready(function () {
$('.expandable-panel-heading').on('click',function(evt){
$(this).closest('.expandable-panel')
.find('.expandable-panel-content')
.slideToggle();
})
});
})(jQuery);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment