Accordion within an Accordion that can be collapsed

Are you familiar with the toggle effect in Bootstrap? When you click on Group 1, it toggles, and when you click on Group 2, Group 1 collapses. Here is an example:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#title1">Title 1</a>
        </h4>
      </div>
      <div id="title1" class="panel-collapse collapse in">
        <div class="panel-body">


        <div class="panel-group" id="accordion">
        <div class="panel">
            <a data-toggle="collapse" href="#title1-1">sub-title</a>
            </div>
            
            <div id="title1-1" class="panel-collapse collapse in">
            <div class="panel-body">
                <a href="#">Content</a><br>
                    <a href="#">Content</a><br>
                    <a href="#">Content</a><br>
                    <a href="#">Content</a>
                </div>
            </div>
            
            <div class="panel">
            <a data-toggle="collapse" href="#title1-2">sub-title 2</a>
            </div>
            
            <div id="title1-2" class="collapse">
            <div class="panel-body">
                <a href="#">Content</a><br>
                    <a href="#">Content</a><br>
                    <a href="#">Content</a><br>
                    <a href="#">Content</a>
                </div>
            </div>
        </div>


        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#title2">Title 2</a>
        </h4>
      </div>
      <div id="title2" class="panel-collapse collapse">
        <div class="panel-body">


        <!-- STUFF -->


        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#title3">Title 3</a>
        </h4>
      </div>
      <div id="title3" class="panel-collapse collapse">
        <div class="panel-body">

        <!-- STUFF -->

        </div>
      </div>
    </div>
  </div> 
</div>

</body>
</html>

Do you want the list inside "Title 1" to have the same toggle effect as the 3 lists outside?

The classes and IDs might not be correct for achieving this effect.

jqueryhtmltwitter-bootstrapcss

Answer №1

I believe this is the solution you are seeking. Take a closer look at how I have nested one accordion inside another. It's all about utilizing the correct IDs and classes.

See it in action below:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
           <style type="text/css">
             .panel{
    border-color:#EEEEEE !important;
    width: 150px;
}

.panel > .panel-heading {
    background-color: greenyellow;
    color: white;
    height: 40px;
    text-align: center;
    border-color:black !important;
    font-size: 20px;
}

.panel> .panel-body{
    text-align: center;
    font-family: "Comic Sans MS";
    font-size: 35px;   
}

.glyphicon{
    font-size: 20px !important;
    text-align: left !important;
}
           </style>
           
           </head>
           <body>
           <div class="container">

  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#title1">Title 1</a>
        </h4>
      </div>
      <div id="title1" class="panel-collapse collapse in">
        <div class="panel-body">
        
        
        <div class="panel-group" id="accordion1">
          <div class="panel">
             <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion1" href="#inside1">Title 1</a>
        </h4>
      </div>
      <div id="inside1" class="panel-collapse collapse in"> 
              <div class="panel-body">
                  <a href="#">Content</a><br>
                    <a href="#">Content</a><br>
                    <a href="#">Content</a><br>
                    <a href="#">Content</a>
                
            </div>
            </div>
            </div>
            
            <div class="panel">
              <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion1" href="#inside2">Title 1</a>
        </h4>
      </div>
      <div id="inside2" class="panel-collapse collapse">
              <div class="panel-body">
                  <a href="#">Content</a><br>
                    <a href="#">Content</a><br>
                    <a href="#">Content</a><br>
                    <a href="#">Content</a>
                </div>
            </div>
        </div>
        </div>
        
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#title2">Title 2</a>
        </h4>
      </div>
      <div id="title2" class="panel-collapse collapse">
        <div class="panel-body">
        
        
        <!--- STUFF -->
        
        
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#title3">Title 3</a>
        </h4>
      </div>
      <div id="title3" class="panel-collapse collapse">
        <div class="panel-body">
        
        <!--- STUFF -->
        
        </div>
      </div>
    </div>
  </div> 
</div>
           </body>
           </html>

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

In the present technological landscape, is it still considered beneficial to place Javascript at the bottom of web pages?

As a beginner in web programming, I've recently delved into Javascript. A hot debate caught my attention - where should javascript be placed, at the top or at the bottom of a webpage? Supporters of placing it at the top argue that a slow loading time ...

javascripthtml

How can I preloaded self-hosted fonts in Next.js without receiving a console warning for not using the resource within a few seconds?

I am working on a project in Next.js and I want to preload my self-hosted fonts. In my code, I have the following setup: Inside my _app.js file: <Head> <link rel="preload" href="/fonts/leira/Leira-Lite.t ...

htmlcssfontsnext.jspreload

Tips for aligning a Font-Awesome icon vertically centered with a line of text in Bootstrap 4

My goal is to vertically center a Font Awesome icon next to a small block of text. To better illustrate, here is a reference image of what I am aiming for: This is the visual I aspire to achieve The section of my website that I am currently fine-tuning ca ...

htmlcsstwitter-bootstrapfont-awesometwitter-bootstrap-4

