Created
November 30, 2012 05:25
-
-
Save JoeHana/4173917 to your computer and use it in GitHub Desktop.
A CodePen by Joe Hana. Simple Accordion - This is a simple Accordion made only with jQuery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 | |
| }); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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;} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment