Bootstrap Collapse Up Automatically

Question

I'm using bootstrap collapse for my following code.

.downloadmenu { width:500px; background-color:#7FFFD4; margin:0 auto; text-align:center; padding:60px; height: auto; } .clear { clear:both; } span { background-color:red; padding:15px; border-radius:10px; float:right; margin:10px; } span:hover { cursor: pointer; background-color:yellow; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="downloadmenu"> <span data-toggle="collapse" data-target="#FireFoxCol">FireFox</span> <span data-toggle="collapse" data-target="#ChromeCol">Chrome</span> <span data-toggle="collapse" data-target="#OperaCol">Opera</span> <span data-toggle="collapse" data-target="#SafariCol">Safari</span> <div class="clear"></div> <div class="well well-sm collapse" id="FireFoxCol"> <b>Downloding FireFox...</b><br/> <a href="...">-Download For Windows</a><br/> <a href="...">-Download For Linux</a> </div> <div class="well well-sm collapse" id="ChromeCol"> <b>Downloding Chrome...</b><br/> <a href="...">-Download For Android</a><br/> <a href="...">-Download For BlackBerry</a> </div> <div class="well well-sm collapse" id="OperaCol"> <b>Downloding Opera...</b><br/> <a href="...">-Download For Mac</a><br/> <a href="...">-Download For IOS</a> </div> <div class="well well-sm collapse" id="SafariCol"> <b>Downloding Safari...</b><br/> <a href="...">-Download For Windows Phone</a><br/> <a href="...">-Download For Java</a> </div> </div>

When you click on the FireFox, it shows a div.

And when you click, on the Safari forexample, another div will apear, under it.

I want that, when a div is collapse down (like FireFox) and you click on another one (like Safari), the current FireFox's div collapse up, and then Safari's div collapse down ! It's just an example.

How can I do it ?

You can also check this : https://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp

Carol Skelly · Accepted Answer · 2017-03-04 10:27:55Z

The behavior you want is called "accordion", and it's built in to Bootstrap. There are 2 additional things you need to make the data-toggle="collapse" have only 1 collapsible item open at a time. Each collapsible item shares the same parent, in this case data-parent=".downloadmenu". The other thing is that the immediate child of of the parent, must be the .panel class...

<div class="downloadmenu"> <div class="panel"> <span data-toggle="collapse" data-parent=".downloadmenu" data-target="#FireFoxCol">FireFox</span> <span data-toggle="collapse" data-parent=".downloadmenu" data-target="#ChromeCol">Chrome</span> <span data-toggle="collapse" data-parent=".downloadmenu" data-target="#OperaCol">Opera</span> <span data-toggle="collapse" data-parent=".downloadmenu" data-target="#SafariCol">Safari</span> <div class="clearfix"></div> <div class="well well-sm collapse" id="FireFoxCol"> <b>Downloding FireFox...</b> </div> <div class="well well-sm collapse" id="ChromeCol"> <b>Downloding Chrome...</b> </div> <div class="well well-sm collapse" id="OperaCol"> <b>Downloding Opera...</b> </div> <div class="well well-sm collapse" id="SafariCol"> <b>Downloding Safari...</b> </div> </div> </div>

Demo on Codeply

Collectives™ on Stack Overflow

Bootstrap Collapse Up Automatically

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related