Strange behavior noticed with Bootstrap accordion

The current behavior of the product specs section is as expected. Clicking on group 1 shows its content, and when clicking on group 2, it minimizes group 1 and displays group 2.

However, the issue arises with the next two categories, Usage and Installation, and Care. They are not functioning properly as part of the accordion feature. When I click on group 1, then on group 2, both expand instead of minimizing group 1 as intended.

<div class="tab-content">
    <!--Product Specs-->
    <hr>
    <h3 style="text-align: left;">Product Specs</h3>
    <div id="home" class="tab-pane fade in active ">
        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

            <!-- Group 1 -->
            <div class="panel panel-info">
                ...
            </div>

            <!-- Group 2 -->
            <div class="panel panel-info">
                ...
            </div>

            <!-- Group 3 -->
            <div class="panel panel-info">
                ...
            </div>

        </div>
    </div>
    <!--END of Product Specs-->

    ...

Is there a way to have group 1 minimized when interacting with groups 2 and three?

JSFiddle Link: JSFiddle Link

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Take a look at this

<div class="tab-content">
                            <!--Product Description-->
                            <hr>
                            <h3 style="text-align: left;">Product Description</h3>
                            <div id="home" class="tab-pane fade in active ">
                                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                                  <div class="panel panel-info">
                                    <div class="panel-heading" role="tab" id="headingOne">
                                      <h4 class="panel-title">
                                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOneDesc" aria-expanded="false" aria-controls="collapseOneDesc">
                                          Collapsible Group Item #1
                                        </a>
                                      </h4>
                                    </div>
                                    <div id="collapseOneDesc" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                                      <div class="panel-body">
                                        Group #1 information
                                      </div>
                                    </div>
                                  </div>
                                  <div class="panel panel-info">
                                    <div class="panel-heading" role="tab" id="headingTwo">
                                      <h4 class="panel-title">
                                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwoDesc" aria-expanded="false" aria-controls="collapseTwoDesc">
                                          Collapsible Group Item #2
                                        </a>
                                      </h4>
                                    </div>
                                    <div id="collapseTwoDesc" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                                      <div class="panel-body">
                                        Group #2 information
                                      </div>
                                    </div>
                                  </div>
                                  <div class="panel panel-info">
                                    <div class="panel-heading" role="tab" id="headingThree">
                                      <h4 class="panel-title">
                                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThreeDesc" aria-expanded="false" aria-controls="collapseThreeDesc">
                                          Collapsible Group Item #3
                                        </a>
                                      </h4>
...
</div>

   <!--END of Installation & Care-->

Answer №2

Each of your panel groups currently share the same identifier

To resolve this issue, consider modifying the id from accordion to accordion1, accordion2, and accordion3 for each respective group

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

Angular 2 can efficiently generate multiple HTTP requests simultaneously from a single HTTP request

Backend API's: url: [ { "name": "ABC", "occupation": "Student", "address_url": "http://www.sample.com/address/person=hgjgjgyyfhg" }, { "name": "ABC1", "occupation": "Carpenter", "address ...

javascriptangularhttprequest

Skrollr immediate pop-up notification

Can anyone help me figure out how to make text appear suddenly and then disappear using skrollr? I've been able to get it to fade in and out, but I want it to just show up without any transition. Here's the code I have so far: <div id="style" ...

javascriptjqueryhtmlcss

Scraping HTML data without <div> tags with Scrapy - how to do it?

