Creating collapsible items in Bootstrap

When using the standard bootstrap collapse tool, I encountered an issue:

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac nibh ut nisi tincidunt ultricies eget vitae tortor.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac nibh ut nisi tincidunt ultricies eget vitae tortor.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac nibh ut nisi tincidunt ultricies eget vitae tortor.
      </div>
    </div>
  </div>
</div>

I need more than 3 collapse items, but when I add another set of the same 3 collapse items, they all open and close simultaneously. How can this be fixed so that each item operates independently without affecting the others?

Thank you for your assistance!

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Ensure that each div you wish to collapse has a unique ID, and that the data-target attribute of the corresponding button matches the ID of the div.

For example:

<button data-target="#collapseTwo"> 
<div id="collapseTwo">

<button data-target="#collapseThree"> 
<div id="collapseThree">

<button data-target="#collapseFour"> 
<div id="collapseFour">

Repeat this pattern for each div/button pair. I trust this explanation was beneficial.

Answer №2

Ensure you generate new IDs for these elements every time you copy and paste. :)

Please review my notes on this code.

newBtnId needs to be consistent in 2 places. Take a careful look at the code!

enter code here
  <div class="card">
    <div class="card-header" id="newHeading">
    <!-- newHeading is a new id  -->
     <h2 class="mb-0">
    <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#NewBtnId" aria-expanded="false" aria-controls="collapseThree">
    <!-- newBtnId is a new id  -->
      Collapsible Group Item #4
    </button>
  </h2>
</div>
<div id="newBtnId" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
  <!-- newBtnId is a new id  -->
  <div class="card-body">
   
  </div>
</div>


<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>




<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit...
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem...
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur... 
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header" id="newHeading">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#newBtnId " aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #4
        </button>
      </h2>
    </div>
    <div id="newBtnId" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat... 
      </div>
    </div>
  </div>
</div>

Answer №3

For it to function independently, you need to modify the "id", "data-target", and "aria-controls" attributes to be unique.
I have already made these changes, simply copy this code snippet to add three more collapsible items...

   <div class="accordion" id="uniqueAccordionExample">
    <div class="card">
        <div class="card-header" id="headingOne">
            <h2 class="mb-0">
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#uniqueCollapseFour"
                    aria-expanded="true" aria-controls="uniqueCollapseFour">
                    Collapsible Group Item #1
                </button>
            </h2>
        </div>

        <div id="uniqueCollapseFour" class="collapse show" aria-labelledby="headingOne" data-parent="#uniqueAccordionExample">
            <div class="card-body">
                Sample text here...
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="headingTwo">
            <h2 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#uniqueCollapseFive"
                    aria-expanded="false" aria-controls="uniqueCollapseFive">
                    Collapsible Group Item #2
                </button>
            </h2>
        </div>
        <div id="uniqueCollapseFive" class="collapse" aria-labelledby="headingTwo" data-parent="#uniqueAccordionExample">
            <div class="card-body">
                Sample text here...
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="headingThree">
            <h2 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#uniqueCollapseSix"
                    aria-expanded="false" aria-controls="uniqueCollapseSix">
                    Collapsible Group Item #3
                </button>
            </h2>
        </div>
        <div id="uniqueCollapseSix" class="collapse" aria-labelledby="headingThree" data-parent="#uniqueAccordionExample">
            <div class="card-body">
                Sample text here...
            </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

Can media queries styles be applied to a window of random size using JavaScript?

Can JavaScript be used to apply media queries style based on random window sizes? I have 5 buttons that I want to switch styles for using JavaScript according to the media queries defined in my CSS stylesheet. Is there a method to achieve this? ...

javascripthtmlcssmedia-queries

What could be causing my Next.js layout to re-render?

I currently have a basic root layout set up in Nextjs (app router) that displays a navigation bar and the child components underneath it. ROOT LAYOUT import "./globals.css"; import type { Metadata } from "next"; import { Inter } from & ...

htmlcssreactjsnext.js

CSS Grid having trouble with wrapping elements

Greetings to all, As a newcomer to the world of web development, I am currently exploring the wonders of the CSS grid tool. However, I have encountered a roadblock: My intention is for the cards to automatically flow one by one into the next row while ma ...

htmlcsslayoutcss-grid

Generate Material UI sidebar components that are positioned above all other components

I am currently working on a sidebar component using the Material UI Drawer component. I am looking to add components that align side by side with the sidebar, similar to the green box shown in the image below. https://i.sstatic.net/aAtn6.png After attem ...

javascriptcssreactjsmaterial-ui

Capture video frames from a webcam using HTML and implement them in OPENCV with Python

