Skip to content

Instantly share code, notes, and snippets.

@webbyworks

webbyworks/accordion.html

Last active December 22, 2015 23:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save webbyworks/6551105 to your computer and use it in GitHub Desktop.
Save webbyworks/6551105 to your computer and use it in GitHub Desktop.
Download ZIP
Simple accordion script to help collapse large text areas on a page. Just needs jQuery.
Raw
accordion.html
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
ul#accordion, ul#accordion ul { margin: 0; }
ul#accordion li, ul#accordion ul li { list-style: none; margin: 0; }
.heading { border-bottom: 2px solid #DDD; margin: 10px 0 3px 0; display: inline-block; width: 100%; font-weight: 400; color: #000; padding-left: 20px; }
.sub-heading { border-bottom: 2px solid #DDD; margin: 10px 0 5px 0; display: inline-block; width: 100%; font-weight: 400; font-style: italic; color: #000; padding-left: 20px; }
.item-content { display: none; }
.items { display: none; }
</style>
<script>
$(document).ready(function() {
$("a.heading").click( function() {
$(this).next().toggle();
$(this).css('outline', 'none');
return false;
});
$("a.subhead").click( function() {
$(this).next().toggle();
$(this).css('outline', 'none');
return false;
});
});
</script>
</head>
<body>
<!-- the basic html structure of the page was something like this -->
<ul id="accordion">
<li>
<a href="#expand1" class="heading">Heading 1</a>
<ul id="expand1" class="items">
<li>
<a href="#subarea1A" class="subhead">Sub-Head 1A</a>
<ul id="subarea1A" class="item-content">
<li>
<p>Hello World!</p>
</li>
</ul>
</li>
<li>
<a href="#subarea1B" class="subhead">Sub-Head 1B</a>
<ul id="subarea1B" class="item-content">
<li>
<p>Hello Universe!</p>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#heading2" class="heading">Heading 2</a>
<ul id="heading2" class="items">
<li>
<a href="#subarea2" class="subhead">Sub-Head 2</a>
<ul id="subarea2" class="item-content">
<li>
<p>Goodbye!</p>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment