CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap
adp
adp

Reputation: 13

Linking to a nested accordion using Bootstrap 3

First of all, I'm new here so please be patient with me.

I have a nested accordion, and what I would like for it to do is have one link inside one nested accordion to open a different nested accordion. Right now, I am able to get a link from Nested Accordion 2.1 to open the contents of Nested Accordion 1.1. However, it doesn't open Accordion 1, so it looks like the link does nothing. When you manually open Accordion 1, you can see that Nested Accordion 1.1 is already opened.

Here's my HTML code: 

<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="#accordion1">Accordion 1</a>
      </h4>
    </div>
    <div id="accordion1" class="panel-collapse collapse">
      <div class="panel-body">
        <div class="panel-group" id="nested-accordion1">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#nested-accordion1" href="#accordion1-1">Nested Accordion 1.1</a>
              </h4>
            </div>
            <div id="accordion1-1" class="panel-collapse collapse">
              <div class="panel-body">
                <p>Description</p>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#nested-accordion1" href="#accordion1-2">Nested Accordion 1.2</a>
              </h4>
            </div>
            <div id="accordion1-2" class="panel-collapse collapse">
              <div class="panel-body">
                <p>Description</p>
              </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="#accordion2">Accordion 2</a>
      </h4>
    </div>
    <div id="accordion2" class="panel-collapse collapse">
      <div class="panel-body">
        <p>Description</p>
        <div class="panel-group" id="nested-accordion2">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#nested-accordion2" href="#accordion2-1">Nested Accordion 2.1</a>
              </h4>
            </div>
            <div id="accordion2-1" class="panel-collapse collapse">
              <div class="panel-body">
                <a href="#" data-toggle="collapse" data-target="#accordion1-1">Link to Nested Accordion 1.1</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Any suggestions for what I can do to solve this? I'm currently not using any customized JQuery (just the Bootstrap stuff), and I feel like it would be useful to add some JQuery to this but I'm not sure where to start.

Upvotes: 1

Views: 766

Answers (1)

user13653
user13653

Reputation: 343

Try adding the following javascript to your project. I left comments in the code to describe what's happening.

// run the code inside this block only when the DOM is [ready][1]
$(document).ready(function(){

  // create event listen on accordion2-1's click event, [jQuery][2] 
  $('#accordion2-1').on('click', function(evt, el){

    // find accordion1 and toggle this element
    // "collapse" method is from [bootstrap][1] 
    $('#accordion1').collapse('toggle');
  });
});

Upvotes: 1

Related Questions