While many may find it simple, I am facing a challenge in extracting video frames from HTML or JavaScript and utilizing them in my Python OPENCV project. I have a strong background in Python OPENCV and Deeplearning, but lack knowledge in HTML and JavaScr ...

javascriptpythonpython-3.xhtmlopencv

Adding padding to the top causes the scrollbar to hide at the bottom in Firefox

My HTML page includes the following configured DIV: <div id="contentDiv" style="padding-top: 20px; padding-left: 20px; overflow: auto; height: 100%;" > The content within this DIV is large enough to require a vertical scrollbar. When viewed in IE, ...

cssfirefoxscrollbarpadding

What is the best way to align text in the middle of a div using Foundation framework?

It seems like I may be either overanalyzing this or overlooking a small detail. The task at hand is to align text in the center within a div using Foundation. Here is the current code that I am working with: [1]<div class="row"> [2] <div class ...

htmlcsszurb-foundationcenteringtext-align

Tips for setting up an automated system to check feeds

While I have experience parsing and setting up databases in PHP, I am now faced with the challenge of constantly monitoring an XML feed for a specific string within one of the tags. Each time this string is detected, I need to add the entire XML item (incl ...

phphtmlxmlparsingfeed

:host background color may be missing, but the font size has been boosted?

Check out this demo where the CSS is applied to the :host element or <hello>. The font size increases but the background color remains unchanged. What do you think? styles: [` :host { font-size: 2rem; background-color: yellow; }`] }) ...

javascriptcssangulartypescript

Issues with the aligning of buttons using the justify-content property

The issue I'm facing involves a parent container with 3 buttons nested inside. The parent container is set to display:inline-flex, however, the justify-content: space-between property is not behaving as expected. Each button has a defined max-width in ...

htmlcssangularsassflexbox

What steps can I take to stop search engines from crawling and indexing one specific page on my website?

I'm looking for a way to prevent search engines from indexing my imprint page. Is there a method to achieve this? ...

htmlseo

Can we expect to receive multiple returns?

I have a piece of code and I am looking to add 2 returns to it. What is the correct way to achieve this in PHP? function two_tables($atts, $content = null) { return '<div id="table1"><table class="table table-bordered">'.$co ...

phphtmlreturn

Is there a way to conceal a div element if the user is not logged in?

I have been enlisted to assist my friend with a project involving his website. Within the site, there is a checkbox that prompts the display of a div when selected. I believe it would be more effective for this checkbox to only be visible to users who are ...

javascriptphphtml

Navigating through the Jquery DOM to access a specific node

Displayed here are a list of products, presented within an unordered list: Users can express interest in specific items by clicking "I am Interested," prompting a change in background color and the appearance of a tick mark next to the selected item. To ...

javascriptjqueryhtml

Is there a way to align a column with text and input to the right?

Currently, I am in the process of upgrading a project from Bootstrap 3 to Bootstrap 5. One challenge I am facing is aligning text and input within columns to the right side. Unfortunately, I haven't been able to figure out the correct approach in Boot ...

twitter-bootstraptwitter-bootstrap-3bootstrap-5

Maintaining a sticky footer that remains visible throughout the content as the screen is resized

For more information, please visit my website at I attempted to implement a "sticky footer" technique following the steps outlined in this tutorial (http://ryanfait.com/sticky-footer/) Unfortunately, the sticky footer does not function properly when resi ...

htmlcss

The PHP code is experiencing issues on the enquiry/callback form, but it is functioning correctly on the contact form

I'm having trouble understanding why I am only getting the telephone number and missing the name and email fields when submitting a form. I have tried making changes, but I can't get all three fields to work properly. <aside clas ...

phphtml

`Modifying CSS in Bootstrap 4 for a personalized website design`

I am currently building a Bootstrap website for my sister, but I am facing issues with changing the CSS. Most of the time, the changes do not seem to take effect. I created a new file called "style.css" to override the Bootstrap styles and placed it below ...

cssbootstrap-4

Combining HTML, CSS, and ASP.NET is a

<table cellspacing="0" cellpadding="0" width="100%" style="background-image: url('/ProjectSample/images/LoginBox.png'); background-repeat: no-repeat;"> Is there something incorrect with the way this style tag is referencing an image with ...

htmlcss

When resizing the window, divs shift positions and prevent the use of the horizontal scrollbar

I'm encountering an issue with my website layout. Specifically, I have a full-width navbar with some divs nested within it. However, when the page is resized, the position of these divs in the navbar shifts and a scrollbar appears at the bottom of the ...

csshtmlscrollbaroverflow