CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Camilo Terevinto
Camilo Terevinto

Reputation: 32072

Get the element that was collapsed on hidden/shown.bs.collapse

I'm working on an ASP.NET MVC application, making it completely by myself, learning as I do it. I am making a sidebar menu and I'm stuck trying to make an animated up/down arrow. Currently, the best I could get is that both/none arrows turn on hidden.bs.collapse/shown.bs.collapse. I've been looking at some posts here but I cannot make it work as I want it to. I have tried playing with something like $('.glyphicon[aria-expanded="true"]') but doesn't change the behavior.

Expected: on click, "collapse" is deleted and the arrow inverted.
Actual: on click, "collapse" is deleted but both/none arrows are inverted.

HTML:

<div id="wrapper">
    <div id="sidebar-wrapper">
        <div id="wrapperMenu" class="sidebar-nav">
            <a href="#detailsSubMenu" class="list-group-item" data-toggle="collapse" data-parent="#wrapperMenu">Menu #1<i class="glyphicon glyphicon-arrow-down"></i></a>
            <div class="collapse" id="detailsSubMenu">
                <a href="#" class="list-group-item">A1</a>
                <a href="#" class="list-group-item">A2</a>
                <a href="#" class="list-group-item">A3</a>
            </div>
            <a href="#editSubMenu" class="list-group-item" data-toggle="collapse" data-parent="#wrapperMenu">Menu #2<i class="glyphicon glyphicon-arrow-down"></i></a>
            <div class="collapse" id="editSubMenu">
                <a href="#" class="list-group-item">B1</a>
                <a href="#" class="list-group-item">B2</a>
            </div>
        </div>
    </div>

Js:

$('#wrapperMenu').on('shown.bs.collapse', function() {
    $(".glyphicon").removeClass("glyphicon-arrow-down").addClass("glyphicon-arrow-up");
});
$('#wrapperMenu').on('hidden.bs.collapse', function() {
    $(".glyphicon").removeClass("glyphicon-arrow-up").addClass("glyphicon-arrow-down");
});

Fiddle

Upvotes: 0

Views: 1650

Answers (1)

Ismail Farooq
Ismail Farooq

Reputation: 6837

simply target current element child you will find .glyphicon and use JQuery toggleClass() on it

form example

$('[data-toggle="collapse"]').click(function(){
    $(this).children(".glyphicon").toggleClass("glyphicon-arrow-down glyphicon-arrow-up")
});

working fiddle

Upvotes: 2

Related Questions