CODEWITHSUNDEEP
javascriptcsstwitter-bootstraptwitter-bootstrap-3toggle
Mr. Morbide
Mr. Morbide

Reputation: 23

How to collapse content and change glyphicon in buttons right in bootstrap?

In the lack of my javascript-skills I need some help for my very basic bootstrap problem.
That's the goal: four hidden paragraphs via collapse and a "toggle" button for each to make it visible or hidden.
That's the problem: the first collapse works fine, but the second, third and fourth glyphicon inside the buttons is changing too. And if I want to view the second, third and fourth collapsed paragraph after clicking the appropriate button it only shows the first paragraph. What happen? Is there only the one way to make this works, to include different IDs for each paragraph in the Javascript?
Live on Bootply: http://www.bootply.com/Jyf06v1aiK

<div class="col-xs-6">
    <div class="collapse" id="collapseDiv">
        <p class="">This is the FIRST collapsible content!</p>
    </div>
    <button data-toggle="collapse" data-target="#collapseDiv">
      <span class="glyphicon glyphicon-large glyphicon-menu-down"></span>
    </button>
</div>
<div class="col-xs-6">
    <div class="collapse" id="collapseDiv">
        <p class="">This is the SECOND collapsible content!</p>
    </div>
    <button data-toggle="collapse" data-target="#collapseDiv">
      <span class="glyphicon glyphicon-large glyphicon-menu-down"></span>
    </button>
</div>
<div class="col-xs-6">
    <div class="collapse" id="collapseDiv">
        <p class="">This is the THIRD collapsible content!</p>
    </div>
    <button data-toggle="collapse" data-target="#collapseDiv">
      <span class="glyphicon glyphicon-large glyphicon-menu-down"></span>
    </button>
</div>
<div class="col-xs-6 bg-success">
    <div class="collapse" id="collapseDiv">
        <p class="">This is the FOURTH collapsible content!</p>
    </div>
    <button data-toggle="collapse" data-target="#collapseDiv">
      <span class="glyphicon glyphicon-large glyphicon-menu-down"></span>
    </button>
</div>

Javascript:

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

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

Upvotes: 2

Views: 1537

Answers (1)

nbermudezs
nbermudezs

Reputation: 2844

Take a look at my changes on your code here.

Your issue is not actually related to JS, but to concepts around the DOM. First of all, it isn't a good idea to have the same id in multiple elements, the id attribute is supposed to be unique across the entire DOM.

Second, $('.glyphicon') refers to ALL the elements in the DOM with a class glyphicon not only the closest to your collapse div.

I'm including the code here but feel free to try it in the link above.

<div class="container">
     <h1 class="">Bootstrap Collapse Buttons (WIP)</h1>

    <div class="col-xs-6 bg-warning">
        <div class="collapse customCollapse" id="collapseDiv">
            <p class="">This is the FIRST collapsible content!</p>
        </div>
        <button data-toggle="collapse" data-target="#collapseDiv" class=""> <span class="glyphicon glyphicon-large glyphicon-menu-down"></span>

        </button>
    </div>
    <div class="col-xs-6 bg-info">
        <div class="collapse customCollapse" id="collapseDiv2">
            <p class="">This is the SECOND collapsible content!</p>
        </div>
        <button data-toggle="collapse" data-target="#collapseDiv2" class=""> <span class="glyphicon glyphicon-large glyphicon-menu-down"></span>

        </button>
    </div>
    <div class="col-xs-6 bg-danger">
        <div class="collapse customCollapse" id="collapseDiv3">
            <p class="">This is the FIRST collapsible content!</p>
        </div>
        <button data-toggle="collapse" data-target="#collapseDiv3" class=""> <span class="glyphicon glyphicon-large glyphicon-menu-down"></span>

        </button>
    </div>
    <div class="col-xs-6 bg-success">
        <div class="collapse customCollapse" id="collapseDiv4">
            <p class="">This is the SECOND collapsible content!</p>
        </div>
        <button data-toggle="collapse" data-target="#collapseDiv4" class=""> <span class="glyphicon glyphicon-large glyphicon-menu-down"></span>

        </button>
    </div>
</div>

And the js

$('.customCollapse').on('shown.bs.collapse', function () {
   $(this).parent().find(".glyphicon").removeClass("glyphicon-menu-down").addClass("glyphicon-menu-up");
});

$('.customCollapse').on('hidden.bs.collapse', function () {
   $(this).parent().find(".glyphicon").removeClass("glyphicon-menu-up").addClass("glyphicon-menu-down");
});

EDIT

A little extra explanation: if you plan to share js logic across multiple DOM elements a good way to do it is using classes. That is why I changed your js and DOM to use .customCollapse instead of the collapseDiv id.

Note also that I changed the ids on each collapseDiv by adding a number to make it unique.

Upvotes: 2

Related Questions