Explanation on how to effectively nest Bootstrap's collapse feature

Can you help me troubleshoot an issue with creating a nested bootstrap collapse? The main collapse with id="ss11" is working properly when the button is clicked, but the nested collapses are not functioning. Can you point out what may have gone wrong and how I can fix it to make all nested collapses work as intended? Here is the relevant HTML code: 

<div class="card-body">
                            <div>
                                <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss11" aria-expanded="false" aria-controls="ss11">
                                            ss1 : science
                                 </button>       
                            </div>

                            <div class="collapse" id="ss11">

                                    <div class="card card-body">
                                        <div>
                                        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12013/20141" aria-expanded="false" aria-controls="ss12013/20141">
                                                                2013/20141
                                         </button>

                                        </div>

                                         <div class = "collapse" id = "ss12013/20141">
                                                <p>hello lindsay lowhay</p>
                                        </div>


                                        <div>
                                        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12014/20151" aria-expanded="false" aria-controls="ss12014/20151">
                                                                2014/20151
                                                </button>   
                                        </div>

                                         <div class = "collapse" id = "ss12014/20151">
                                                <p>hello lindsay lowhay</p>
                                        </div>

                                    </div>
                            </div>

                            <div>
                                <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12" aria-expanded="false" aria-controls="ss12">
                                            ss1 : art
                                 </button>

                            </div>

                            <div class="collapse" id="ss12">
                                    <div class="card card-body">

                                        <div>
                                        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12013/20142" aria-expanded="false" aria-controls="ss12013/20142">
                                                                2013/20142
                                                </button>   
                                        </div>

                                         <div class = "collapse" id = "ss12013/20142">
                                                <p>hello lindsay lowhay</p>
                                        </div>

                                        <div>
                                        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12014/20152" aria-expanded="false" aria-controls="ss12014/20152">
                                                                2014/20152
                                                </button>   
                                        </div>

                                         <div class = "collapse" id = "ss12014/20152">
                                                <p>hello lindsay lowhay</p>
                                        </div>

                                    </div>
                            </div>

            </div>
csstwitter-bootstrapbootstrap-4

Answer №1

Special characters like "/" cannot be used in the name/ID; you should consider using either

  • a hyphen "-"
  • an underscore "_"

to achieve the desired functionality...

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>


<div class="card-body">
  <div>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss11" aria-expanded="false" aria-controls="ss11">
                                            ss1 : science
                                 </button>
  </div>
  <div class="collapse" id="ss11">
    <div class="card card-body">
      <div>
        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12013_20141" aria-expanded="false" aria-controls="ss12013_20141">
                                                                2013/20141
                                         </button>

      </div>
      <div class="collapse" id="ss12013_20141">
        <p>hello lindsay lowhay</p>
      </div>
      <div>
        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12014-20151" aria-expanded="false" aria-controls="ss12014-20151">
                                                                2014/20151
                                                </button>
      </div>
      <div class="collapse" id="ss12014-20151">
        <p>hello lindsay lowhay</p>
      </div>
    </div>
  </div>
  <div>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12" aria-expanded="false" aria-controls="ss12">
                                            ss1 : art
                                 </button>
  </div>

  <div class="collapse" id="ss12">
    <div class="card card-body">
      <div>
        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12013-20142" aria-expanded="false" aria-controls="ss12013-20142">
                                                                2013/20142
                                                </button>
      </div>
      <div class="collapse" id="ss12013-20142">
        <p>hello lindsay lowhay</p>
      </div>
      <div>
        <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12014_20152" aria-expanded="false" aria-controls="ss12014_20152">
                                                                2014/20152
                                                </button>
      </div>
      <div class="collapse" id="ss12014_20152">
        <p>hello lindsay lowhay</p>
      </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

Elements that are bound dynamically do not adhere to CSS rules

I have been utilizing ajax to dynamically populate a menu on my website. However, I am facing an unexpected issue where the dynamically generated elements are not adhering to the CSS rules, even though they have the correct class name assigned to them. Thi ...

phpjquerycssajaxdynamically-generated

How can you animate a MUI v4 Grid element using CSS transitions?

I was exploring the potential of using breakpoints in the MUI v4 component to control the visibility of items in my Grid System. How can I create a smooth CSS transition for b, transitioning from 0px to a defined breakpoint size of 3 for xl? Using % works ...

javascriptcssreactjsmaterial-ui

Personalized HTML selection list

When a select option is too long, it stretches the container to accommodate its length. I have created a truncate function to limit the display to 20 characters and add ellipses to prevent this stretching. I have been searching for a way to show the entir ...

javascriptjquerycss

What is preventing X-editable from initiating an AJAX request to transmit the edited information?

Embedding the x-editable: Including in the HTML: <a class='doc_title editable' id='doc_title_12345' data-name="doc[title]" data-title="Enter doc title" data-type="text" data-url='/docs/12345' href='#doc_title_12345&a ...

ajaxtwitter-bootstrapwysiwygx-editable

Distinguishing between fonts on a website and Invsion (a tool utilized by designers and front end developers)

