i already create the code and the result like this
and i want when i press the other accordion, the right side image will change like this
i already try to create, but what i got is the image stacking and not changing in the same place like this
i use this code, and i need help to fix this problem
<section class="various__sect">
<div class="container">
<div class="row">
<div class="col-6 various__left__group">
<div class="various__title">
Various Kinds of Finances Products
</div>
<div class="various__accordion">
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button id="collapseOne" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
1. We have features that help your finances
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse show" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
With this scan features, it can make transactions faster and safer, of course
<div class="mt-3">
<a href="">Learn More <span class="bi bi-arrow-right-short"></span></a>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button id="collapseTwo" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
2. All kinds of activities regarding finances
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
With this scan features, it can make transactions faster and safer, of course
<div class="mt-3">
<a href="">Learn More <span class="bi bi-arrow-right-short"></span></a>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button id="collapseThree" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
3. Various of needs regarding finance here
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
With this scan features, it can make transactions faster and safer, of course
<div class="mt-3">
<a href="">Learn More <span class="bi bi-arrow-right-short"></span></a>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingFour">
<button id="collapseFour" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseFour" aria-expanded="false" aria-controls="flush-collapseFour">
4. Only here you will get various benefits
</button>
</h2>
<div id="flush-collapseFour" class="accordion-collapse collapse" aria-labelledby="flush-headingFour" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
With this scan features, it can make transactions faster and safer, of course
<div class="mt-3">
<a href="">Learn More <span class="bi bi-arrow-right-short"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="offset-1 col-5">
<div class="collapse show multi-collapse" id="flush-collapseOne">
<div class="img__collapse">
<img src="assets/img/img-various.webp" alt="">
</div>
</div>
<div class="collapse multi-collapse" id="flush-collapseTwo">
<div class="img__collapse">
<img src="assets/img/img-various.webp" alt="">
</div>
</div>
<div class="collapse multi-collapse" id="flush-collapseThree">
<div class="img__collapse">
<img src="assets/img/img-various.webp" alt="">
</div>
</div>
<div class="collapse multi-collapse" id="flush-collapseFour">
<div class="img__collapse">
<img src="assets/img/img-various.webp" alt="">
</div>
</div>
</div>
</div>
</div>
</section>
I’m using bootstrap 5 to create this
2
Answers
You need to remove the any
show
classes from the right hand divs when you apply it to the one you want to show.Using Bootstrap 5, I have created this Accordion with a Tab View Section, Simply, I just combined the "tab" and "accordion" attributes and classes in the html tags.