Accordion Menu

I really like the option to press on the arrow to open the sub categories in the vertical menu.
I’d like to have the same functionality if one press the name of the category.

For as much as I can tell this is just two different links:
1. arrow -- open the subcategories as accordion
2. category name -- open the category page.
I want the two links to have the same functionality as the first.

6 answers

congtq 0.00 $tone August 25, 2010

To have the same functionality as the first, you can change code in skin\frontend\default\jm_tube\js\ja.accordion.nav. js file.
Remove these code lines:

1. jQuery(‘#ja-sidenav li.level0 > a’).addClass (‘subhead’);
2. jQuery(‘#ja-sidenav li.level0 > a’).after (‘<a href="#" title="" class="toggle">&nbsp;</a>’);
3. header: ‘.toggle’,

May be you will need to change some css in skin/frontend/default/jm_tube/css/theme.css file: remove red line


#ja-sidenav .selected.over a.selected{
	background: url(../images/arrow-cat-active-2.gif) no-repeat right center;
	text-decoration: none;
congtq 0.00 $tone August 27, 2010

Pls replace all content of skin\frontend\default\jm_tube\js\ja.accordion.nav. js with


  jQuery('#ja-sidenav ul').hide();
  jQuery('#ja-sidenav ul:first').show();
  jQuery('#ja-sidenav li a').click(
    function() {
      var checkElement = jQuery(this).next();
      if(('ul')) && (':visible'))) {
        return false;
      if(('ul')) && (!':visible'))) {
        jQuery('#ja-sidenav ul:visible').slideUp('normal');
        return false;

Profile photo of Yigal Lavi 0.00 $tone August 30, 2010

I’m trying to figure out how to leave the active menu shown, how do i do that?
the last piece of code made the first menu item always shown as I stated above.

Thanks in advance!

congtq 0.00 $tone August 31, 2010

you try to restore original of skin\frontend\default\jm_tube\js\ja.accordion.nav. js file and change in skin\frontend\default\jm_tube\csstheme.css file as below


#ja-sidenav .toggle {
	position: absolute;
	width: 210px;
	height: 36px;
	top: 1px;
	right: 0;
	padding: 0;
	background: url(../images/arrow-cat.gif) no-repeat right center transparent;
#ja-sidenav .toggle:hover,
#ja-sidenav li.over a.toggle  {
	background: url(../images/arrow-cat-hover.gif) no-repeat right center #F4F4F4 transparent;
	text-decoration: none;
#ja-sidenav li.selected .toggle {
	background: url(../images/arrow-cat-active.gif) no-repeat right center transparent;
#ja-sidenav li.selected a.toggle:hover,
#ja-sidenav .selected.over a.selected{
	background: url(../images/arrow-cat-active-2.gif) no-repeat right center transparent;
	text-decoration: none;
#ja-sidenav li a:hover, #ja-sidenav li a:active{
	text-decoration: none;
	background: #F4F4F4 transparent;
	color: #666666;

#ja-sidenav li.selected a,
#ja-sidenav li.selected a:hover, 
#ja-sidenav li.selected a:active  {
	background: #454545 transparent;
	color: #B5B5B4;

This question is now closed

Written By