A CodePen by Joe Hana. Simple Accordion - This is a simple Accordion made only with jQuery
/* General Styles */
html {font-size: 100%;}
body {
padding: 0;
margin: 0;
color: #EEE;
font-family: Verdana, Arial;
font-size: 62.5%;
background: #111;
}
h1 {font-size: 3.0em; text-align: center; color: #0CF;}
h2 {font-size: 2.8em;}
h3 {font-size: 2.4em;}
h4 {font-size: 2.0em;}
h5 {font-size: 1.8em;}
h6 {font-size: 1.6em;}
h1, h2, h3, h4, h5, h6 {margin: 10px 0; font-weight: normal;}
a {color: #0CF; text-decoration: none; opacity: 0.7;}
a.active {opacity: 1.0;}
a:hover {opacity: 1.0;}
p {margin: 10px 0; font-size: 1.4em; letter-spacing: 1px;}
ul {padding: 0 0 0 20px;}
ul li {margin: 10px 0; list-style: circle; font-size: 1.4em;}
ul li b {color: #0CF;}
/* Generic Classes */
.clear {clear: both;}
.wrapper {
width: 75%;
margin: auto;
}
/* Basic Layout */
.container {width: 600px; padding: 20px; margin: 20px auto; background: rgba(11,11,11,.9); border-radius: 10px;}
.description {}
.controls {float: right; padding: 0;}
.controls li {float: left; padding: 0; margin: 0 0 0 10px; list-style: none;}
/* Accordion */
.accordion {}
.accordion .handle {border-bottom: 1px solid #222;}
.accordion .handle h4 {padding: 10px 0; margin: 0; border-bottom: 1px solid #000; cursor: pointer; color: #CCC;}
.accordion .pane {}
.accordion .pane .inner {padding: 20px 0;}
jQuery(function() {
$('.pane').each(function(key, value) {
$(value).data("getHeight", $(value).height());
});
$(".handle").css("opacity", 0.5);
$(".pane").css({"height" : "0", "overflow" : "hidden"});
$(".handle").toggle(function() {
$(this).css("opacity", 1.0)
$(this).next(".pane").animate({height: $(this).next(".pane").data("getHeight")}, 500);
return false
},
function() {
$(this).css("opacity", 0.5)
$(this).next(".pane").animate({height: 0}, 500);
return false
});
});
<div class="wrapper">
<div class="container">
<div class="description">
<h1>Simple Accordion w/ jQuery</h1>
<p>This is a simple Accordion made only with jQuery</p>
<p>Version: 0.2</p>
<br/>
<h3>Key Features</h3>
<ul>
<li><b>No further Plugins needed</b><br/>just jQuery and you're ready to go</li>
<li><b>Progressive Enhanced</b><br/>accordion effect doesn't work with disabled javascript but it will not interrupt your layout or either hide any content.</li>
<li><b>Styleable</b><br/>just style this accordion the way you want - all neccesary styles for proper working of the accordion are added through js.</li>
</ul>
</div>
</div>
<!--
<div class="container">
<ul class="controls">
<li><a>Open All</a></li>
<li><a>Close All</a></li>
</ul>
<div class="clear"></div>
</div>
-->
<div class="container">
<div class="header">
<h3>Demo</h3>
</div>
<div class="body">
<!-- Accordion >> Start -->
<div class="accordion">
<div class="handle"><h4>Accordion Tab No. 1</h4></div>
<div class="pane"><div class="inner">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div></div>
<div class="handle"><h4>Accordion Tab No. 2</h4></div>
<div class="pane"><div class="inner">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div></div>
<div class="handle"><h4>Accordion Tab No. 3</h4></div>
<div class="pane"><div class="inner">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div></div>
<div class="handle"><h4>Accordion Tab No. 4</h4></div>
<div class="pane"><div class="inner">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div></div>
<div class="handle"><h4>Accordion Tab No. 5</h4></div>
<div class="pane"><div class="inner">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div></div>
</div>
<!-- Accordion >> End -->
</div>
</div>
<div class="container">
<div class="header">
<h3>Changelog</h3>
</div>
<div class="body">
<h5>Version 0.1</h5>
<p>* initial release</p>
<h5>Version 0.2</h5>
<p>* outsourced javascript into js/init.js</p>
<p>- removed background image</p>
<h5>Version 0.3</h5>
<p>* updated jquery to 1.7.2</p>
</div>
</div>
<div class="container">
<div class="header">
<h3>Roadmap</h3>
</div>
<div class="body">
<h5>Version 0.3</h5>
<p>Adding Icon Support to display different states</p>
<h5>Version 0.9</h5>
<p>Cleaning up the code for release</p>
</div>
</div>
</div>