CODEWITHSUNDEEP
jquerytoggleslideuptoggleclass
Catherine Allen
Catherine Allen

Reputation: 95

toggleClass on slide up

I am toggling li with the same class name. When one li is clicked open, the other li slide up.

Each li has a plus sign next to it and when clicked an li is click to expand the plus sign becomes a minus by toggling the class fa-plus to be fa-minus.

However, when the open li automatically slide up because another li is clicked, the icon stays as a minus doesn't change back to be a plus.

Here is my jsfiddle: http://jsfiddle.net/a3mn8yoo/

<script>
$(function () {

    $(".has_submenu a").click(function() {
        $(".has_submenu a").not(this).next().slideUp();
        $(this).closest(".has_submenu").find(".refinement-submenu").slideToggle();
        $(this).closest(".has_submenu").find(".fa-plus, .fa-minus").toggleClass('fa-plus fa-minus');
        return false;
    }); 

});


</script>

<style>
.has_submenu .refinement-submenu {display:none;}
</style>


<ul>
    <li class="has_submenu">
        <a href="#">Refine by 1 <i class="fa fa-plus"></i></a>
        <ul class="refinement-submenu">
            <li><a href="">Silverstone</a></li>
            <li><a href="">Prestwold Hall</a></li>
        </ul>
    </li>
    <li class="has_submenu">
        <a href="#">Refine by 2 <i class="fa fa-plus"></i></a>
        <ul class="refinement-submenu">
            <li><a href="">£25</a></li>
            <li><a href="">£50</a></li>
        </ul>
    </li>
    <li class="has_submenu">
        <a href="#">Refine by 3 <i class="fa fa-plus"></i></a>
        <ul class="refinement-submenu">
            <li><a href="">London</a></li>
            <li><a href="">South West</a></li>
        </ul>
    </li>    
</ul>

Any ideas?

Upvotes: 0

Views: 779

Answers (2)

Talmid
Talmid

Reputation: 1401

You had:

$(this).closest(".has_submenu").find(".fa-plus, .fa-minus");

I added:

$(this).closest(".has_submenu").find(".fa-plus, .fa-minus").end().siblings().find('.fa-minus').toggleClass('fa-plus fa-minus');

Try this updated fiddle:

http://jsfiddle.net/a3mn8yoo/6/

Upvotes: 0

Master Slave
Master Slave

Reputation: 28529

You code held an idea already, in a similar way you slideUp other divs, you can toggle the "-"

$(".has_submenu a").not(this).find(" .fa-minus").toggleClass('fa-plus fa-minus');

http://jsfiddle.net/a3mn8yoo/1/

Upvotes: 1

Related Questions