SHARE
TWEET

JQuery Accordion Navigation

Ranga14 Feb 3rd, 2016 65 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
Want to get better at JavaScript?
Learn to code JavaScript in 2017
Top