-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
376 additions
and
0 deletions.
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| .smk_accordion{ | ||
| position: relative; | ||
| margin-bottom: 20px; | ||
| } | ||
| .smk_accordion .accordion_in{ | ||
| border: 1px solid #ccc; | ||
| position: relative; | ||
| z-index: 10; | ||
| margin-top: -1px; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| /* Head */ | ||
| .smk_accordion .accordion_in .acc_head{ | ||
| position: relative; | ||
| background: #FDFDFD; | ||
| padding: 10px; | ||
| font-size: 14px; | ||
| display: block; | ||
| cursor: pointer; | ||
| } | ||
| .smk_accordion .accordion_in:first-of-type, | ||
| .smk_accordion .accordion_in:first-of-type .acc_head{ | ||
| border-radius: 3px 3px 0 0; | ||
| } | ||
| .smk_accordion .accordion_in:last-of-type, | ||
| .smk_accordion .accordion_in:last-of-type .acc_content{ | ||
| border-radius: 0 0 3px 3px; | ||
| } | ||
|
|
||
| /* Content */ | ||
| .smk_accordion .accordion_in .acc_content{ | ||
| background: #F9F9F9; | ||
| color: #7B7E85; | ||
| padding: 3px 10px; | ||
| } | ||
| .smk_accordion .accordion_in h1:first-of-type, | ||
| .smk_accordion .accordion_in h2:first-of-type, | ||
| .smk_accordion .accordion_in h3:first-of-type, | ||
| .smk_accordion .accordion_in h4:first-of-type, | ||
| .smk_accordion .accordion_in h5:first-of-type, | ||
| .smk_accordion .accordion_in h6:first-of-type | ||
| { | ||
| margin-top: 5px; | ||
| } | ||
|
|
||
|
|
||
| /* Icon expand */ | ||
| .smk_accordion .accordion_in .acc_head .acc_icon_expand{ | ||
| display: block; | ||
| width: 18px; | ||
| height: 18px; | ||
| position: absolute; | ||
| left: 10px; | ||
| top: 50%; | ||
| margin-top: -9px; | ||
| background: url(../images/plusminus.png) center 0; | ||
| } | ||
| .smk_accordion .accordion_in.acc_active .acc_head .acc_icon_expand{ | ||
| background: url(../images/plusminus.png) center -18px; | ||
| } | ||
|
|
||
| /* JS requires */ | ||
| .smk_accordion .accordion_in.acc_active .acc_content{ | ||
| display: block; | ||
| } | ||
| .smk_accordion .accordion_in.acc_active .acc_head{ | ||
| background: #F9F9F9; | ||
| } | ||
| .smk_accordion.acc_with_icon .accordion_in .acc_head, | ||
| .smk_accordion.acc_with_icon .accordion_in .acc_content{ | ||
| padding-left: 40px; | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,217 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>SMK Accordion</title> | ||
|
|
||
| <!-- Accordion styles --> | ||
| <link rel="stylesheet" href="css/smk-accordion.css" /> | ||
|
|
||
| <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script> | ||
| <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> | ||
|
|
||
| <style type="text/css"> | ||
| /*Demo styles*/ | ||
| body{ | ||
| margin: 0; | ||
| padding: 0; | ||
| font-family: 'Helvetica', Arial, sans-serif; | ||
| font-size: 12px; | ||
| } | ||
| .container_demo{ | ||
| max-width: 900px; | ||
| margin: 30px auto 100px; | ||
| } | ||
| </style> | ||
|
|
||
| </head> | ||
| <body> | ||
| <div class="container_demo"> | ||
|
|
||
| <h2>Example 1(second section active)</h2> | ||
| <!-- Accordion begin --> | ||
| <div class="accordion_example1"> | ||
|
|
||
| <!-- Section 1 --> | ||
| <div class="accordion_in"> | ||
| <div class="acc_head">Section 1</div> | ||
| <div class="acc_content"> | ||
| <p>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | ||
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | ||
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | ||
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | ||
| Fusce aliquet neque et accumsan fermentum. Aliquam lobortis neque in nulla | ||
| tempus, molestie fermentum purus euismod.</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Section 2 --> | ||
| <div class="accordion_in acc_active"> | ||
| <div class="acc_head">Section 2</div> | ||
| <div class="acc_content"> | ||
| <p>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | ||
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | ||
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | ||
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | ||
| Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu | ||
| fugiat nulla pariatur.</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Section 3 --> | ||
| <div class="accordion_in"> | ||
| <div class="acc_head">Section 3</div> | ||
| <div class="acc_content"> | ||
| <p>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | ||
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | ||
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | ||
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
| <!-- Accordion end --> | ||
|
|
||
| <h2>Example 2(no active section[closeAble])</h2> | ||
| <!-- Accordion begin --> | ||
| <div class="accordion_example2"> | ||
|
|
||
| <!-- Section 1 --> | ||
| <div class="accordion_in"> | ||
| <div class="acc_head">Section 1</div> | ||
| <div class="acc_content"> | ||
| <p>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | ||
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | ||
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | ||
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | ||
| Fusce aliquet neque et accumsan fermentum. Aliquam lobortis neque in nulla | ||
| tempus, molestie fermentum purus euismod.</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Section 2 --> | ||
| <div class="accordion_in"> | ||
| <div class="acc_head">Section 2</div> | ||
| <div class="acc_content"> | ||
| <p>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | ||
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | ||
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | ||
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | ||
| Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu | ||
| fugiat nulla pariatur.</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Section 3 --> | ||
| <div class="accordion_in"> | ||
| <div class="acc_head">Section 3</div> | ||
| <div class="acc_content"> | ||
| <p>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | ||
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | ||
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | ||
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
| <!-- Accordion end --> | ||
|
|
||
| <h2>Example 3(no expand icons)</h2> | ||
| <!-- Accordion begin --> | ||
| <div class="accordion_example3"> | ||
|
|
||
| <!-- Section 1 --> | ||
| <div class="accordion_in"> | ||
| <div class="acc_head">Section 1</div> | ||
| <div class="acc_content"> | ||
| <p>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | ||
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | ||
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | ||
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | ||
| Fusce aliquet neque et accumsan fermentum. Aliquam lobortis neque in nulla | ||
| tempus, molestie fermentum purus euismod.</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Section 2 --> | ||
| <div class="accordion_in acc_active"> | ||
| <div class="acc_head">Section 2</div> | ||
| <div class="acc_content"> | ||
| <p>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | ||
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | ||
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | ||
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | ||
| Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu | ||
| fugiat nulla pariatur.</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Section 3 --> | ||
| <div class="accordion_in"> | ||
| <div class="acc_head">Section 3</div> | ||
| <div class="acc_content"> | ||
| <p>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | ||
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | ||
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | ||
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
| <!-- Accordion end --> | ||
|
|
||
| <h2>Example 4(single section[closeAble])</h2> | ||
| <!-- Accordion begin --> | ||
| <div class="accordion_example4"> | ||
|
|
||
| <!-- Section 1 --> | ||
| <div class="accordion_in"> | ||
| <div class="acc_head">Section 1</div> | ||
| <div class="acc_content"> | ||
| <p>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo | ||
| consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse | ||
| cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non | ||
| proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | ||
| Fusce aliquet neque et accumsan fermentum. Aliquam lobortis neque in nulla | ||
| tempus, molestie fermentum purus euismod.</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| </div> | ||
| <!-- Accordion end --> | ||
|
|
||
|
|
||
| </div> | ||
|
|
||
|
|
||
| <script type="text/javascript" src="js/smk-accordion.js"></script> | ||
| <script type="text/javascript"> | ||
| jQuery(document).ready(function($){ | ||
|
|
||
| $(".accordion_example1").smk_Accordion({ | ||
| showIcon: true, //boolean | ||
| animation: true, //boolean | ||
| closeAble: false, //boolean | ||
| slideSpeed: 200 //integer, miliseconds | ||
| }); | ||
|
|
||
| $(".accordion_example2").smk_Accordion({ | ||
| showIcon: true, //boolean | ||
| animation: true, //boolean | ||
| closeAble: true, //boolean | ||
| slideSpeed: 200 //integer, miliseconds | ||
| }); | ||
|
|
||
| $(".accordion_example3").smk_Accordion({ | ||
| showIcon: false, //boolean | ||
| animation: true, //boolean | ||
| closeAble: false, //boolean | ||
| slideSpeed: 200 //integer, miliseconds | ||
| }); | ||
|
|
||
| $(".accordion_example4").smk_Accordion({closeAble: true}); | ||
|
|
||
|
|
||
| }); | ||
| </script> | ||
| </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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
|
|
||
| /** | ||
| * SMK Accordion jQuery Plugin | ||
| * ---------------------------------------------------- | ||
| * Author: Smartik | ||
| * Author URL: http://smartik.ws/ | ||
| * Copyright: (c) Smartik. | ||
| * License: MIT | ||
| */ | ||
| ;(function ( $ ) { | ||
|
|
||
| $.fn.smk_Accordion = function( options ) { | ||
|
|
||
| // Defaults | ||
| var settings = $.extend({ | ||
| // These are the defaults. | ||
| animation: true, | ||
| showIcon: true, | ||
| closeAble: false, | ||
| slideSpeed: 200 | ||
| }, options ); | ||
|
|
||
| // Cache current instance | ||
| // To avoid scope issues, use 'plugin' instead of 'this' | ||
| // to reference this class from internal events and functions. | ||
| var plugin = this; | ||
|
|
||
| //"Constructor" | ||
| var init = function() { | ||
| plugin.createStructure(); | ||
| plugin.clickHead(); | ||
| } | ||
|
|
||
| // Add .smk_accordion class | ||
| this.createStructure = function() { | ||
|
|
||
| //Add Class | ||
| plugin.addClass('smk_accordion'); | ||
| if( true === settings.showIcon ){ | ||
| plugin.addClass('acc_with_icon'); | ||
| } | ||
|
|
||
| //Append icon | ||
| if( true === settings.showIcon ){ | ||
| plugin.find('.acc_head').prepend('<div class="acc_icon_expand"></div>'); | ||
| } | ||
|
|
||
| plugin.find('.accordion_in .acc_content').not('.acc_active .acc_content').hide(); | ||
|
|
||
| } | ||
|
|
||
| // Action when the user click accordion head | ||
| this.clickHead = function() { | ||
|
|
||
| plugin.on('click', '.acc_head', function(){ | ||
|
|
||
| var s_parent = $(this).parent(); | ||
|
|
||
| if( s_parent.hasClass('acc_active') == false ){ | ||
| plugin.find('.acc_content').slideUp(settings.slideSpeed); | ||
| plugin.find('.accordion_in').removeClass('acc_active'); | ||
| } | ||
|
|
||
| if( s_parent.hasClass('acc_active') ){ | ||
| if( false !== settings.closeAble){ | ||
| s_parent.children('.acc_content').slideUp(settings.slideSpeed); | ||
| s_parent.removeClass('acc_active'); | ||
| } | ||
| } | ||
| else{ | ||
| $(this).next('.acc_content').slideDown(settings.slideSpeed); | ||
| s_parent.addClass('acc_active'); | ||
| } | ||
|
|
||
| }); | ||
|
|
||
| } | ||
|
|
||
| //"Constructor" init | ||
| init(); | ||
| return this; | ||
|
|
||
| }; | ||
|
|
||
|
|
||
| }( jQuery )); |