I have 5 accordions and data under each accordion but wat i need is that the all the accordion has to be closed first and when i click the accordion then i need it to be opened.
<div class="panel panel-default" style=" background: rgba(0,0,0,0.1)">
<div class="panel-heading" style="background:rgba(0,0,0,0.7);">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
<h4 class="panel-title">SUPPLIERS <b class="closed"></b>
</h4>
</a>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<p class="title"> > BP</p>
<p class="title"> > CHEVERON </p>
<p class="title"> > CITGO </p>
<p class="title"> > EXOON </p>
</div>
</div>
This is the code sample for the first accordion is there anyway to close the first accordion and open it only on click?
Your need to remove class in from accordion collapse..
<div id="collapse1" class="accordion-body collapse">
Related
I am having a similar problem to the question first posted here. bootstrap initially collapsed element
I have tried using the notes from this question in troubleshooting my own code, but so far I haven't gotten it to work.
Basically, I have an accordion list nested within another accordion. So far, my first accordion menu is set to be collapsed when first viewing. However, the accordion menu nested within it always has one tab open, and it's not always even the same tab (for example, sometime the first tab is the one that is expanded/showing, and other times its the last or the second tab.)
Since my accordion is set to collapse, and never had a "collapse in" element, I'm really not sure why it is expanding? I've also tried changing my data-toggle to false, and to collapse, respectively, but I'm not sure if I am getting the formatting wrong, and that is why it won't work.
<div role="tablist" id="accordion-1">
<div class="card">
<div class="card-header" role="tab">
<h5 class="mb-0"><a data-toggle="collapse" aria-expanded="false" aria-controls="accordion-1 .item-1" href="div#accordion-1 .item-1">Computers</a></h5>
</div>
<div class="collapse item-1" role="tabpanel" data-parent="#accordion-1">
<div class="card-body">
<div role="tablist" id="accordion-2">
<div class="card">
<div class="card-header" role="tab">
<h5 class="mb-0"><a data-toggle="collapse" aria-controls="accordion-2 .item-1" href="div#accordion-2 .item-1">Windows 10</a></h5>
</div>
<div class="collapse item-1" role="tabpanel" data-parent="#accordion-2">
<div class="card-body">
<p class="card-text">i. Connect to any Wi-Fi network.</p>
<p class="card-text">ii. Click on your Wi-Fi icon</p><img src="___.PNG">
<p class="card-text">iii. In the available Wi-Fi network list, underneath the Instaconnect Wi-Fi network, click on Properties. </p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">iv. In the new window, scroll all the way to the bottom. The WiFi MAC address is listed as the Physical (MAC) Address</p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">v. Register this to the resident's account as a Desktop or Laptop.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab">
<h5 class="mb-0"><a data-toggle="collapse" aria-expanded="false" aria-controls="accordion-2 .item-2" href="div#accordion-2 .item-2">Windows XP, Vista, 7, 8</a></h5>
</div>
<div class="collapse item-2" role="tabpanel" data-parent="#accordion-2">
<div class="card-body">
<p class="card-text">i. Click on Windows icon on the Desktop, or click the Windows button on your keyboard.</p>
<p class="card-text">ii. In the search bar, type in "command prompt" or "cmd." </p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">iv. In Command Prompt, type in "ipconfig/all." </p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">v. Scroll down and locate the Wireless LAN Adapter section. </p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">vi. In that section, the Wi-Fi MAC Address is listed as the Physical Address. </p>
<p class="card-text">vii. Register this to the resident's account as a Desktop or Laptop</p>
<p class="card-text"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
If you read bootstrap documentation it tells you to initialize via jquery
$('.collapse').collapse()
This is what are you looking for:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" id="main" href="#collapseOne">
<div class="card">
<div class="card-header">
Computers
</div>
</a>
</h4>
</div>
<div class="card-body">
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" id="1" href="#collapseTwo">
<div class="card">
<div class="card-header">
Windows 10
</div>
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="card">
<div class="card-body">
<p class="card-text">i. Connect to any Wi-Fi network.</p>
<p class="card-text">ii. Click on your Wi-Fi icon</p><img src="___.PNG">
<p class="card-text">iii. In the available Wi-Fi network list, underneath the Instaconnect Wi-Fi network, click on Properties. </p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">iv. In the new window, scroll all the way to the bottom. The WiFi MAC address is listed as the Physical (MAC) Address</p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">v. Register this to the resident's account as a Desktop or Laptop.</p>
</div>
</div></br>
</div></div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" id="2" href="#collapseThree">
<div class="card">
<div class="card-header">
Windows XP, Vista, 7, 8
</div> </div>
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="card">
<div class="card-body"> <p class="card-text">i. Click on Windows icon on the Desktop, or click the Windows button on your keyboard.</p>
<p class="card-text">ii. In the search bar, type in "command prompt" or "cmd." </p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">iv. In Command Prompt, type in "ipconfig/all." </p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">v. Scroll down and locate the Wireless LAN Adapter section. </p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">vi. In that section, the Wi-Fi MAC Address is listed as the Physical Address. </p>
<p class="card-text">vii. Register this to the resident's account as a Desktop or Laptop</p>
<p class="card-text"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Another example outside bootstrap card
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" id="main" href="#collapseOne">
<div class="card">
<div class="card-header">
Computers
</div>
</a>
</h4>
</div>
<div class="card-body">
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" id="1" href="#collapseTwo">
<div class="card">
<div class="card-header">
Windows 10
</div>
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="card-body">
<p class="card-text">i. Connect to any Wi-Fi network.</p>
<p class="card-text">ii. Click on your Wi-Fi icon</p><img src="___.PNG">
<p class="card-text">iii. In the available Wi-Fi network list, underneath the Instaconnect Wi-Fi network, click on Properties. </p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">iv. In the new window, scroll all the way to the bottom. The WiFi MAC address is listed as the Physical (MAC) Address</p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">v. Register this to the resident's account as a Desktop or Laptop.</p>
</div>
</div></div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" id="2" href="#collapseThree">
<div class="card">
<div class="card-header">
Windows XP, Vista, 7, 8
</div> </div>
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="card-body">
<p class="card-text">i. Click on Windows icon on the Desktop, or click the Windows button on your keyboard.</p>
<p class="card-text">ii. In the search bar, type in "command prompt" or "cmd." </p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">iv. In Command Prompt, type in "ipconfig/all." </p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">v. Scroll down and locate the Wireless LAN Adapter section. </p>
<p class="card-text"><img src="___.png"></p>
<p class="card-text">vi. In that section, the Wi-Fi MAC Address is listed as the Physical Address. </p>
<p class="card-text">vii. Register this to the resident's account as a Desktop or Laptop</p>
<p class="card-text"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Live version here:
http://www.bootply.com/7aYZsAKgSy
I have two of these on my page that want them to collapse or expand independent of each other , I do not want one of them to have affect on status of other ones.
So I have something like this:
<div class="container">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#PANEL1">
<span class="glyphicon glyphicon-chevron-down"></span>
PANEL 1
</a>
</h4>
</div>
<div id="PANEL1" class="panel-collapse collapse in">
<div>
THERE IS A FORM HERE THAT IS THE STUFF IN THIS PANEL
</div>
</div>
</div>
</div>
</div>
and then one more under it, very similar copy paste, just the ID of inner DIV is different:
I have two of these on my page that want them to collapse or expand independent of each other , I do not want one of them to have affect on status of other ones.
So I have something like this:
<div class="container">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#PANEL2">
<span class="glyphicon glyphicon-chevron-down"></span>
PANEL 1
</a>
</h4>
</div>
<div id="PANEL2" class="panel-collapse collapse in">
<div>
THERE IS another FORM HERE THAT IS THE STUFF IN THIS PANEL
</div>
</div>
</div>
</div>
</div>
and then my JavaScript that is this:
$('.collapse').on('shown.bs.collapse', function () {
$(this).parent().find(".glyphicon-chevron-up").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
}).on('hidden.bs.collapse', function () {
$(this).parent().find(".glyphicon-chevron-down").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});
So sometimes it works, sometimes it does not. When both of them are open and I first close the second one, it also closes the first one.
Is that what you want?
http://www.bootply.com/MiQbLj7uIA
I just changed the id of the second accordion and its data-parent value.
I have to place my accordion in a <div style="display:none;"> and then div which also have an id tag ( <div id="outerid"> ) because I am popping up my accordion by tooltip.js, where <div id="outerid"> defines the target for tooltip.js.
My tabs
( <a class="accordion-header" data-toggle="collapse" data-parent="#accordion" onmouseover="this.click();" href="#tab2">HOVER ME FOR TAB 2</a> ) works fine out of <div style="display:none;">, even within <div id="outerid">. As soon as i place <div id="outerid"> with in <div style="display:none;"> the following happening.
My accordion shows up beautifully when you hover over outerid's target,
but the tabs in the accordion do not work.
(NOTE: If I have an external target e.g href="http://helloworld.com in that case,the tabs work, but with anchor target e.g href="#tab2", they don't.
Anyone has any idea why is that?
<div style="display:none;">
<div id="outerid">
<div id="accordion">
<div class="accordion-group panel">
<a class="accordion-header" data-toggle="collapse" data-parent="#accordion" onmouseover="this.click();" href="#tab1">
HOVER FOR TAB 1
</a>
<div id="tab1" class="collapse in">
<div class="accordion-body">
<p>HELLO WORLD 1st</p>
</div>
</div>
</div>
<div class="accordion-group panel">
<a class="accordion-header" data-toggle="collapse" data-parent="#accordion" onmouseover="this.click();" href="#tab2">
HOVER ME FOR TAB 2
</a>
<div id="tab2" class="collapse">
<div class="accordion-body">
<p>HELLO WORLD 2nd </p>
</div>
</div>
</div>
<div class="accordion-group panel">
<a class="accordion-header" data-toggle="collapse" data-parent="#accordion" onmouseover="this.click();" href="#tab3">
HOVER ME FOR TAB3
</a>
<div id="tab3" class="collapse">
<div class="accordion-body">
<p>HELLO WORLD 3rd</p>
</div>
</div>
</div>
</div>
</div>
<!---End Accordion---->
</div>
<!--- Outerid end---->
</div><!---End Non Display--->
If I drop first level group "Group #2" element in to sub level group list, it will collapse (close) with parent accordion. How to solve this problem?
jsFiddle Demo
$(document).ready(function() {
//append for all headings indicatoe icon-plus
$('.accordion-heading').prepend('<i class="ui-icon ui-icon-triangle-1-e"></i>');
// Change indicator element for sub-menu
$('.accordion-body').on('show', function(e) {
e.stopPropagation();
$(this).siblings('.accordion-heading').children('.ui-icon').removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s');
});
//Reverse it
$('.accordion-body').on('hide', function(e) {
e.stopPropagation();
$(this).siblings('.accordion-heading').children('.ui-icon').removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
});
//Make tabs sortable
$(".accordion-body > .accordion, .sidebar").sortable({
connectWith: ".accordion",
placeholder: "ui-state-highlight"
});
});
HTML
<nav class="accordion1 accordion sidebar">
<div class="accordion-group">
<div class="accordion-heading">
<a data-toggle="collapse" data-parent=".accordion2" href=".collapse-one">
Group #1 </a>
</div>
<div class="collapse-one accordion-body collapse" style="height: 0px;">
...
<div class="accordion2 accordion">
<div class="accordion-group">
<div class="accordion-heading">
<a data-toggle="collapse" data-parent=".accordion2" href=".collapse-one-one">
Sub-group #1 </a>
</div>
<div class="collapse-one-one accordion-body collapse" style="height: 0px;">
...
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a data-toggle="collapse" data-parent=".accordion2" href=".collapse-one-two">
Sub-group #2 </a>
</div>
<div class="collapse-one-two accordion-body collapse" style="height: 0px;">
...
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a data-toggle="collapse" data-parent=".accordion2" href=".collapse-one-three">
Sub-Group #3 </a>
</div>
<div class="collapse-one-three accordion-body collapse">
...
</div>
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a data-toggle="collapse" data-parent=".accordion1" href=".collapse-two">
Group #2 </a>
</div>
<div class="collapse-two accordion-body collapse" style="height: 0px;">
...
</div>
</div>
The collapsing and expanding events are bound at loading, and affect the same elements after rearranging.
I don't know if twitter-bootstrap can let you override these events and reset the elements, that need to collapse and expand. If not - maybe consider extending their version.
I have two collapsible div A(collapseOne) and B(collapseTwo) that are based on twitter's bootstrap. How to make A is collapsed when B is expanded or vice versa?
My code looks like below,
<div class="shop-details" id="shop-accordion">
<div id="collapseOne" class="shop-brief clearfix collapse hide">
<h2 class="yahei ft30">MyName</h2>
<span class="unfold"><a data-toggle="collapse" data-parent="#shop-accordion" href="#collapseOne"><i class="path-down"></i>Show details</a></span>
</div>
<dl id="collapseTwo" class="shop-ds clearfix collapse in">
<dt>
<img src="images/pt-small.jpg" width="246" height="169">
<div class="shop-ds-txt">
<h2 class="yahei ft30">MyName</h2>
<ul class="shop-ds-ul">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
</ul>
</div>
</dt>
<dd>
<div class="unfold-positon">
<div><span class="unfold"><a data-toggle="collapse" data-parent="#shop-accordion" href="#collapseTwo"><i class="path-up"></i>Show brief</a></span></div>
</div>
</dd>
</dl>
</div>
I want to div collapseOne is hidden and collapseTwo is visible by default. After clicking link Show brief, make collapseTwo hidden and collapseOne is shown.
Just use the sample they provide with the documentation. I've simplified it for you here, make sure all your divs have the same data-parent in order to act as an accordion.
<div class="accordion" id="my-accordion">
<div class="accordion-group">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#my-accordion" href="#collapseOne">
Toggle 1
</a>
<div id="collapseOne" class="accordion-body in" style="height: auto; ">
<div class="accordion-inner">
Inner content 1
</div>
</div>
</div>
<div class="accordion-group">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#my-accordian" href="#collapseTwo">
Toggle 2
</a>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Inner content 2
</div>
</div>
</div>
</div>