Tying in .addClass() with other functions?

Posted by Anders H on Stack Overflow See other posts from Stack Overflow or by Anders H
Published on 2010-08-20T18:09:23Z Indexed on 2010/12/24 16:54 UTC
Read the original article Hit count: 188

Filed under:
|

Assuming an accordion dropdown with the standard form of:

<ul>
  <li>
  <a href="#">Main Element</a>
    <ul>
      <li>
      <a href="#">Dropdown Element</a>
      </li>
    </ul>
  </li>
</ul>

I'm using jQuery to expand when the parent element link is clicked:

var $j = jQuery.noConflict();

function initMenus() {
    $j('ul.menu ul').hide();
    $j.each($j('ul.menu'), function(){
        $j('#' + this.id + '.expandfirst ul:first').show();
    });
    $j('ul.menu li a').click(
        function() {
            var checkElement = $j(this).next();
            var parent = this.parentNode.parentNode.id;

            if($j('#' + parent).hasClass('noaccordion')) {
                $j(this).next().slideToggle('normal');
                return false;
            }
            if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
                if($j('#' + parent).hasClass('collapsible')) {
                    $j('#' + parent + ' ul:visible').slideUp('normal');
                }
                return false;
            }
            if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
                $j('#' + parent + ' ul:visible').slideUp('normal');
                checkElement.slideDown('normal');
                return false;
            }
        }
    );
}
$j(document).ready(function() {initMenus();});

To add a class to the Main Element when clicked (aka the class is enabled anytime the dropdown is expanded) I'm trying to use .toggleClass(className) without luck, most likely to my positioning. Where can I add this element to get the desired effect?

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about jquery-selectors