I have some page content broken up with nested bootstrap accordions. I am using bootstrap 5.
The parent accordion is split between continents, with each panel then containing another accordion split between countries.
My parent accordion acts as expected - selecting 1 continent will close the previously selected continent. However my nested accordions are not closing previously selected country panels as I would expect.
I believe I am setting the value of data-bs-parent appropriately in all cases. What else might be causing this issue?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.min.js" integrity="sha384-PsUw7Xwds7x08Ew3exXhqzbhuEYmA2xnwc8BuD6SEr+UmEHlX8/MCltYEodzWA4u" crossorigin="anonymous"></script>
<div class="accordion" id="port-accordion">
<div class="accordion-item">
<h2 class="accordion-header" id="accordion-header-one">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-one" aria-expanded="false" aria-controls="collapse-one">
North America
</button>
</h2>
<div id="collapse-one" class="accordion-collapse collapse" aria-labelledby="accordion-header-one" data-bs-parent="#port-accordion" style="">
<div class="accordion-body" data-hotspot="1">
<div class="accordion" id="country-accordion-one">
<div class="accordion-item" id="accordion-item-canada">
<h2 class="accordion-header" id="accordion-header-canada">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-canada" aria-expanded="false" aria-controls="collapse-canada">Canada</button>
</h2>
<div id="collapse-canada" class="accordion-collapse collapse" aria-labelledby="accordion-header-canada" data-bs-parent="#country-accordion-one" style="">
<div class="accordion-body">
<p>Accordion content</p>
</div>
</div>
</div>
<div class="accordion-item" id="accordion-item-mexico">
<h2 class="accordion-header" id="accordion-header-mexico">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-mexico" aria-expanded="false" aria-controls="collapse-mexico">Mexico</button>
</h2>
<div id="collapse-mexico" class="accordion-collapse collapse" aria-labelledby="accordion-header-mexico" data-bs-parent="#country-accordion-one" style="">
<div class="accordion-body">
<p>Accordion content</p>
</div>
</div>
</div>
<div class="accordion-item" id="accordion-item-united-states-of-america">
<h2 class="accordion-header" id="accordion-header-united-states-of-america">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-united-states-of-america" aria-expanded="false" aria-controls="collapse-united-states-of-america">United States Of America</button>
</h2>
<div id="collapse-united-states-of-america" class="accordion-collapse collapse" aria-labelledby="accordion-header-united-states-of-america" data-bs-parent="#country-accordion-one" style="">
<div class="accordion-body">
<p>Accordion content</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="accordion-header-two">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-two" aria-expanded="true" aria-controls="collapse-two">
South America
</button>
</h2>
<div id="collapse-two" class="accordion-collapse collapse show" aria-labelledby="accordion-header-two" data-bs-parent="#port-accordion" style="">
<div class="accordion-body" data-hotspot="2">
<div class="accordion" id="country-accordion-two">
<div class="accordion-item" id="accordion-item-aruba">
<h2 class="accordion-header" id="accordion-header-aruba">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-aruba" aria-expanded="false" aria-controls="collapse-aruba">Aruba</button>
</h2>
<div id="collapse-aruba" class="accordion-collapse collapse" aria-labelledby="accordion-header-aruba" data-bs-parent="#country-accordion-two" style="">
<div class="accordion-body">
<p>Accordion content</p>
</div>
</div>
</div>
<div class="accordion-item" id="accordion-item-curacao">
<h2 class="accordion-header" id="accordion-header-curacao">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-curacao" aria-expanded="true" aria-controls="collapse-curacao">Curacao</button>
</h2>
<div id="collapse-curacao" class="accordion-collapse collapse show" aria-labelledby="accordion-header-curacao" data-bs-parent="#country-accordion-two" style="">
<div class="accordion-body">
<p>Accordion content</p>
</div>
</div>
</div>
<div class="accordion-item" id="accordion-item-trinidad-and-tobago">
<h2 class="accordion-header" id="accordion-header-trinidad-and-tobago">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-trinidad-and-tobago" aria-expanded="true" aria-controls="collapse-trinidad-and-tobago">Trinidad and Tobago</button>
</h2>
<div id="collapse-trinidad-and-tobago" class="accordion-collapse collapse show" aria-labelledby="accordion-header-trinidad-and-tobago" data-bs-parent="#country-accordion-two" style="">
<div class="accordion-body">
<p>Accordion content</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You need to add the following to your angular.json file:
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
Related
While building an accordion I was able to dynamically get accordion items. The problem now is that they all open at the same time. Is it possible to open them one by one based on ID?
This is my code:
<div class="accordion" id="accordionExample">
<div *ngFor="let task of tasks" class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
{{task.name}}
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
{{task.description}}
</div>
</div>
</div>
</div>
I assume the problem is that "collapseOne" is hard-coded but I can't find the solution online.
I haven't experience with accordion. But judging by the code, it seems you need to bind individual IDs to each item. You could try to use the index local variable of the *ngFor directive.
<div class="accordion" id="accordionExample">
<div *ngFor="let task of tasks; let i=index" class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button
class="accordion-button"
type="button"
data-bs-toggle="collapse{{i}}"
data-bs-target="#collapseOne{{i}}"
aria-expanded="true"
aria-controls="collapseOne{{i}}"
>
{{task.name}}
</button>
</h2>
<div
id="collapseOne{{i}}"
class="accordion-collapse collapse show"
aria-labelledby="headingOne"
data-bs-parent="#accordionExample"
>
<div class="accordion-body">
{{task.description}}
</div>
</div>
</div>
</div>
I am trying to swap images based on which accordion link you click. For example if you click the first accordion link it will open up that accordion and change the image above the accordion to the image that's in that section. If you click the next on it will open up the accordion for that link and change it to the image in that section. Can someone help me out or point me in the right direction. Thanks for all your help.
Here is my code:
<img src="link to image I want changed" />
<div id="accordion" style="margin-top: 10px">
<div class="card" style="border-color: #FF9106; border-width: 1px;">
<div class="card-header" style="background-color: #ffffff;"
id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne" >
<h5 class="mb-0">first Link</h5>
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body" style="margin: 10px; background-color:#FDFDFD">
<p><img src="assets/img/station2/Timeline_MTP.svg" /></p>
<ul>
<li><span>....</span></li>
<li><span>....</span></li>
<li><span>....</span></li>
</ul>
</div>
</div>
</div>
<div class="card" style="border-color: #FF9106; border-width: 1px;">
<div class="card-header" style="background-color: #ffffff;" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
2nd Link
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body" style="margin: 10px">
<p><img src="assets/img/station2/Timeline_LTP.svg" /></p>
<ul>
<li><span>....</span></li>
<li><span>....</span></li>
</ul>
</div>
</div>
</div>
<div class="card" style="border-color: #FF9106; border-width: 1px;">
<div class="card-header" style="background-color: #ffffff;" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
3rd Link
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body" style="margin: 10px">
<p><img src="assets/img/station2/Timeline_FULL.svg" /></p>
<ul>
<li><span>....</span></li>
<li><span>....</span></li>
</ul>
</div>
</div>
</div>
</div>
Thanks to someone who pointed me in the right direction and then deleted it (not sure why), I have found a solution. I used javascript to replace the images and added it to the button on the accordion.
<script>
function Showpic1()
{
document.getElementById("image").src = "assets/img/station2/Timeline_MTP.svg";
}
function Showpic2()
{
document.getElementById("image").src = "assets/img/station2/Timeline_LTP.svg";
}
function Showpic3()
{
document.getElementById("image").src = "assets/img/station2/Timeline_FULL.svg";
}
</script>
HTML
Medium-Term Projections (up to 5 years)
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body" style="margin: 10px; background-color:#FDFDFD">
<ul>
<li><span>...</span></li>
</ul>
</div>
</div>
</div>
<div class="card" style="border-color: #FF9106; border-width: 1px;">
<div class="card-header" style="background-color: #ffffff;" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" onclick="Showpic2()">
Long-term macroeconomic projections (beyond 5 years)
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body" style="margin: 10px">
<ul>
<li><span>...</span></li>
</ul>
</div>
</div>
</div>
<div class="card" style="border-color: #FF9106; border-width: 1px;">
<div class="card-header" style="background-color: #ffffff;" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" onclick="Showpic3()">
Long-term growth projections (beyond 5 years) need to consider the stage of development.
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body" style="margin: 10px">
<ul>
<li><span>...</span></li>
</ul>
</div>
</div>
</div>
</div>
I'm trying to figure out why my bootstrap accordions won't collapse when another has been opened. I coded it two separate way based on other stackoverflow examples I've seen, as well as bootstrap's docs and I still can't figure out why it's not functioning properly. Bootstrap JS is 3.3.7
The idea is that despite whatever <a class="button collapsed"> is clicked, only that content is displayed, the rest should hide.
Example 1 uses separate panel groups
js fiddle DEMO
<div data-quickedit-entity-id="paragraph/84" class="panel-group" id="accordion-84" role="tablist" aria-multiselectable="true" data-quickedit-entity-instance-id="0">
<div class="panel panel-default consortia">
<div class="panel-heading" role="tab" id="heading-abc">
<div class="row panel-title">
<div class="col-sm-12 col-offset-130">
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-84" href="#abc-1" aria-expanded="false" aria-controls="abc-1">btn1
</a>
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-84" href="#abc-2" aria-expanded="false" aria-controls="abc-2">btn2
</a>
</div>
</div>
</div>
<div id="abc-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-abc" style="height: 1px;" aria-expanded="false">
<div class="panel-body">
test2
</div>
</div>
<div id="abc-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-abc" style="height: 1px;" aria-expanded="false">
<div class="panel-body">
test3
</div>
</div>
</div>
</div>
<div data-quickedit-entity-id="paragraph/87" class="panel-group" id="accordion-87" role="tablist" aria-multiselectable="true" data-quickedit-entity-instance-id="0">
<div class="panel panel-default consortia">
<div class="panel-heading" role="tab" id="heading-def">
<div class="row panel-title">
<div class="col-sm-12 col-offset-130">
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-87" href="#def-1" aria-expanded="false" aria-controls="def-1">btn1
</a>
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-87" href="#def-2" aria-expanded="false" aria-controls="def-2">btn2
</a>
</div>
</div>
</div>
<div id="def-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-def">
<div class="panel-body">
test
</div>
</div>
<div id="def-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-def">
<div class="panel-body">
test2
</div>
</div>
</div>
</div>
Example 2 uses the same panel-group
js fiddle DEMO
<div data-quickedit-entity-id="paragraph/90" class="panel-group" id="accordion-90" role="tablist" aria-multiselectable="true" data-quickedit-entity-instance-id="0">
<div class="panel panel-default consortia">
<div class="panel-heading" role="tab" id="heading-tes">
<div class="row panel-title">
<div class="col-sm-12 col-offset-130">
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-90" href="#tes-1" aria-expanded="false" aria-controls="tes-1">btn1
</a>
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-90" href="#tes-2" aria-expanded="false" aria-controls="tes-2">btn2
</a>
</div>
</div>
</div>
<div id="tes-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-tes" style="height: 1px;" aria-expanded="false">
<div class="panel-body">
<p>test1</p>
</div>
</div>
<div id="tes-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-tes" style="height: 1px;" aria-expanded="false">
<div class="panel-body">
<p>test2</p>
</div>
</div>
</div>
<div class="panel panel-default consortia">
<div class="panel-heading" role="tab" id="heading-test2">
<div class="row panel-title">
<div class="col-sm-12 col-offset-130">
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-90" href="#test2-1" aria-expanded="false" aria-controls="test2-1">btn1
</a>
<a class="button collapsed" data-toggle="collapse" data-parent="accordion-90" href="#test2-2" aria-expanded="false" aria-controls="test2-2">btn2
</a>
</div>
</div>
</div>
<div id="test2-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-test2" aria-expanded="false">
<div class="panel-body">
<p>test21</p>
</div>
</div>
<div id="test2-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-test2" aria-expanded="false">
<div class="panel-body">
<p>test23</p>
</div>
</div>
</div>
</div>
The code below should work as you would expect.
I think the reason it wasn't working before is because you didn't have the id selector in the "data-parent" attribute.
<div data-quickedit-entity-id="paragraph/90" class="panel-group" id="accordion-90" role="tablist" aria-multiselectable="true" data-quickedit-entity-instance-id="0">
<div class="panel panel-default consortia">
<div class="panel-heading" role="tab" id="heading-tes">
<div class="row panel-title">
<div class="col-sm-12 col-offset-130">
<a class="button collapsed" data-toggle="collapse" data-parent="#accordion-90" href="#tes-1" aria-expanded="false" aria-controls="tes-1">btn1
</a>
<a class="button collapsed" data-toggle="collapse" data-parent="#accordion-90" href="#tes-2" aria-expanded="false" aria-controls="tes-2">btn2
</a>
</div>
</div>
</div>
<div id="tes-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-tes" style="height: 1px;" aria-expanded="false">
<div class="panel-body">
<p>test1</p>
</div>
</div>
<div id="tes-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-tes" style="height: 1px;" aria-expanded="false">
<div class="panel-body">
<p>test2</p>
</div>
</div>
</div>
<div class="panel panel-default consortia">
<div class="panel-heading" role="tab" id="heading-test2">
<div class="row panel-title">
<div class="col-sm-12 col-offset-130">
<a class="button collapsed" data-toggle="collapse" data-parent="#accordion-90" href="#test2-1" aria-expanded="false" aria-controls="test2-1">btn1
</a>
<a class="button collapsed" data-toggle="collapse" data-parent="#accordion-90" href="#test2-2" aria-expanded="false" aria-controls="test2-2">btn2
</a>
</div>
</div>
</div>
<div id="test2-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-test2" aria-expanded="false">
<div class="panel-body">
<p>test21</p>
</div>
</div>
<div id="test2-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-test2" aria-expanded="false">
<div class="panel-body">
<p>test23</p>
</div>
</div>
</div>
</div>
I published the still not finished website just to show you what I want
In this website:
http://urbanphenomena.net/shukri/#page3
the iFrame is redirecting to different images in different pages when the user clicks a specific link. Here is the code if needed:
<!--- Projects Section --->
<div class="section projects-section container-fluid" id="section4">
<div class="row">
<div class="col-lg-2 pull-left">
<div class="panel-group" id="accordion">
<div class="panel">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Architecture</a>
</h4>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<!--- FAF --->
<div>
<a class="collapsed" data-toggle="collapse" href="#collapseOne">
<h5>FAF</h5>
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<ol>
<button type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/1.html')">A01-FAF-1</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/2.html')">A01-FAF-2</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/3.html')">A01-FAF-3</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/4.html')">A01-FAF-4</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/5.html')">A01-FAF-5</button><br>
</ol>
</div>
<!--- KSAF --->
<div>
<a class="collapsed" data-toggle="collapse" href="#collapseTwo">
<h5>KSAF</h5>
</a>
</div>
<div id="collapseTwo" class="collapse">
<ol>
<button type="button" onclick="setURL('imgs/projects/ARCH/A02-KSAF/1.html')">A02-KSAF-1</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A02-KSAF/2.html')">A02-KSAF-2</button><br>
</ol>
</div>
<!--- KSAF10V --->
<div>
<a class="collapsed" data-toggle="collapse" href="#collapseThree">
<h5>KSAF10V</h5>
</a>
</div>
<div id="collapseThree" class="collapse">
<ol>
<button type="button" onclick="setURL('imgs/projects/ARCH/A03-KSAF10V/1.html')">A03-KSAF10V-1</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A03-KSAF10V/2.html')">A03-KSAF10V-2</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A03-KSAF10V/3.html')">A03-KSAF10V-3</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A03-KSAF10V/4.html')">A03-KSAF10V-4</button><br>
</ol>
</div>
<!--- Makkah --->
<div>
<a class="collapsed" data-toggle="collapse" href="#collapseFour">
<h5>Makkah</h5>
</a>
</div>
<div id="collapseFour" class="collapse">
<ol>
<button type="button" onclick="setURL('imgs/projects/ARCH/A04-Makkah/1.html')">A03-Makkah-1</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A04-Makkah/2.html')">A03-Makkah-2</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A04-Makkah/3.html')">A03-Makkah-3</button><br>
</ol>
</div>
<!--- Marina --->
<div>
<a class="collapsed" data-toggle="collapse" href="#collapseFive">
<h5>Marina</h5>
</a>
</div>
<div id="collapseFive" class="collapse">
<ol>
<button type="button" onclick="setURL('imgs/projects/ARCH/A05-Marina/1.html')">A05-Marina-1</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A05-Marina/2.html')">A05-Marina-2</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A05-Marina/3.html')">A05-Marina-3</button><br>
</ol>
</div>
<!--- Residential --->
<div>
<a class="collapsed" data-toggle="collapse" href="#collapseSix">
<h5>Residential</h5>
</a>
</div>
<div id="collapseSix" class="collapse">
<ol>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/1.html')">A06-Residential-1</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/2.html')">A06-Residential-2</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/3.html')">A06-Residential-3</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/4.html')">A06-Residential-4</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/5.html')">A06-Residential-5</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/6.html')">A06-Residential-6</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/7.html')">A06-Residential-7</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/8.html')">A06-Residential-8</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/9.html')">A06-Residential-9</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/10.html')">A06-Residential-10</button><br>
</ol>
</div>
<!--- SAB4 --->
<div>
<a class="collapsed" data-toggle="collapse" href="#collapseSeven">
<h5>SAB4</h5>
</a>
</div>
<div id="collapseSeven" class="collapse">
<ol>
buttona type="button" onclick="setURL('imgs/projects/ARCH/A07-SAB4/1.html')">A07-SAB4-1</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A07-SAB4/2.html')">A07-SAB4-2</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A07-SAB4/3.html')">A07-SAB4-3</button><br>
<button type="button" onclick="setURL('imgs/projects/ARCH/A07-SAB4/4.html')">A07-SAB4-4</button><br>
</ol>
</div>
</div>
</div>
</div>
<div class="panel">
<h4>
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Interior</a>
</h4>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<div id="collapse2" class="collapse in" aria-labelledby="heading2">
<ol>
<button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/1.html')">I01-Interior-1</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/2.html')">I01-Interior-2</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/3.html')">I01-Interior-3</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/4.html')">I01-Interior-4</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/5.html')">I01-Interior-5</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/6.html')">I01-Interior-6</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/7.html')">I01-Interior-7</button><br>
</ol>
</div>
<!--- SFS --->
<div>
<a class="collapsed" data-toggle="collapse" href="#collapseOneInt">
<h5>SFS</h5>
</a>
</div>
<div id="collapseOneInt" class="collapse">
<ol>
<button type="button" onclick="setURL('imgs/projects/INT/I02-SFS/1.html')">I02-SFS-1</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I02-SFS/2.html')">I02-SFS-2</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I02-SFS/3.html')">I02-SFS-3</button><br>
<button type="button" onclick="setURL('imgs/projects/INT/I02-SFS/4.html')">I02-SFS-4</button><br>
</ol>
</div>
</div>
</div>
</div>
<div class="panel">
<h4>
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Fabrication</a>
</h4>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<div id="collapse3">
<ol>
<button type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/1.html')">F01-Fabrication-1</button><br>
<button type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/2.html')">F01-Fabrication-2</button><br>
<button type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/3.html')">F01-Fabrication-3</button><br>
<a type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/4.html')">F01-Fbuttonbrication-4</button><br>
<button type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/5.html')">F01-Fabrication-5</button><br>
</ol>
</div>
</div>
</div>
</div>
</div>
</div>
<!--- iFrame --->
<div class="col-lg-7
col-md-7
col-sm-12
col-xs-12 pull-right
col-lg-pull-3 img-container
col-md-pull-3">
<iframe id="iframe" src="imgs/projects/ARCH/A01-FAF/1.html" allowfullscreen></iframe>
</div>
<script>
function setURL(url) {
document.getElementById('iframe').src = url;
}
</script>
</div>
</div>
Is there an more accurate way to do this than iframe?
and the thing I need help with mostly is:
When I reload the page, I want one of the buttons to be highlighted after the reload.
Like the class .active in bootstrap, when you first reload the page, the <li> is already highlighted without clicking it, thats what I want for the first button which is "A01-FAF-1". But the class active doesn't work.
How to do it?
Here is a very simple example:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript">
</script>
<script type="text/javascript">
function showHer(){
$("#TestDiv").html("Something");
}
</script>
</head>
<body>
<div id="TestDiv" style="width:100px;height:100px;border:1px solid black">
Changeable stuff here.
</div>
<div onclick="showHer()" style="background:silver;border:1px solid black;cursor:pointer;display:inline;">
click me
</div>
</body>
</html>
You can see, in one line, I was able to change the content of a DIV elsewhere on the page.
Also note that there are no buttons. You can do this with a button, image, link, pretty much anything.
One other thing to note is that since you're using jquery to replace content in one small area of the page, the entire page doesn't need to update (faster) and hitting BACK doesn't just go back to the previous image, it would go back to the previous page.
So what I am looking at is:
When you click the header of the collapsable object, then nothing should happen
While $("#collapseOne").collapse('toggle'); or $("#collapseTwo").collapse('toggle'); should succeed
The Collabsable object:
<div class="accordion" id="accordion2">
<div class="accordion-group mzti-transparent-border" id="id-group-1">
<div id="id-header-1" class="accordion-heading mzti-bg-image-1">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
</div>
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
</div>
</div>
</div>
<div class="accordion-group hide mzti-transparent-border mzti-height" id="id-group-2">
<div id="id-header-2" class="accordion-heading width-100 mzti-bg-image-2 margin-top-22px ">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
</div>
</div>
</div>
</div>
Remove the data-toggle="collapse" on the <a class="accordion-toggle"... elements