Bootstrap 4 | Collapse other sections when one is expanded

Question

I am working on bootstrap 4 Collapse. Wanted to collapse other sections when one is expanded

So far i did is :

HTML

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    content 1
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
    Content 2
  </button>
</p>

<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Content one here
  </div>
</div>
<div class="collapse" id="collapseExample2">
  <div class="card card-body">
    Content 2 here
  </div>
</div>

Live demo: Live Demo

Solution 1

Make use of data-parent attribute:

<div class="container" id="myGroup">
    <p>
        <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
            content 1
        </a>
        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
            Content 2
        </button>
    </p>

    <div class="collapse" id="collapseExample" data-parent="#myGroup">
        <div class="card card-body">
            Content 1 here 
        </div>
    </div>
    <div class="collapse" id="collapseExample2" data-parent="#myGroup">
        <div class="card card-body">
            Content 2 here 
        </div>
    </div>
</div>

I added the id to your container and also added the data-parent to your content sections, referencing this container through the id.

Solution 2

just put data-parent="#element_parent",

example...

    <a class="btn btn-primary" data-toggle="collapse" href="#colla1" role="button" aria-expanded="false" aria-controls="colla1">
        content 1
    </a>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#colla2" aria-expanded="false" aria-controls="colla2">
        Content 2
    </button>

<div class="collapse" id="colla1" data-parent="#element_parent">
    <nav
        your content 1 here
    </nav>
</div>

<div class="collapse" id="colla2" data-parent="#element_parent">
    <nav
        your content 2 here
    </nav>
</div>

Comments

[Saif]

is there any other way o do it. I try with id but i cant use more then one id in one page.

[SBylemans]

You can use any selector in the data-parent attribute, like a class with .myGroup for instance. Why can't you use multiple id's in a page though?

[Niklas E.]

The accepted answer already said this. Your answer doesn't contribute to the question.