michaelmcgurk michaelmcgurk - 26 days ago 8
CSS Question

Close Accordion element when another element opened

I am working on a Accordion. It's going great, however, when I open a link then open a 2nd link, the original link doesn't close. How do I resolve this?

Demo: https://jsfiddle.net/g8xxh1Lp/



/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */

@import url('http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css');
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container-fluid" id="singleacord">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#tab1">General</a>
</li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<div>
<ul class="red_bullets">
<li>
<a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapse11">Test 1</a>
</li>
</ul>
<div class="panel-collapse collapse" id="collapse11">
<div class="panel-body">
<p>Test 1 Textx</p>
</div>
</div>
<ul class="red_bullets">
<li>
<a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapse22">Test 2</a>
</li>
</ul>
<div class="panel-collapse collapse" id="collapse22">
<div class="panel-body">
<p>Test 2 Text</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>




Answer

Just give an id - accordion to your div and class - panel - group which is the parent of ul.red_bullets and wrap red_bullets within one more div with class - panel panel-default. That's how the grouping or structure should be. Check out the below updated snippet

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */

@import url('http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css');
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
 body {
  margin: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container-fluid" id="singleacord">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="container">
          <div class="row">
            <div class="col-md-8 col-md-offset-2">
              <div class="panel with-nav-tabs panel-default">
                <div class="panel-heading">
                  <ul class="nav nav-tabs">
                    <li class="active">
                      <a data-toggle="tab" href="#tab1">General</a>
                    </li>
                  </ul>
                </div>
                <div class="panel-body">
                  <div class="tab-content">
                    <div class="tab-pane active" id="tab1">
                      <div class="panel-group" id="accordion"> <!--This here-->
                        <div class="panel panel-default"><!--and this-->
                          <ul class="red_bullets">
                            <li>
                              <a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapse11">Test 1</a>
                            </li>
                          </ul>
                          <div class="panel-collapse collapse" id="collapse11">
                            <div class="panel-body">
                              <p>Test 1 Textx</p>
                            </div>
                          </div>
                          <ul class="red_bullets">
                            <li>
                              <a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapse22">Test 2</a>
                            </li>
                          </ul>
                          <div class="panel-collapse collapse" id="collapse22">
                            <div class="panel-body">
                              <p>Test 2 Text</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Comments