Modify jquery accordeon to work.

[Frankey]

Hi there,

I have a piece of code that should give my category list a nice accordeon effect to show the sub categories.

<ul class="categorymenu"> 
<li class="cat-item cat-item-10"><a href="...">cat1</a> 
<ul class='children'> 
	<li class="cat-item cat-item-11"><a href="...">cat1sub1</a> 
	<li class="cat-item cat-item-12"><a href="...">cat1sub2</a> 
        <li class="cat-item cat-item-13"><a href="...">cat1sub3</a> 
</ul> 
</li> <li class="cat-item cat-item-10"><a href="...">cat2</a> 
<ul class='children'> 
	<li class="cat-item cat-item-14"><a href="...">cat2sub1</a> 
	<li class="cat-item cat-item-15"><a href="...">cat2sub2</a> 
        <li class="cat-item cat-item-16"><a href="...">cat2sub3</a> 
</ul> 
</li> 
</ul>

This javascript should do the trick.

function initMenu() {
  $('ul.categorymenu ul').hide();
  $('ul.categorymenu li a').click(
    function() {
        $(this).next().slideToggle('normal');	
      }
    );
  }
  
$(document).ready(function() {initMenu();});

That works, only is it useless because as you see above the slidedown effects starts when clicking a link, and when clicking a link, we get redirected.

so i tried

function initMenu() {
  $('ul.categorymenu ul').hide();
  $('ul.categorymenu li').click(
    function() {
        $(this).next().slideToggle('normal');	
      }
    );
  }
  
$(document).ready(function() {initMenu();});

But now it is sliding down the li item beneath, click in LI cat1 will slide LI cat2

i need, click LI cat 1, show cat1sub1,cat1sub2.... etc.

Anyone knows the trick?

[Taywin]

Not sure about JQuery because I don't use it... Anyway, I am looking at your code and I see only 'click'. Could you also add 'mouseover' into it as well? I mean, the 'click' to me looks like 'click' event, so 'mouseover' may be another event you want o use for sliding instead of 'click', and 'click' should be the one that redirect to a location you want it to go to.