Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap data-toggle collapses div after second click, not first

I have the simple example with Bootstrap and toggling divs by click. Here is markup:

<div class="accordion-heading">
    <a class="accordion-toggle"
       data-toggle="collapse"
       data-parent="#accordion2"
       href="#collapseOne">Open!</a>
</div>
<div id="collapseOne" class="accordion-body">
    <div class="span6">
        <div class="well well-small">
            <div class="accordion-toggle">
                ...some text...
            </div>
        </div>
    </div>
    <div class="span2"></div>                            
</div>

When user clixks link with title 'Open!' underlying div expands or collapses. Div is expanded initially and when user clicks first time it has no effect. Then if user clicks second time, div collapses.

In the original example div is collapsed initially but I would like it to be opened. How could I fix the problem?

like image 489
Pupkin Avatar asked Sep 02 '16 10:09

Pupkin


People also ask

How do I stop a Bootstrap collapse?

The . collapse class indicates a collapsible element (a <div> in our example); this is the content that will be shown or hidden with a click of a button. To control (show/hide) the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element.

How do you keep multiple collapses open in Bootstrap 4?

Assuming that you're using Bootstrap 4, you can simply remove the data-parent attribute from the element with the collapse class. This subscribes the collapse to events on #accordionExample , which is the main accordion element, via the data-parent attribute.

How do you toggle collapse in Bootstrap?

Just add data-toggle="collapse" and a data-target to the element to automatically assign control of one or more collapsible elements. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element.

What is difference between collapse and accordion?

In bootstrap context wise, accordion is basically a collapse button with a lot of smaller info in it. Bootstrap use card to make an accordion. on line 1, <div id="accordion" role="tablist"> , this is where the data-parent refers to. on line 2 <div class="card"> , we are using a card class, to show the card effect.


2 Answers

I had this problem, and in my case I had foolishly inserted two "class" attributes in the div I wanted to collapse like so:

<div class="something" id="mydiv" class="collapse in"> <div>

The browser seems to eliminate the second class attribute instead of merging them.

My problem was fixed by "merging" together the two class attributes:

<div id="mydiv" class="something collapse in"> <div>
like image 96
Thundzz Avatar answered Sep 17 '22 13:09

Thundzz


<a class="btn btn-primary" data-toggle="collapse" href="#collapsePanel" role="button" aria-expanded="false" aria-controls="collapsePanel">Collapse</a>

<div id="collapsePanel" class="collapse show"><!-- Content Here --></div>

This will make it collapsible, but show the panel by default. When you click the Collapse button, it will collapse the panel on the first click.

I'm only adding this here for if anyone is looking to do it either way. I found this link when searching for its inverse. Hope it helps!

like image 34
Blake Neal Avatar answered Sep 18 '22 13:09

Blake Neal