diff --git a/css/smk-accordion.css b/css/smk-accordion.css new file mode 100644 index 0000000..9238aac --- /dev/null +++ b/css/smk-accordion.css @@ -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; +} diff --git a/images/plusminus.png b/images/plusminus.png new file mode 100644 index 0000000..238682c Binary files /dev/null and b/images/plusminus.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..a4371c6 --- /dev/null +++ b/index.html @@ -0,0 +1,217 @@ + + + + SMK Accordion + + + + + + + + + + + +
+ +

Example 1(second section active)

+ +
+ + +
+
Section 1
+
+

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.

+
+
+ + +
+
Section 2
+
+

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.

+
+
+ + +
+
Section 3
+
+

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.

+
+
+ +
+ + +

Example 2(no active section[closeAble])

+ +
+ + +
+
Section 1
+
+

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.

+
+
+ + +
+
Section 2
+
+

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.

+
+
+ + +
+
Section 3
+
+

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.

+
+
+ +
+ + +

Example 3(no expand icons)

+ +
+ + +
+
Section 1
+
+

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.

+
+
+ + +
+
Section 2
+
+

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.

+
+
+ + +
+
Section 3
+
+

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.

+
+
+ +
+ + +

Example 4(single section[closeAble])

+ +
+ + +
+
Section 1
+
+

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.

+
+
+ +
+ + + +
+ + + + + + \ No newline at end of file diff --git a/js/smk-accordion.js b/js/smk-accordion.js new file mode 100644 index 0000000..ce377dc --- /dev/null +++ b/js/smk-accordion.js @@ -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('
'); + } + + 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 ));