I am having difficulty achieving the exact look of our website font as intended by the designer. We have utilized Google's 'Source Sans Pro' font file. I have attempted various strategies: Using the font directly from Google [ Downloading ...

cssfontsfrontendwebfontsweb-frontend

Tips for activating hover effect on child components by hovering over the parent container?

At the moment, I am tackling an issue with CSS in a nextJS web application. The problem lies in a parent div element that contains multiple child elements. My goal is for hovering over the parent div to trigger changes on the child elements as well. Here& ...

csswebnext.jshover

implementing a collapsible sidebar menu with CSS tables

I am working on a layout with three columns created using css tables to perfectly fit the browser window. The first column serves as a menu and I want it to hide or move to the left when clicked, allowing the middle column to expand into its space. However ...

javascriptjquerycss

Transition effects applied to images with transparency using CSS

My collection includes three transparent PNG images: https://i.sstatic.net/80Jxj.png https://i.sstatic.net/Eewcq.png https://i.sstatic.net/VXk7A.png I have arranged them using the following HTML/CSS: <div style="position: relative; left: 0; top: 0; ...

javascriptjqueryhtmlcss

Maintain the state of various panels on page load with the Bootstrap Accordion feature

I have implemented a Bootstrap accordion on my form page which allows users to open multiple panels simultaneously. Upon submitting the form, I want to preserve the state of any open Bootstrap accordion panels. To achieve this, I utilized code from stack ...

javascriptjqueryjsontwitter-bootstrapaccordion

How come the cubic bezier timing function works flawlessly just on the first try when staggered transitioning element opacity over time with CSS and a touch of JS?

I'm currently working on a menu overlay that expands to fill the screen when a user clicks a button in the corner. I'd like the menu items to fade in one by one, similar to the effect used on this website: Most of the functionality is there, but ...

htmlcsscss-transitionsopacitycubic-bezier

Struggling to add a line break in my code

class Test extends React.Component{ state={name: "John", numTimes: 2}; render() { let output = "" for (let i = 1; i <= this.state.numTimes; i++) { let evenOdd = i % 2 if (evenOdd === 0) { output += i + ". Hello " + this.state.name + ...

javascripthtmlcssreactjsjsx

Issue with jQuery Quicksand's CSS rendering in Internet Explorer and Firefox browsers, but not affecting Chrome

I'm attempting to achieve an icon-swapping effect using jQuery+quicksand. Although it works seamlessly in Chrome, I am encountering issues with IE and Firefox. Given that the more intricate quicksand demos function flawlessly across all browsers, I su ...

jquerycssquicksand

Tips for uncovering a concealed div within an iframe?

It's as if there's a mystery surrounding how to reach this elusive div... div#someId iframe html>head>body div.wrapper div.footer Naturally, my strategy: #someId iframe body .footer is proving to be ineffective. ...

csscss-selectors

Steps to customize the error icon in Material-UI Stepper

I am faced with the task of changing the error icon of a default MUI Stepper, which currently looks like this: https://i.stack.imgur.com/jZlOn.png However, I need it to display the following icon instead: https://i.stack.imgur.com/uTGSw.png Although I am ...

cssreactjsmaterial-uistepper

A step-by-step guide to customizing the Material UI Chips delete SVG icon to appear in white color through

Using a Material UI component, I added a custom class to my chip. Attached is a screenshot showing what I mean. Currently, I am attempting to change the color of the cross button to white. After inspecting the element, I discovered that it is an SVG ico ...

htmlcssreactjstypescriptmaterial-ui

Animating a character's movement along a bezier curve using HTML5 canvas

Brand new to canvas and animations. What's the reason this (Fiddle) won't work with a sprite while this other one (Fiddle) works seamlessly with a rectangle fill? What element am I overlooking here: ctx.drawImage(img, 10, 10, 13, 50); It does ...

javascriptcsshtmlcanvas

A guide to adjusting the size of an iframe within a bootstrap modal

I am currently facing an issue where I am trying to display an iframe inside a bootstrap modal. The challenge is that the content within the iframe is dynamic, so the size may vary each time the modal is opened. As seen here, the modal appears too big and ...

htmlbootstrap-4bootstrap-modal

JQuery requests functioning flawlessly on one system while encountering issues on other systems

I've encountered an issue with the code on my admin page. It used to work perfectly fine on my system, but now it seems to have stopped functioning. My client urgently needs to update this page, however, when I attempt to run it, the JQuery requests a ...

javascriptjqueryhtmlcss

Issue with the Bootstrap navbar not responding to clicks for toggle functionality

I have integrated Bootstrap 4 to enable the collapse of dropdown menu on small screens (sm) within my navbar. However, I am facing an issue where the toggling functionality is not working - clicking on the toggle button does not produce any results. I hav ...

asp.net-corebootstrap-4

Assigning a class to a header upon loading the page from various sections at random

After scrolling, I used JavaScript to add a class to <header>. Here is the code snippet: $(window).scroll(function(){ var top = $(window).scrollTop(); if(top>=1){ $("header").addClass('bg-header'); } else ...

javascriptjquerycss