G2A Many GEOs
SHARE
TWEET

JQuery Accordion Navigation

Ranga14 Feb 3rd, 2016 83 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. $(document).ready(function() {
  2.    
  3.     // Find how many Classes there are and set Var
  4.     var $num = $('.category_header').length;
  5.    
  6.     // Append Unique Class Number to each Div
  7.     $('.category_header').each(function($num) {
  8.         $(this).addClass('cat-' + $num);
  9.         // Check to see if the Nav is currently Expanded (Used on page open)
  10.         if ( $('.cat-' + $num).hasClass('expanded') ) {
  11.             // Add Class that rotates the arrow downward via CSS
  12.             $('.cat-' + $num + ' .glyphicons-icon').addClass('rotate_down');
  13.         }
  14.     });
  15.    
  16.     // Append Unique Class Number to each Div
  17.     $('.toggle_nav').each(function($num) {
  18.         $(this).addClass('toggle-' + $num);
  19.         if ( $('.cat-' + $num).hasClass('expanded') ) {
  20.             $('.toggle-' + $num + ' .toggle_nav_sub').css('display', 'block');
  21.             $('.toggle-' + $num + ' .sub_cat' + ' .glyphicons-icon').addClass('rotate_down_sub');
  22.         }
  23.     });
  24.                
  25.     // Loop through each link
  26.     $('.category_header').each(function($num) {
  27.        
  28.         // Click Event to Trigger Sub Nav
  29.         $('.cat-' + $num).click(function(e) {
  30.             e.preventDefault();
  31.             $('.cat-' + $num + ' .glyphicons-icon').toggleClass('rotate_down');
  32.             // Toggle the 1st Sub Nav
  33.             $('.toggle-' + $num).fadeToggle(200);
  34.         });
  35.        
  36.         // Define Element Selector as Var
  37.         var $subNav = $('.toggle-' + $num + ' .sub_cat');
  38.        
  39.         // Find how many Sub Nav Classes there are and set Var
  40.         var $numSub = $subNav.length;
  41.        
  42.         // Append Unique Class Number to each Sub Nav Div
  43.         $subNav.each(function($numSub) {
  44.             $(this).addClass('sub_cat-' + $numSub);
  45.         });
  46.        
  47.         // Append Unique Class Number to each Sub Nav Div
  48.         $('.toggle-' + $num + ' .toggle_nav_sub').each(function($numSub) {
  49.             $(this).addClass('toggle_sub-' + $numSub);
  50.         });
  51.                    
  52.         // Loop through each Sub Nav link
  53.         $subNav.each(function($numSub) {
  54.             // Click Event to Trigger Sub Nav
  55.             $('.toggle-' + $num + ' .sub_cat-' + $numSub).click(function(e) {
  56.                 e.preventDefault();
  57.                 $('.toggle-' + $num + ' .sub_cat-' + $numSub + ' .glyphicons-icon').toggleClass('rotate_down_sub');
  58.                 // Toggle the 2nd Sub Nav
  59.                 $('.toggle-' + $num + ' .toggle_sub-' + $numSub).fadeToggle(200);
  60.             });
  61.         });
  62.        
  63.     });
  64. });
RAW Paste Data
Ledger Nano X - The secure hardware wallet
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top