Created
September 6, 2015 13:16
-
-
Save johnmorris/89c97a7832b4f2b338a4 to your computer and use it in GitHub Desktop.
A simple jQuery accordion (video tutorial at: http://youtu.be/6LfMsU1LfM8)
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>jQuery Accordion</title> | |
| <style> | |
| html, body { | |
| font-size: 100%; | |
| } | |
| .accordion { | |
| margin: 50px; | |
| } | |
| .accordion dt, | |
| .accordion dd { | |
| padding: 10px; | |
| border: 1px solid #000; | |
| } | |
| .accordion dt a, | |
| .accordion dd a { | |
| display: block; | |
| color: #000; | |
| font-weight: bold; | |
| } | |
| .accordion dt { | |
| background-color: #ccc; | |
| } | |
| .accordion dd { | |
| margin: 0; | |
| border-top-width: 0; | |
| border-bottom-width: 0; | |
| font-size: 1rem; | |
| } | |
| .accordion dd:last-of-type { | |
| border-bottom-width: 1px; | |
| } | |
| </style> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script type="text/javascript"> | |
| jQuery(document).ready(function($){ | |
| // Hide all panels to start | |
| var panels = $('.accordion > dd').hide(); | |
| // Show first panel on load (optional). Remove if you want | |
| panels.first().show(); | |
| // On click of panel title | |
| $('.accordion > dt > a').click(function() { | |
| var $this = $(this); | |
| // Slide up all other panels | |
| panels.slideUp(); | |
| //Slide down target panel | |
| $this.parent().next().slideDown(); | |
| return false; | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <dl class="accordion"> | |
| <dt><a href="">Panel 1</a></dt> | |
| <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nisl quam, convallis ac lacus vel, mollis bibendum ante.</dd> | |
| <dt><a href="">Panel 2</a></dt> | |
| <dd>Suspendisse potenti. In ullamcorper posuere nibh, in pretium metus porttitor vitae. Aenean felis libero, condimentum sagittis.</dd> | |
| <dt><a href="">Panel 3</a></dt> | |
| <dd>Laoreet quis, auctor in orci. Ut gravida nibh vitae lorem egestas, vel commodo mi gravida. Curabitur elementum dolor id lacus.</dd> | |
| </dl> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment