Issue with bootstrap accordion not collapsing other open tabs automatically

I'm struggling to incorporate a Bootstrap accordion collapse feature into my project, specifically with the auto-collapsing functionality. In the scenario where there are 3 divs labeled A, B, and C, if A is open and I click on B, A should automatically collapse, yet it doesn't. My goal is to have only one section open at a time.

Despite repeatedly reviewing my code and consulting various tutorials and resources, I am still unable to get it to work. Any assistance provided would be greatly appreciated.

You can view the fiddle here: https://jsfiddle.net/3ap18Lda/1/ 


<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<!-- Accordion -->

<div class="container">
  <div id="accordion" role="tablist" aria-multiselectable="true">


    <div class="row caracteristicas-table">
      <div class="col-sm-12">
        <div role="tab" id="headingOne">

          <h3 class="dark-grey">HERE GOES THE TITLE</h3>

          <span class="orange-line"></span>

           <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum pharetra ligula, non varius diam feugiat dignissim. Cras tellus quam, facilisis eget imperdiet eu, fermentum non justo. </h4>


            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              <i class="down-arrow"><img src="images/down-arrow.svg"></i><h4 class="text-quero-mais">I want to know some more</h4>
            </a>

        </div> <!-- / tab -->   

        <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
          <h4>Mauris vel ante eu tortor vulputate congue eu eget nibh. Suspendisse malesuada vehicula felis, vel sodales diam interdum eu. Etiam eu ante egestas, elementum nulla nec, gravida felis.</h4>
        </div>  <!-- / collaspeOne -->


      </div><!-- / col --> 
    </div> <!-- / row -->



    <div class="row caracteristicas-table">
      <div class="col-sm-12">
        <div role="tab" id="headingTwo">

          <h3 class="dark-grey">HERE GOES THE TITLE</h3>

          <span class="orange-line"></span>

           <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum pharetra ligula, non varius diam feugiat dignissim. Cras tellus quam, facilisis eget imperdiet eu, fermentum non justo.</h4>


            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              <i class="down-arrow"><img src="images/down-arrow.svg"></i><h4 class="text-quero-mais">I want to know some more</h4>
            </a>

        </div> <!-- / tab -->   

        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
          <h4>Mauris vel ante eu tortor vulputate congue eu eget nibh. Suspendisse malesuada vehicula felis, vel sodales diam interdum eu. Etiam eu ante egestas, elementum nulla nec, gravida felis.</h4>
        </div>  <!-- / collaspeTwo -->


      </div><!-- / col -->
    </div> <!-- / row -->




    <div class="row caracteristicas-table">
      <div class="col-sm-12">
        <div role="tab" id="headingThree">

          <h3 class="dark-grey">HERE GOES THE TITLE</h3>

          <span class="orange-line"></span>

           <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum pharetra ligula, non varius diam feugiat dignissim. Cras tellus quam, facilisis eget imperdiet eu, fermentum non justo. </h4>


            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              <i class="down-arrow"><img src="images/down-arrow.svg"></i><h4 class="text-quero-mais">I want to know some more</h4>
            </a>

        </div> <!-- / tab -->   

        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
          <h4>Mauris vel ante eu tortor vulputate congue eu eget nibh. Suspendisse malesuada vehicula felis, vel sodales diam interdum eu. Etiam eu ante egestas, elementum nulla nec, gravida felis.</h4>
        </div>  <!-- / collaspeThree -->


      </div><!-- / col --> 
    </div> <!-- / row -->


  </div> <!-- / accordion -->
</div> <!-- / container -->

Thank you!

csstwitter-bootstrap

Answer №1

Make sure to load both Bootstrap and jQuery for this to function properly.

I have provided links to your fiddle where I added the necessary scripts for it to work.

<script src='jquery.js'/>
<script src='bootstrap.js'/>

Upon understanding the issue:

After spending some time troubleshooting, I discovered the root of the problem:

To fix it, I added the panel class to each div in this fiddle and included the following script:

$('.panel-collapse').on('show.bs.collapse', function (e) {
        $(e.target).closest('.panel').siblings().find('.panel-collapse').collapse('hide');
    });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to adjust the speed of the transitions between animations?