After spending hours attempting to extract a specific data set for use with Scrapy in a web scraping project, here is the current python code: bedrooms_info = house_listing.css( '.search-results-listings-list__item-description__charact ...

pythonhtmlweb-scrapingscrapy

Learn how to automatically update data in Vue JS after making a 'POST,' 'DELETE,' or 'PUT' request in Vue JS 2

Whenever I send a 'POST' or 'DELETE' request, the data doesn't update automatically. I have to manually reload the page to see the updated information. Is there an easy way to refresh the data after making any 'POST' / &a ...

javascriptvue.jsvuejs2

VueJS Components experiencing issues with displaying images

Recently, I delved into learning VueJS and successfully created a basic restaurant menu page all within a single file. Excited by my progress, I decided to refactor the project using vue-cli, but hit a snag with the images not displaying properly. The cur ...

javascripthtmlimagevue.jsvue-component

Avoiding the duplication of selected items in a dropdown within a gridview can be achieved effectively by implementing a JavaScript/jQuery

In my gridview, which contains multiple rows, each row has a dropdown (select in HTML). My goal is to prevent the user from selecting the same item from the dropdown list for different rows. For instance, if a user selects "New York": Assigning rooms: U ...

javascriptjqueryasp.net

I am unable to save the data received from the payment API

I've been working on developing an e-commerce system, but I'm facing an issue with the iyzipay payment API. Although I successfully make a request and receive a response from the server, I'm unable to store the data that comes back. Can anyo ...

javascriptnode.jsexpress

Creating aliases for a getter/setter function within a JavaScript class

Is there a way to assign multiple names to the same getter/setter function within a JS class without duplicating the code? Currently, I can achieve this by defining separate functions like: class Example { static #privateVar = 0; static get name() ...

javascriptclass

Verify whether an HTML element lies within another HTML element

Consider this example: <div id="President"> <div id="Congressman"> <div id="Senator"> <div id="Major"></div> </div> </div> </div> Is there a simple way in JavaScript or jQuery to determine ...

javascriptjqueryhtml

Angular click directive

Exploring AngularJS and attempting to modify an example from a tutorial. I want the ng-init value to be equal to the value passed from a script function. How can I achieve this? Here's the code snippet: <html> <body> <h2> ...

javascriptangularjs

Difficulty building due to uppercase import in NPM dependency

While working on my Angular project, I encountered a dependency that uses Upper Camel Case import. from "./CSSToMatrix" export { parse, parseMat, toMat, getDistElementMatrix, caculateMatrixDist, getElementMatrix, createMatrix, } from "./C ...

javascriptnpmbuild

Tips for implementing an if else statement in ReactJS while utilizing the useEffect hook

Below is the code snippet for returning a Plotly graph. I would like to display a message or alternative layout when there is no data available for the graph, such as showing "No data available". How can I achieve this? import React, { useEffect } from ...

javascriptreactjsjsonfrontendplotly.js

The function RegisterClientScriptInclude seems to be malfunctioning inexplicably

I've been struggling for over 2 days trying various solutions and searching online, but I can't seem to get RegisterClientScriptInclude to function properly like everyone else. For starters, I am using .NET 3.5 Ajax and incorporating javascript ...

asp.netjavascriptajaxscriptmanager

Tips for sending an array of input field values through an Ajax request

In my current web form, there is a dynamic option that adds rows with the same attributes. These rows need to be submitted through an Ajax call to my PHP for insertion into the database. Access: <tr> <td><input type"text" name="access[nam ...

javascriptjqueryhtml

Tips on Modifying JSON Objects with JavaScript

In the code I'm working with, there's a generated line that creates an animated sidebar using a div. The width of this sidebar is controlled by the 'v' parameter, currently set to 85. <div id="sidebar" class="inner-element uib_w_5 ...

javascriptjson

"Simply tap on an element that has been dynamically inserted into the

Many individuals are familiar with how to attach a "click" event to an element that is dynamically added using the following syntax: $('#main').on('click','.link',function(){ //some code here }); In this example, .link repr ...

javascriptjquery

Tips for closing process.stdin.on and then reopening it later

I've been facing a challenge with an exercise. In this exercise, the client will input a specific integer x, followed by x other y values separated by spaces. The output should be the sum of each y value, also separated by spaces. For example: Input: ...

javascriptnode.js

Vue-Firebase: A guide to linking multiple Firebase services in a single app

I am facing an issue with connecting to two firebases within the same project. In my project, I have two javascript files that connect to each firebase separately, which seems fine. Here is how I import them: import db from '../FireBase' i ...

javascriptfirebasefirebase-realtime-databasevue.js

Enhancing jqgrid by incorporating cellattr to JSON colmodel

I've been experimenting with adding a custom cellattr function to my colmodel JSON response, but I'm having trouble getting it to work. I've tried applying classes and styles without success, so now I'm attempting to debug by logging so ...

javascriptjsonjqgrid

Selecting a folder path with Angular 6: A step-by-step guide

Currently, I am aiming to extract the folder path string without uploading any files. The goal is simply to capture the path for future use. Below is an example of how you can prompt users to select a file: <input id="folder-input" #folderRef type="fil ...

htmlangular6