kimil
9/3/2012 - 2:13 AM

Simple jQuery Accordion to be added to a Wordpress theme instead of being wasteful and using a bulky plugin. This is discussed in detail in

Simple jQuery Accordion to be added to a Wordpress theme instead of being wasteful and using a bulky plugin. This is discussed in detail in the blog post here - http://blogs.valpo.edu/systems/2012/01/12/simple-jquery-accordian-menu-for-wordpress/

style.css
content_copyfile_download
div#sidebar-sub-nav li.widget_nav_menu div {
  background-color: #b5aba1;
}

div#sidebar-sub-nav li.widget_nav_menu div ul,
div#sidebar-sub-nav li.widget_nav_menu div ul li {
  margin: 0px;
  padding: 0px;
  border: none;
  list-style: none;
}

div#sidebar-sub-nav li.widget_nav_menu div ul a {
  background-repeat: no-repeat;
  background-position: 10px center;
  padding: 5px 10px 10px 0px;
  margin-left: 32px;
  text-decoration:none;
  display: block;
  color: #ffffff;
  font-weight: bold;
}

div#sidebar-sub-nav li.widget_nav_menu div ul ul a {
  font-weight: bold;
  color:#554f4a;
}



div#sidebar-sub-nav li.widget_nav_menu div ul, div#sidebar-sub-nav li.widget_nav_menu div ul, div#sidebar-sub-nav li.widget_nav_menu div ul li {
  margin: 0px;
  padding: 0px;
  border: none;
  list-style: none;
}

div#sidebar-sub-nav li.widget_nav_menu div ul a {
  background-repeat: no-repeat;
  background-position: 10px center;
  padding: 5px 10px 10px 0px;
  margin-left: 32px;
  text-decoration:none;
  display: block;
  color: #ffffff;
  font-weight: bold;
}

div#sidebar-sub-nav li.widget_nav_menu div ul ul a {
  font-weight: bold; 
  color:#554f4a;
}

div#sidebar-sub-nav li.widget_nav_menu div ul a:hover {
  color: #fff59b;
}

div#sidebar-sub-nav li.widget_nav_menu div ul .current_page_item > a {
  color: #fff59b;
}

div#sidebar-sub-nav li.widget_nav_menu div ul ul .current_page_ancestor > a {
  color: #fff59b;
}

div#sidebar-sub-nav li.widget_nav_menu div ul span.toggleNav {
  float:left;
  display:inline;
  margin: 10px 0px 0px 10px;
  width: 12px;
  height: 12px;  
}

span.plusNav {
  background-image:url(images/plus_grey.png);
}

span.minusNav {
  background-image:url(images/minus_grey.png);
}
leftNav.js
content_copyfile_download
var $jquery = jQuery.noConflict();
$jquery(document).ready(function() {

  $jquery('div#sidebar-sub-nav > li div ul li').has('ul').prepend('<span class="toggleNav minusNav"></span>');

  $jquery('div#sidebar-sub-nav > li div ul li:not(.current-menu-item):not(.current-menu-ancestor)').has('ul').children('ul').hide();

  $jquery('div#sidebar-sub-nav > li div ul li:not(.current-menu-item):not(.current-menu-ancestor) span.toggleNav').removeClass("minusNav").addClass("plusNav");

  $jquery('span.toggleNav').click(function () {
    if ($jquery(this).hasClass("plusNav")) {
      $jquery(this).removeClass("plusNav").addClass("minusNav");
      $jquery(this).parent().children('ul').slideDown();
    } else {
      $jquery(this).removeClass("minusNav").addClass("plusNav");
      $jquery(this).parent().children('ul').slideUp();
    }
  });

});
header.php
content_copyfile_download
<?php wp_enqueue_script ('left_nav', get_template_directory_uri().'/js/leftNav.js',array('jquery')); ?>