I’m trying to create an accordion affect where I have the controls in one column and the expanded sections in another column. Because they are in a different column I’m trying to use the bootstrap collapse functions instead of the accordion. Right now each one seems to operate separately and when I open one the other doesn’t close…
I’m trying to show only one at a time and have a “active” class on the button of the open one… when the user clicks a different option I want the other to close and open the clicked class and add active to the clicked button.
here is a codepen of what I have so far
html
<section>
<div class="container">
<div class="row">
<div class="col-md-5 col-lg-4">
<button class="collapseTabTheme active" type="button" data-bs-toggle="collapse" data-bs-target="#tabsCollapse1" aria-expanded="true" aria-controls="tabsCollapse1">
Toggle first element
</button>
<button class="collapseTabTheme" type="button" data-bs-toggle="collapse" data-bs-target="#tabsCollapse2" aria-expanded="false" aria-controls="tabsCollapse2">
Toggle 2nd element
</button>
<button class="collapseTabTheme" type="button" data-bs-toggle="collapse" data-bs-target="#tabsCollapse3" aria-expanded="false" aria-controls="tabsCollapse3">
Toggle 3rd element
</button>
</div>
<div class="col-md-7 col-lg-8">
<div class="inner-content">
<div class="collapse show multi-collapse" id="tabsCollapse1">
<div class="card card-body">
first...Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
<div class="collapse multi-collapse" id="tabsCollapse2">
<div class="card card-body">
second...Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
<div class="collapse multi-collapse" id="tabsCollapse3">
<div class="card card-body">
third...Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>
</div>
</div>
</section>
css
.collapseTabTheme{
display: block;
width: 100%;
background-color: #f7f7f7;
border-radius: 1px;
margin-bottom: 10px;
padding: 10px;
text-decoration: none;
border: none;
text-align: left;
}
.collapseTabTheme.active{
background-color: #638b13;
color: #fff;
}
.inner-content{
background-color: #f7f7f7;
width: 100%;
min-height: 600px;
}
.inner-content .card{
background-color: #f7f7f7;
border: none;
}