Hi,
I am not sure it was correctly working on Code pan, But not working on my end. Here I am sharing the source code with a zip folder so that you guys can check the source code. I am also sharing the code here and you don't need to check the CSS code because the Accordion is coming from Bootstrap. The main issue because of ScrollTrigger Plugin. If I remove the ScrollTrigger Plugin, then it works correctly
You can check this video for the references
https://www.loom.com/share/98ed1c7d5c984559a31a8cd6eeae992e
<div class="row">
<div class="col-xxl-12">
<div class="faq__list-6">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button onclick=preventD() class="accordion-button " type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Acc Title
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
data-bs-parent="#accordionExample">
<div class="accordion-body">
<p>Acc Content</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button onclick=preventD() collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Acc Title
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
data-bs-parent="#accordionExample">
<div class="accordion-body">
<p>Acc Content</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- All JS files -->
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/gsap.min.js"></script>
<script src="assets/js/ScrollTrigger.min.js"></script>
<script src="assets/js/ScrollToPlugin.min.js"></script>
<script src="assets/js/ScrollSmoother.min.js"></script>
<script src="assets/js/SplitText.min.js"></script>
This is the HTML code I used following is the Javascript code
<script>
// 20. Register GSAP
gsap.registerPlugin(ScrollTrigger, ScrollSmoother, ScrollToPlugin);
const smoother = ScrollSmoother.create({
smooth: 1.35,
effects: true,
smoothTouch: false,
normalizeScroll: false,
ignoreMobileResize: true,
});
</script>
Please check this video to get the idea about the problem.
I have also shared the source folder here as well.
axtra.zip