Permalink
Browse files

updating the demo and refactoring the slide and fade functionality to…

… properly apply class names after the effect has fired
  • Loading branch information...
1 parent daacf96 commit 54d896660ec9eac4a67fb96df7b66d2a90593b23 @tommcfarlin committed Apr 11, 2012
View
@@ -0,0 +1,48 @@
+h2 {
+ border-bottom: 1px dotted #ccc;
+ padding: 0 0 8px 0;
+}
+
+#menu {
+}
+
+#accordion {
+ list-style: none;
+ cursor: pointer;
+ padding: 0;
+}
+
+#accordion li {
+ border-radius: 4px;
+ border: 1px solid #eee;
+ padding: 8px;
+ margin: 8px;
+ cursor: pointer;
+}
+
+#accordion .expanded-menu {
+ margin: 0;
+ padding: 0;
+ border: 0;
+}
+
+#accordion .expanded-menu ul {
+ padding: 0;
+}
+
+#accordion .expanded-menu ul li {
+ border-top: 0;
+ margin-top: -10px;
+ border-radius: 0;
+ cursor: default;
+}
+
+#accordion li {
+ list-style: none;
+}
+
+#footer {
+ border-top: 1px dotted #ccc;
+ padding: 8px 0 0 0;
+ text-align: center;
+}
View
@@ -19,11 +19,10 @@
based on the, and callbacks for Ajax functionality for easily loading page fragments without
having to reload the page. You can also initially disable the menu.
</p>
- <p>
- Click on any menu item with child elements to demo.
- </p>
</div><!-- /about -->
+ <h2>Vanilla Menu Demo</h2>
+
<div class="demo">
<ul id="menu">
<li>
@@ -77,6 +76,8 @@
<div id="status"></div>
</div><!-- /.demo -->
+ <h2>Accordion-style Demo</h2>
+
<div class="demo">
<ul id="accordion">
<li>Parent #1</li>
@@ -112,6 +113,9 @@
</ul>
</div><!-- /.demo -->
+ <div id="footer">
+ <a href="http://github.com/tommcfarlin/Collapsible-Menus">Return To GitHub</a>
+ </div>
</div><!-- /container -->
</body>

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -4,7 +4,7 @@ $(function() {
effect: 'none',
initialCollapse: true
});
-
+
$('#accordion').collapsible({
effect: 'slide',
initialCollapse: true
@@ -14,7 +14,7 @@
var opts = $.extend({}, $.fn.collapsible.defaults, options);
return this.each(function(evt) {
- setupMenus($(this).attr('id'), opts);
+ menuHandler($(this).attr('id'), opts);
});
}; // end collapse
@@ -29,88 +29,96 @@
*
* opts The plugins array of options
*/
- function setupMenus(sId, opts) {
+ function menuHandler(sId, opts) {
+ // Use the menu ID attribute to properly select nested menus
$('#' + sId + ' li ul').parent('li')
.prev()
.each(function() {
// If set, collapse nested menus on load
- if(opts.initialCollapse) {
- collapse(opts, $(this).next());
- } // end if
+ if( opts.initialCollapse ) {
+
+ $(this).next()
+ .addClass('collapsed-menu')
+ .hide();
+
+ } else {
+
+ $(this).next()
+ .addClass('expanded-menu');
+
+ } // end if/else
// Expand or collapse menu when the root menu is clicked
$(this).on('click', function() {
- toggle(opts, $(this).next());
+
+ var $menu = $(this).next();
+ switch(opts.effect.toString().toLowerCase()) {
+
+ case 'fade':
+
+ if($menu.hasClass('expanded-menu' )) {
+
+ $menu.fadeOut('fast', function() {
+ $(this).removeClass('expanded-menu')
+ .addClass('collapsed-menu');
+ });
+
+ } else {
+
+ $menu.removeClass('collapsed-menu')
+ .addClass('expanded-menu')
+ .fadeIn('fast');
+
+ } // end if/else
+
+ break;
+
+ case 'slide':
+
+ if( $menu.hasClass('expanded-menu' ) ) {
+
+ $menu.slideUp('fast', function() {
+ $(this).removeClass('expanded-menu')
+ .addClass('collapsed-menu');
+ });
+
+ } else {
+
+ $menu.removeClass('collapsed-menu')
+ .addClass('expanded-menu')
+ .slideDown('fast');
+
+ } // end if/else
+
+ break;
+
+ default:
+
+ if( $menu.hasClass('expanded-menu' ) ) {
+
+ $menu.removeClass('expanded-menu')
+ .addClass('collapsed-menu')
+ .hide();
+
+ } else {
+
+ $menu.removeClass('collapsed-menu')
+ .addClass('expanded-menu')
+ .show();
+
+ } // end if/else
+
+ break;
+
+ } // end switch/case
+
});
});
- } // end setupMenus
-
- /**
- * Click handler that toggles the visibility of each menu based
- * on the effect option specified.
- *
- * opts The plugins array of options
- * $menu The menu to toggle
- */
- function toggle(opts, $menu) {
-
- switch(opts.effect.toString().toLowerCase()) {
-
- case 'fade':
- $menu.fadeToggle('fast');
- break;
-
- case 'slide':
- $menu.slideToggle('fast');
- break;
-
- default:
- $menu.toggle();
- break;
-
- } // end switch/case
-
- } // end toggle
-
- /**
- * Toggles the visibility of each menu based on the effect
- * option specified.
- *
- * opts The plugins array of options
- * $menu The menu to toggle
- */
- function collapse(opts, $menu) {
-
- // Updates the class name of the menu based on its state
- $menu.toggleClass(function() {
-
- var sClass = '';
-
- if($(this).hasClass('collapsed-menu')) {
-
- $(this)
- .removeClass('collapsed-menu')
- .show();
- sClass = 'expanded-menu';
-
- } else {
-
- $(this)
- .removeClass('expanded-menu')
- .hide();
- sClass = 'collapsed-menu';
-
- } // end if/else
-
- return sClass;
-
- });
-
- } // end collapse
+ } // end menuHandler
/*--------------------------------------------------*
* Default Settings

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

0 comments on commit 54d8966

Please sign in to comment.