Can someone point me in the direction of the app.css file within DurandalJS that controls the modals

I am currently facing an issue with implementing a modal in my app using the DurandalJS (SPA) framework. The modal is not displaying correctly, as it opens without a blockout and stretches horizontally across the entire browser. (I expect "Feeds", the "Ne ...

javascriptcssdurandal

Ways to switch visibility based on user's selection

Currently, I am working on a project that involves a select form with multiple options. However, I need to display a specific div only when a particular option is selected. Can anyone suggest the best solution for this scenario? Your guidance would be grea ...

javascripthtmlselecttogglevisibility

iOS datetime-local height adjustment

I have added a datetime-local input field to my website that is accessed through my mobile phone. However, I am facing an issue where the datetime-local field is positioned higher than the other textboxes in the row. This creates an awkward offset, as sh ...

jqueryhtmlcssdatetime

Is it possible to generate multiple individual rows of customized buttons within Streamlit?

I utilized the insights from this post to craft multiple buttons in Streamlit: HOW TO STYLE A BUTTON IN STREAMLIT. The outcome appears as follows: enter image description here The code that I implemented is: def style_button(click_button_i, nb_buttons): ...

cssbuttonstreamlit

"Positioning a div around a Bootstrap form-inline: A step-by-step guide

When using Bootstrap 3 "form-inline" within a <div>, I noticed that the div seems to be nested within the form-inline. This is how my code looks: HTML <div class="wrapper"> <div class="form-inline"> <div ...

javascripthtmlcsstwitter-bootstrap

Is it possible for the background color to change in a sequence every time the page

I'm having trouble figuring out how to create a sequence that changes the background color every time the page is refreshed. I'm comfortable with basic HTML but not so much with JavaScript or CSS. I'm working on a page where I want the backg ...

javascripthtmlcss

Is there a way to trigger the opening of a new file or page when a CSS animation comes to an end?

Is there a way to delay the loading of a function or page until after an animation has finished running in JavaScript, HTML, and CSS only? For instance, I'd like to run an animation first and then have a different website or content load afterwards fo ...

javascripthtmlcss

Display unique menus for both users and administrators

I have been researching extensively to find a solution to my problem, but I am struggling to make things work properly. Here is the code I currently have: Login script: $submitted_username = ''; if(!empty($_POST)) { ...

phphtmlmysql

The AJAX function is not returning the value as expected in jQuery operations

In my document.ready function, I have the following code snippet; function customFunction(){ var response; $.ajax({ type: 'POST', url: 'handler.php', cache: false, success: function(result) { ...

javascriptphpjqueryajax

What is the best way to customize the cursor for each individual div?

Can you alter the cursor from a pointer to "not-allowed" within the div or GridList element in ReactJS or Material UI? ...

cssreactjsmaterial-ui

Stripping away all HTML elements, including their contents, from the text

Can anyone help me figure out how to remove all HTML tags and their contents using the BeautifulSoup library? Here is an example input: ... text <strong>ha</strong> ... text And this is the desired output: ... text ... text ...

pythonhtmlhtml-parsingbeautifulsoup

What could be causing this issue where the call to my controller is not functioning properly?

Today, I am facing a challenge with implementing JavaScript code on my view in MVC4 project. Here is the snippet of code that's causing an issue: jQuery.ajax({ url: "/Object/GetMyObjects/", data: { __RequestVerificationToken: jQuery(" ...

javascriptjqueryajaxjsonasp.net-mvc-4

Explaining the Usage of Nav-pills in Bootstrap v4

I am looking to align my navigation bar across the width of the div. However, I am currently using Bootstrap v4 and the nav-justify class is not available yet. Below is the code snippet: <ul class="nav nav-pills"> <li class="nav-item"> ...

htmlcsstwitter-bootstrapresponsive-designbootstrap-4

The submenu dropdown on the navigation bar appears once you hover over the parent bootstrap element

Hey there! I'm currently facing an issue where the submenu dropdown is displaying when its grandparent is hovered, rather than just its parent. Here's the code snippet: <nav class="navbar navbar-default"> <div class="container"> ...

jqueryhtmlcsstwitter-bootstrapnavbar

Check List Table A, Locate Table B, and Apply the Findings to Update Table A

My dissertation requires me to classify images. The image links are stored in the "ocr" table. On my search page, I display all the images in rows. Using AJAX, I search the "diss_kategorien" table and display the results in a dropdown within the OCR table. ...

phpjquerymysqlajax

Incorporating HTML content in email messages using a PHP mailer script

I have been exploring a way to incorporate HTML code into the email body using an AJAX PHP Form Mailer I discovered on this website: However, whenever I try to add my own HTML coding into the email body, it just displays the tags instead of rendering them ...

phphtmlcssajaxemail

Getting the environment variable from Rails in your JavaScript: A guide

I am currently working on implementing a key system within my application. In the code I am using, there is logic that looks like this: $('.key-test-button').on('click', function(){ if ($('.key-test-input').val() === "MYK ...

javascriptjqueryruby-on-rails