CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-accordion
Newcastlefan
Newcastlefan

Reputation: 39

Jquery removeClass + addClass?

I'm trying to add an arrow that changes to my accordion menu. I believe I need the removeClass function of Jquery.

I've got this far at the moment:

HTML/PHP:

<dl id="narrow-by-list">
            <?php $_filters = $this->getFilters() ?>
            <?php foreach ($_filters as $_filter): ?>
            <?php if($_filter->getItemsCount()): ?>
                <dt class=""><a href="/"><?php echo $this->__($_filter->getName()) ?></a></dt>
                <dd><?php echo $_filter->getHtml() ?></dd>
            <?php endif; ?>
            <?php endforeach; ?>
</dl>

Jquery:

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("dl#narrow-by-list> dd:not(:first)").hide();
    jQuery("dl#narrow-by-list> dt a").click(function(){
        jQuery("dl#narrow-by-list> dd:visible").slideUp("fast");
        jQuery(this).parent().next().slideDown("fast");;

        return false;

        jQuery('.selected').removeClass('selected'); 
        thisObj.addClass('selected');
        var content = thisObj.parent().next();
        content.slideDown('fast');

        return false;
    });
});
</script>

CSS:

#narrow-by-list >  dt a {
    padding-left: 20px;
    background-image: url('/images/bullet.png');
    background-repeat:no-repeat;
    background-position: left center;
}
#narrow-by-list > dt a.selected{
    background-image: url('/images/bulletselected.png');
}

This all works with the accordion menu and add's an image next to the top level titles. However I'm unsure how or why the select is not appearing in the HTML or changing the image for me? Does anyone have any ideas where I am going wrong. I don't fully understand Jquery as you can probably tell!

Thanks

Upvotes: 0

Views: 313

Answers (1)

Alex Art.
Alex Art.

Reputation: 8781

  jQuery(document).ready(function(){
        jQuery("dl#narrow-by-list> dt").first().addClass('selected'); 
        jQuery("dl#narrow-by-list> dd:not(:first)").hide();
        jQuery("dl#narrow-by-list> dd:not(:first)").hide();
        jQuery("dl#narrow-by-list> dt a").click(function(event){
           if(jQuery(this).parent().hasClass('selected'))
           {
               return false;
           }
           event.preventDefault();
           jQuery('.selected').removeClass('selected'); 
           jQuery(this).parent().addClass('selected'); 
           jQuery("dl#narrow-by-list> dd:visible").slideUp("fast");
           jQuery(this).parent().next().slideDown("fast");                      
           return false;
        });
    });

EDIT Check this FIDDLE

Upvotes: 1

Related Questions