I've been experimenting with ways to increase the time between animations in my cycle. Adjusting the duration of the keyframes animation hasn't yielded the desired effect. span { animation: rotateWordsFirst 15s linear infinite 0s; ...

cssanimation

Utilize open-source tools for website design

Can anyone suggest an open source toolset for WYSIWYG HTML/CSS design? What tools have you found most helpful in your projects? ...

htmlcss

I'm encountering an undefined JavaScript variable, how should I proceed?

$(function(){ //Location was "set". Perform actions. $("#geocodesubmit").click(function(){ var geocoder = new google.maps.Geocoder(); geocoder.geocode( { 'address': address}, function(results, status) { if (status ...

javascriptjqueryhtmlcssgoogle-maps

Ways to position an image in the middle of a Div

I am currently working with PHP and Smarty, attempting to display a slideshow's images in the center of a specific div, but I am encountering difficulties achieving this. Below you will find the code snippet. Can anyone help me figure out what I migh ...

javascriptphpjqueryhtmlcss

Troubleshooting problem with Laravel and Vue integration

I have experience working on a Laravel and Vue.js project. Here is the code snippet for the Laravel view: @extends('layouts/app') @section('content') <div id="app"> </div> @endsection And here is the ...

csslaravelvue.js

Can <option> tags be arranged side by side using CSS?

Here is a form I am working with: <form action="file.php" method="GET"> <input type="hidden" name="page"> <select> <option>Text 1</option> <option>Text 2</option> <option>Text 3 ...

htmlcsshtml-select

Show a picture upon hovering the button

Welcome to my website. My goal: Show an image when a user hovers over the links. I must be making some silly error, but I can't pinpoint it. This is what I've attempted so far: HTML <ul class="nm"> <li><a href="#">Cork& ...

javascriptjquerycss

What is the best way to download a modified canvas with filters using the solutions from stackoverflow?

There have been numerous inquiries regarding how to apply CSS filters to an image, with some solutions that don't utilize CSS filters but still achieve the desired outcome. However, for someone new to JavaScript like myself, these answers can be confu ...

javascripthtmlcsscanvascss-filters

Finding the "img" id using jQuery

Here is the code snippet I am working with: <div id="popupContactIMG_4179" class="xxxx"> <a id="popupContactCloseIMG_4179">x</a> <img alt="" src="../IMG_4179.jpg" id="id1&q ...

jqueryhtmlcssjquery-plugins

Elements on the page are quivering as a result of the CSS animation

When a user clicks anywhere on a div, I have added a ripple effect to give it some interaction. However, there is an issue where the element shakes and becomes blurry when the page is in full screen mode until the ripple effect disappears. Below is the Ja ...

javascriptjqueryhtmlcss

Modify the height of an element in real-time using jQuery

I'm looking to dynamically adjust the height of a div based on another element, but only if that element does not have the class collapsed (which is used in a Bootstrap toggle collapse feature). The initial setup seems to work fine, however, when I i ...

javascriptjqueryhtmlcsstwitter-bootstrap

How can the table header be displayed in a Vue JS application after receiving the server response?

On my Vue.JS web page, I am making an API call using the Http GET method. Currently, the table header is displayed before receiving the API response, which doesn't look good. Can someone help me modify my code so that the table header is only displaye ...

htmlcssvue.jshtml-tablevuejs3

Guide to centering a button on an image using bootstrap 4

I'm having trouble getting three buttons to align vertically in the center of an image using Bootstrap 4. I've tried using position:relative on the image and position:absolute on the buttons, but it's not working as expected. <div class= ...

htmlcsstwitter-bootstrap

How to dynamically assign width to elements in a v-for loop in Vue.JS

I am working with HTML code that looks like this: <div v-for="(s, k) in statistics" v-bind:key="s.id" class="single-stat"> <div class="stats"> { ...

cssvue.jsstyleswidth

Align labels and inputs to the right in the contact form

I'm having trouble aligning labels and inputs in my contact form. They need to be aligned to the right due to the Hebrew language. Here is a link to the fiddle of my code which is not working, you can see that the input boxes are not aligned. I need t ...

csswordpressright-align

Equal spacing title in horizontal menu with Bootstrap design

Is there a way to evenly distribute menu links with varying text lengths in equal width bootstrap columns? Adjusting the column class between col-md-1 and col-md-3 doesn't seem to give accurate spacing. If you want to see, I've set up a fiddle h ...

csstwitter-bootstrap

Achieving precise alignment of div content through Css techniques

body { margin: 0; font-family: Arial, Helvetica, sans-serif; } .topnav { overflow: hidden; background-color: #333; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: ...

htmlcssmedia-queries

How to Align Text and Image Inside a JavaScript-Generated Div

I am attempting to use JavaScript to generate a div with an image on the left and text that can dynamically switch on the right side. What I envision is something like this: [IMAGE] "text" Currently, my attempt has resulted in the text showing ...

javascripthtmlcss

The spread operator seems to be malfunctioning whenever I incorporate tailwindcss into my code

Hi there! I hope you're doing well! I've come across a strange issue in Tailwindcss. When I close the scope of a component and try to use props like ...rest, the className doesn't function as expected. Here's an example: import { Butto ...

cssreactjstypescriptnext.jstailwind-css

Changing the CSS property of a single table cell's innerHTML

I have a question that may seem silly, but I'm going to ask it anyway. Currently, I am iterating through a list of strings that follow the format "1H 20MIN" and adding them to table cells using the innerHTML property like so: for (i = 0; i < list ...

javascripthtmlcss