Created
August 15, 2012 20:34
-
-
Save nicdaCosta/3363371 to your computer and use it in GitHub Desktop.
Here is a basic accordion I wrote for use with jQuery. It is responsive and preforms quite nicely on touch devices due to its very simple nature. JS Bin Link - http://jsbin.com/ikeyef/2/edit
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
| /* ========================================================================== | |
| Basic Global Styles Header | |
| ========================================================================== */ | |
| * { | |
| box-sizing:border-box; | |
| } | |
| body { | |
| width: 100%; | |
| min-width: 350px; | |
| background: #fff; | |
| color: #333; | |
| font-size: 1.2em; | |
| font-family: 'Quicksand', sans-serif;; | |
| } | |
| ul { | |
| list-style: none; | |
| } | |
| h2 { | |
| margin: 3% 0; | |
| text-align: center; | |
| font-family: 'Parisienne', cursive; | |
| font-size: 1.8em; | |
| line-height: 1.4em; | |
| } | |
| /* Accordion Styling | |
| ========================================================================== */ | |
| .accordion{ | |
| float:left; | |
| width: 100%; | |
| } | |
| .accordion > li { | |
| float:left; | |
| width: 96%; | |
| margin: 0 2%; | |
| background: #eee; | |
| cursor: pointer; | |
| } | |
| .accordion > li h3 { | |
| width: 100%; | |
| padding: 2% 0; | |
| margin: 0; | |
| border-bottom: 0.1em solid #f0f0f0; | |
| background: #065175; | |
| color: #f0f0f0; | |
| font-size: 1.2em; | |
| line-height: 1em; | |
| text-align: center; | |
| } | |
| .accordion > li h3:hover { | |
| color: #A6DFFA; | |
| } | |
| .accordion > li:last-child h3 { | |
| border-bottom:none; | |
| } | |
| .accordion_detail { | |
| float:left; | |
| display: none; | |
| width: 100%; | |
| border: 0.1em solid #3f5c6a; | |
| } | |
| .accordion_detail li { | |
| float:left; | |
| width: 90%; | |
| padding: 2% 0; | |
| margin: 0 5%; | |
| border-bottom: 0.1em solid #999; | |
| } | |
| .accordion_detail li:last-child { | |
| border-bottom: none; | |
| } | |
| .accordion_detail li div h4 { | |
| float: left; | |
| width: 94%; | |
| padding: 2% 0; | |
| margin: 0 3%; | |
| border-bottom: 0.15em solid #666; | |
| line-height: 1.2em; | |
| } | |
| .accordion_detail li div p { | |
| float: left; | |
| width: 94%; | |
| padding: 3% 0; | |
| margin: 1% 2%; | |
| font-style: italic; | |
| } | |
| .accordion_detail .item_detail { | |
| float: right; | |
| width: 25%; | |
| padding: 3% 0; | |
| margin: 0 2%; | |
| font-size: 1.1em; | |
| text-align: center; | |
| font-weight: bold; | |
| } |
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> | |
| <meta charset=utf-8 /> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <ul class = "accordion" > | |
| <li> | |
| <h3>Menu Category</h3> | |
| <ul class = "accordion_detail" > | |
| <li> | |
| <div> | |
| <h4>Menu Item</h4> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. | |
| </p> | |
| </div> | |
| <span class = "item_detail" >R 10</span> | |
| </li> | |
| <li> | |
| <div> | |
| <h4>Menu Item 2</h4> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. | |
| </p> | |
| </div> | |
| <span class = "item_detail" >R 15</span> | |
| </li> | |
| </ul> | |
| </li> | |
| <li> | |
| <h3>Menu Category 2</h3> | |
| <ul class = "accordion_detail" > | |
| <li> | |
| <div> | |
| <h4>Menu Item 3</h4> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. | |
| </p> | |
| </div> | |
| <span class = "item_detail" >R 15</span> | |
| </li> | |
| </ul> | |
| </li> | |
| <li> | |
| <h3>Menu Category 3</h3> | |
| <ul class = "accordion_detail" > | |
| <li> | |
| <div> | |
| <h4>Menu Item 4</h4> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. | |
| </p> | |
| </div> | |
| <span class = "item_detail" >R 20</span> | |
| </li> | |
| <li> | |
| <div> | |
| <h4>Menu Item 5</h4> | |
| <p> | |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. | |
| </p> | |
| </div> | |
| <span class = "item_detail" >R 5</span> | |
| </li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </body> | |
| </html> |
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
| /*! Accordion - v0.1.0 - 2012-08-13 | |
| * Copyright (c) 2012 Nic da Costa; Licensed MIT, GPL */ | |
| (function( $ ) { | |
| 'use strict'; | |
| $.fn.accordion = function( $options ) { | |
| // Extend Options with Default instances | |
| $options = $.extend({}, $.fn.accordion.options, $options); | |
| var $this = $( this ); | |
| //Initialise event delegation | |
| $this.on( 'click' , $options.accordionHeader , function( e ) { | |
| var $accordionDetail = $( this ).parent( 'li' ).children( $options.childrenSelector ); | |
| if ( ! $accordionDetail.hasClass( 'visible' ) ) { | |
| $accordionDetail.addClass( 'visible' ).slideDown(); | |
| } | |
| else { | |
| $accordionDetail.removeClass( 'visible' ).slideUp(); | |
| } | |
| }); | |
| }; | |
| $.fn.accordion.options = { | |
| openByDefault : false, | |
| accordionHeader : 'h3', | |
| childrenSelector : '.accordion_detail' | |
| }; | |
| }( jQuery )); | |
| // Initialise Accordion | |
| $('.accordion').accordion(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment