Issue with the opening and closing functionality of the Bootstrap accordion menu

Check out the bootstrap accordion menu I added to my website here

I'm facing an issue where one toggle stays open when another is clicked. It seems like a CSS problem since I've tried adding extra properties to my HTML without success.

Currently, the CSS property for collapsed toggles is:

.collapse .in { display: block }

<article class="panel-heading" role="tab" data-toggle="collapse" data-parent="#accordion" href="#NewsFive" aria-expanded="true" aria-controls="collapseFive">
<div class="panel-heading-date">
    <span>06/10/2016</span>
</div>
<div class="panel-title panel-news">
        <article>

        </article>
</div>
</article>
<!-- PANEL HEADING ENDS HERE -->
<div id="NewsFive" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingFive">

    <div class="video-wrapper">
                <source src="/assets/videos/the-future-of-retail.mp4" type="video/mp4">
        </video>
    </div>
    <div class="playpause"></div>
</div>
</div><!-- PANEL ENDS HERE -->

If anyone can help spot what might be causing this issue, it would be greatly appreciated.

javascriptjquerycsstwitter-bootstrap

Answer №1

The root cause of this issue stems from a misalignment between the IDs of the Tab heading and tab content.

Please ensure thorough examination of the accordion, and verify that the attributes aria-controls="collapseOne" and aria-labelledby="headingOne" are correctly aligned.

#accordion .panel-heading { padding: 0;}
#accordion .panel-title > a {
display: block;
padding: 0.4em 0.6em;
    outline: none;
    font-weight:bold;
    text-decoration: none;
}
.panel-group {
    position: relative;
}
.panel-heading-date {
    position: absolute;
    width: 110px;
    background-color: #000;
    color: #fff;
    padding: 18px 0;
    text-align: center;
}
.accordio-panel-title {
    margin-left: 120px;
    padding: 20px 0;
    cursor: pointer;
}
.accordio-panel-title .panel-title {
    font-size: 14px;
    border: 0;
}
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<br/>
<div class="container">
    <div class="row">
        <div class="col-md-12" id="main">
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingOne">                  
<div class="panel-heading-date">
10/13/2016
</div>
<div class="accordio-panel-title" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<h4 class="panel-title">Collapsible Group Item #1</h4>
</div>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                  <div class="panel-body">
                  <ul>
                      <li>The titles are block, so you don't have to click the text part to activate it</li>
                      <li>Indicators for expand / collapsing items</li>
                      <li>Removed title links' obnoxious :hover  underlinings, and outlines.</li>
                  </ul>
                </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingTwo">
<div class="panel-heading-date">
10/13/2016
</div>
<div class="accordio-panel-title collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
    <h4 class="panel-title">Collapsible Group Item #2</h4>
</div>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                  <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                  </div>
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingThree">
<div class="panel-heading-date">
10/13/2016
</div>
<div class="accordio-panel-title collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
    <h4 class="panel-title">Collapsible G roup Item #3</h4>
</div>                
                </div>
                <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                  <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                  </div>
                </div>
              </div>
            </div>
        </div>
 </div>
<div>

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

Using an SVG sprite, you can enhance the Bootstrap popover by adding an icon

I am struggling with inserting an SVG icon into a popover. I attempted to do it using the code below, but I seem to be encountering some issues. A similar problem was resolved when adding the svg tag to the "white list" for selectpicker. Can someone please ...

javascriptjquerysvgbootstrap-4popover

Is there a way to incorporate the ::after or ::before pseudo-elements into an image tag?

While working on my project, I attempted to incorporate the ::after tag (I had used ::before as well) for an image within an img tag. However, I am facing difficulties as it doesn't seem to be working. Any advice or guidance would be greatly appreciat ...

javascripthtmlcssimageselector

Trigger an Ajax call to submit data and execute a PHP SQL query upon clicking

I am attempting to create a feature where pressing a button triggers a PHP function without reloading the page. Here is the button I have: <div class= "obutton feature2" data-id="<?php echo $bookID;?>"> <button>Reserve Book</but ...

javascriptphpjqueryajax

What is the best way to remove empty elements from an Array?

Having an issue with my API post request. If no values are entered in the pricing form fields, I want to send an empty array. I attempted to use the filter method to achieve this but it still sends an array with an empty object (i.e. [{}]) when making the ...

javascriptarraysjsonreactjspost

I'm looking to convert this typescript function to return an array with strong typing instead of just a plain string[]

I am currently in the process of converting a JavaScript function to TypeScript. Originally, I believed that the type of the variable hi would be ('s'|'bb')[], but it turned out to be string[]. Is there a way for TypeScript to automatic ...

javascripttypescript

Unsure about the erratic actions of my JavaScript code

My current challenge involves a function that aims to return a global variable as a String object, containing the contents of a local text file. As it stands, this function is returning an empty String. function fetchWords() { var fileRequest = new XM ...

javascripthtml

Is it possible to integrate jQuery and JavaScript together?

Can I combine JavaScript selector document.querySelector with jQuery functions instead of using $ or jQuery selectors? For instance: $.getJSON("list.json", function(data) { document.querySelector("#content").html(data.name); }); When trying to use d ...

javascriptjquery

Utilize tags as properties in Vue.js by selecting them

I am attempting to retrieve a value from a select tag and use it in an object property. Below is the HTML code: <div id="app"> <h3>{{title}}</h3> <div class="form"> <div class="form-group"> <div ...

javascriptvue.js

Having trouble retrieving a response from my Symfony2 controller using AJAX, any suggestions on how to solve this issue?

After implementing a signin form that submits values through ajax successfully, I realized that regardless of whether the values match those in the database or not, I always receive a 200 status response from my controller. This makes it difficult to deter ...

jqueryajaxsymfony

Error message in Vuex4: Unable to access 'state' property because it is undefined

Having trouble with Vue3 and Vuex4, I keep encountering this error: Uncaught TypeError: Cannot read properties of undefined (reading 'state') at ReactiveEffect.eval [as fn] (App.vue?3dfd:36) at ReactiveEffect.run (reactivity.esm-bundler.j ...

javascriptvue.jsvuexvuejs3

HTML/CSS flowchart illustration

Is there a user-friendly method to create a flow or swimline diagram without relying on scripting or tables? Specifically, I'm looking for a way to display different hosts sending packets (with hosts along the X axis, time along the Y axis, and arrows ...

htmlcssdiagram

Shift the position of menu items to the left as the search box expands

When I click on my search box, it expands to the left. However, I want the links next to the search box to also move to the left when the search box expands. This is the code snippet I am currently working with: Example Link <nav class="header-me ...

htmlcssuisearchbarmenuitem

Vue, the versatile filtering tool for data tables in HTML

I am currently using Vue to populate an HTML table with data retrieved from an axios call. The table layout is perfect, but I am interested in finding a way (without converting the entire structure to datatables) to enable filtering on each column header. ...

javascriptvue.js

Is there a way to refresh the countdown timer?

I am working on creating a countdown timer using directives and want to add some CSS styles like fade-out when the time is changing. My issue lies in the HTML binding where the time is not updating visually, although it does change in the console. Here&ap ...

javascripthtmlcss

The data tables on the server side transmit POST data in JSON format

I am attempting to implement server-side processing with data tables: $("#my-table-id").DataTable( { serverSide: true, ajax: { url: '/request/path/', type: 'POST', } }); The current method of sending data as UR ...

javascriptjqueryjsonjquery-pluginsdatatables

Error encountered: Attempting to change the mode of THREE.TransformControls, but THREE.TransformControls is not defined

I've been working with the TransformControls package (you can find it here: https://github.com/lucascassiano/three-transform-controls). While the transform controls appear to be functioning mostly fine, they are causing two major issues in my applicat ...

javascriptthree.js

unable to choose the element

Initially, I successfully selected an element using ng-repeat. However, the developers have now implemented virtual repeat, rendering the following code ineffective. expect(stores.listStores(0).getText()).toContain('Prahran'); expect(element.all ...

javascriptseleniumselenium-webdriverprotector

How can I use express.js to run a function upon receiving an HTTP request?

I am facing a situation where my angular controller triggers an http request upon clicking a button. My node.js server receives this request and responds with YOU HAVE SUCCEEDED! HTTP REQUEST RECEIVED!. The challenge I'm encountering is that the funct ...

javascriptangularjsnode.jsexpress

EaselJS: Enhancing Performance and Aesthetics with Over 200 Vector Shapes

When comparing EaselJS performance with Canvas native methods, I noticed a significant difference: 2.2 s vs 0.01 s (despite EaselJS mapping canvas native methods). I created a canvas application that draws a tree*. For animating the growth of the tree, us ...

javascriptcanvaseaseljs

Issue with Chart JS: Firefox is reporting that the 'Chart' is not defined

As a newcomer to Chart JS, I am currently utilizing it in Angular JS version 1.5.3 with Chart JS version 2.1.4. Below is the code snippet I am working with: var myChart = new Chart(ctx, { type: 'line', data: { labels: dates, datasets: [{ ...

javascriptangularjschart.js