Collapsible Bootstrap Panels not Collapsing After Another Panel is Selected

On the page I’m using Collapsible Bootstrap Panels. The upside, the Accordion is working. The downside is that the ‘collapsing’ of the panels isn’t working when another panel is clicked. They all seem to expand without closing the previously selected panel.

Does someone know where the issue lies?

I would also like to change the color of the panel heading once it is expanded. Would I need jQuery to do this?

Which version of bootstrap are you running as you seem to have removed the identification?

In bootstrap3.3 you need to change the data-parent to accordion in the panels.

e.g.

<a data-toggle="collapse" data-parent="#accordion" href="#1"> What is Break the Barriers? </a>

Leave the href but change the data-parent to point to #accordion. I changed your code to point to bootstrap 3.3 and the accordion worked with that in place so I guess you are running an earlier version.

You also seem to be using js to trigger the panels when I believe the data attributes are supposed to be the triggers (although bootstrap is a mystery to me at times).

As you seem to have the js opening the panels then you could change the routine to this and it should work ok.

//jQuery(".panel-heading").click(function(){ jQuery(this).nextAll(".panel-collapse").slideToggle("fast"); });
			
			jQuery(".panel-heading").click(function(){ 
				jQuery(this).next(".panel-collapse").addClass('thePanel');
				jQuery('#accordion .panel-collapse').not('.thePanel').slideUp("fast"); 
		    	jQuery(".thePanel").slideToggle("fast").removeClass('thePanel'); 
			});

I commented the section out and added the new code below which handles the opening and closing of the panels ok. It’s probably the completely wrong way to do this so you may have to wait for the js experts to pipe up and help :slight_smile:

Here is a cut down version of your page working.

<!DOCTYPE html>
<html lang="en-US" prefix="og: http://ogp.me/ns#">
<!--<![endif]-->
<head>
<meta charset="UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1, user-scalable=no" />
<title>FAQ - Break the Barriers, Fresno, CA</title>
<link rel="stylesheet" href="http://nettra.net/demo-sites/btb/development/wp-content/themes/breakthebarrier/css/bootstrap.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://nettra.net/demo-sites/btb/development/wp-content/themes/breakthebarrier/css/custom.css" type="text/css" media="all" />
<!-- BoilerStrap JavaScript Goes Here -->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://nettra.net/demo-sites/btb/development/wp-content/themes/breakthebarrier/js/bootstrap.min.js" type="text/javascript"></script>
<script>
		jQuery(document).ready(function() {
			//jQuery(".panel-heading").click(function(){ jQuery(this).nextAll(".panel-collapse").slideToggle("fast"); });
			
			jQuery(".panel-heading").click(function(){ 
				jQuery('#accordion .panel-heading').not(this).removeClass('isOpen');
				jQuery(this).toggleClass('isOpen');
				jQuery(this).next(".panel-collapse").addClass('thePanel');
				jQuery('#accordion .panel-collapse').not('.thePanel').slideUp("fast"); 
		    	jQuery(".thePanel").slideToggle("fast").removeClass('thePanel'); 
			});
			
		});	
		
		
</script>
<style>
.panel-default > .panel-heading.isOpen {
	background:red
}
</style>
</head>

<body>
<article id="post-253" class="post-253 page type-page status-publish hentry">
  <div class="container">
    <div class="entry-header">
      <h1 class="entry-title">FAQ</h1>
    </div>
    <div class="entry-content"> 
      
      <!--FAQs content display-->
      
      <div class="container">
        <div class="panel-group" id="accordion">
          <div class="panel panel-default">
            <div class="panel-heading isOpen">
              <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion"  href="#a1"> What is Break the Barriers? </a> </h4>
            </div>
            <div id="a1" class="panel-collapse">
              <div class="panel-body">
                <p>BTB is a non­profit corporation that celebrates awareness and victories of people of all abilities, ethnicities and ages through exceptional programs, outreach and inclusion education by offering  a range of classes where students can learn and grow together and by inclusive performing teams going out into the community both locally and globally to showcase the possibilities of Inclusion.</p>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#a2"> Who can come to BTB? </a> </h4>
            </div>
            <div id="a2" class="panel-collapse collapse">
              <div class="panel-body">
                <p>We welcome people of all backgrounds and abilities, including programs for children, adults and veterans. Specific programs do have age requirements, please refer to our class schedules for precise information.</p>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion"  href="#a3"> What programs/classes are offered? </a> </h4>
            </div>
            <div id="a3" class="panel-collapse collapse">
              <div class="panel-body">
                <p>We offer a variety of classes for various age groups.  Classes for children include gymnastics, dance, swim lessons, Taekwondo, archery, music and sign language.  Classes for adults consist of boot camp workout class, water aerobics, ballroom dance, archery, Taekwondo, HOPE &amp; Fitness for spinal cord injuries or other physical needs and sign language.  BTB also offers programs for veterans and active duty military.</p>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#4"> How can I enroll my child into classes? </a> </h4>
            </div>
            <div id="4" class="panel-collapse collapse">
              <div class="panel-body">
                <p>Call the office for availability of specific days and times.  A registration form must be completed by a parent or legal guardian before fees can be paid and spots reserved.  Registration forms are available at the office or on our web site.</p>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#5"> What is the difference between gymnastics and tumbling classes? </a> </h4>
            </div>
            <div id="5" class="panel-collapse collapse">
              <div class="panel-body">
                <p>Gymnastics classes include all of the gymnastics events including tumbling and various apparatus such as bars, rings etc. These classes are listed on the schedule by age group and are suitable for all abilities.  Tumbling classes are for tumbling skills only without apparatus.  Before enrolling in a Tumbling class students must participate in an evaluation by a coach scheduled with the office.</p>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#6"> What are the fees? </a> </h4>
            </div>
            <div id="6" class="panel-collapse collapse">
              <div class="panel-body">
                <p>Sessions vary and are listed under that specific program or class.</p>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#7"> What are the programs available for veterans? </a> </h4>
            </div>
            <div id="7" class="panel-collapse collapse">
              <div class="panel-body">
                <p>BTB has become a training center for Wounded Warriors, Valor Games and Golden Age Games and other Veteran events with the help of grant funding and private donations.  Programs include archery, biathlon, lap swimming and others.  For more info check out veterans under programs.</p>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#8"> What is the HOPE program? </a> </h4>
            </div>
            <div id="8" class="panel-collapse collapse">
              <div class="panel-body">
                <p>HOPE is the acronym for Helping Open Possibilities with Exercise.  This program benefits individuals who have had a spinal cord or other injury and those with cerebral palsy, spina bifida, stroke and other physical needs. Our trainers use exercise and repetition to improve mobility and range of motion in participants.  It is NOT considered physical therapy.</p>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#9"> What is the Buddy Program? </a> </h4>
            </div>
            <div id="9" class="panel-collapse collapse">
              <div class="panel-body">
                <p>BTB partners with local school districts to bring students in both Special and General Education classes to participate in programs together.  This is a free program for schools, and BTB must continually raise funds to sustain it.  Our goal is to remove barriers and allow children to build common experiences and relationships.</p>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#10"> When are payments due? </a> </h4>
            </div>
            <div id="10" class="panel-collapse collapse">
              <div class="panel-body">
                <ol style="list-style-type: lower-alpha;">
                  <li>Monthly fees are due BEFORE the 1st of each month, for example June fees are due before May 31st. </li>
                  <li>Fees are non­refundable.</li>
                  <li>Fees paid on the 1st day of the month are considered late &amp; a $5 late charge will be added to your monthly fee.</li>
                  <li>Payments can be made over the phone using your credit card f) All students must give a two-week notice that they are dropping their class.</li>
                  <li>A $20.00 service charge will be added to all returned checks. Checks will not be re­deposited.<br />
                    Only cash will clear a returned check.</li>
                  <li>If you choose to do automatic payments through your bank please make sure to include your students name and class in the memo so we can apply it appropriately.</li>
                </ol>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#11"> Does BTB close for holidays? </a> </h4>
            </div>
            <div id="11" class="panel-collapse collapse">
              <div class="panel-body">
                <p>BTB observes all major holidays. Dates will be posted at the entrance, flyers will be handed out during class and posted on the web site. BTB does not charge more for months with five weeks. Those extra days of classes are traded for the major holiday that BTB is closed (so no make­ups are given) BTB is closed Winter Break, Spring Break, Memorial Day, July 4th, Labor Day and Thanksgiving Break. To keep the trade even, we remain OPEN for the President&#8217;s birthdays, Veterans Day, Martin Luther King&#8217;s birthday and Columbus Day.</p>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#12"> Is there a scholarship program? </a> </h4>
            </div>
            <div id="12" class="panel-collapse collapse">
              <div class="panel-body">
                <p>Scholarship applications are available at the front office and are approved on a case by case basis based on need and funding available. As the program is completely funded by private donations  students who are on a scholarship and miss two consecutive classes will be dropped if the office has not been notified and the scholarship will then be applied to another student. All scholarship recipients are kept confidential.</p>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#13"> How do I know what class is best for my child? </a> </h4>
            </div>
            <div id="13" class="panel-collapse collapse">
              <div class="panel-body">
                <p>When inquiring about programs, the receptionist will ask a series of questions that will assist placing your child in the program/class best suited for his/her abilities, age and level.</p>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#14"> If I miss a class, can I make it up? </a> </h4>
            </div>
            <div id="14" class="panel-collapse collapse">
              <div class="panel-body">
                <p>Make­up classes are to be scheduled at the reception desk. Students receive ONE make­up a month regardless of the reason. We will make every effort to put the student in a class that is not over the ratio. This make­up opportunity EXPIRES ONE MONTH from the day missed. Make-up classes can only be scheduled after a class is missed. A make­up class is forfeited if the student does not attend and the office is not notified at least 24 hours before the scheduled make-up. There are no make­ups for swim, archery, music or camps of any type.</p>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#15"> How do I know what is happening at Break the Barriers? </a> </h4>
            </div>
            <div id="15" class="panel-collapse collapse">
              <div class="panel-body">
                <p>Check the Events Calendar for a listing of activities.</p>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#16"> How can I keep updated? </a> </h4>
            </div>
            <div id="16" class="panel-collapse collapse">
              <div class="panel-body">
                <p>Join our mailing list to receive email updates on current events at BTB and check out our social media pages on <a href="https://www.facebook.com/Break-the-Barriers-105278632860721" target="_blank">Facebook</a>, <a href="https://twitter.com/btb4all" target="_blank">Twitter</a>, <a href="https://www.instagram.com/breakthebarriers" target="_blank">Instagram</a> and <a href="https://www.youtube.com/btb4all" target="_blank">YouTube</a>!</p>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#17"> How do I contact an instructor or staff member? </a> </h4>
            </div>
            <div id="17" class="panel-collapse collapse">
              <div class="panel-body">
                <p>Contact the BTB office at <a href="tel:5594326292" target="_blank">(559) 432-­6292</a> and your message will be given to the instructor or staff member you wish to speak to.</p>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#18"> Is there a dress code? </a> </h4>
            </div>
            <div id="18" class="panel-collapse collapse">
              <div class="panel-body">
                <p>BTB adopted a dress code that will not restrict movement, is welcoming to all body types, safe for the student and others and will allow students to participate in his/her respective program unencumbered. If the instructor deems that the attire is inappropriate, the instructor has the right <br />
                  to dismiss that student from participating in class. The dress code for each program is strictly followed:</p>
                <ol>
                  <li>Long hair needs to be tied back (no exceptions).</li>
                  <li>Lightweight tennis shoes or bare feet are best for gymnastics.</li>
                  <li>Shorts or sweats and t­shirts are best for the boys.</li>
                  <li>Leotards or biker shorts are best for the girls.</li>
                  <li>No gum.</li>
                  <li>No jewelry, No belts, No hard sole shoes (except tap shoes).</li>
                  <li>Ballet attire – black leotard, pink tights and pink ballet slipper.</li>
                  <li>Boys and other dance styles – please check with instructor for dance attire.</li>
                  <li>Ballet, tap or jazz shoe is a MUST for dance (check with instructor for the best shoe for the particular style of dance).</li>
                  <li>CLEAN bare feet for Martial Arts (push­ups if they are dirty).</li>
                  <li>Martial Arts uniforms are required by the first test (office staff can help you here).</li>
                  <li>NO TUMMIES CAN BE SEEN, NO LOW­CUT SHIRTS (front &amp; back), SPAGHETTI STRAPS (tank­style shirts must have a minimum 1inch shoulder strap), HIGH­CUT BOTTOMS, OR SHORT SHORTS(6 INCH IS RECOMMENDED).</li>
                </ol>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#19"> How can I inquire about the Barrier Breakers performing at my event or school? </a> </h4>
            </div>
            <div id="19" class="panel-collapse collapse">
              <div class="panel-body">
                <p>Call the office <a href="tel:5594326292" target="_blank">(559) 432-­6292</a>. Refer to <a href="http://nettra.net/demo-sites/btb/development/performing-teams/" target="_blank">Performing Teams</a> for pricing.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--end 'faqs' if--> 
      
    </div>
    <!-- .entry-content --> 
  </div>
</article>
<!-- #post -->
</body>
</html>

I don’t think this is the right approach though so you may need to check your bootstrap documentation and see if the accordion is supported in your bootstrap version.

1 Like

Okay. the Bootstrap I’m using is 3.3.5.

I will try your approach on changing the ‘data-parent’ to #accordion and take it step by step from there with your suggestions.

Thank you.

Thank you, PaulOB.

I’ve managed to get it operational, but I will have to modify the jQuery script you provided because every time I click on the question, it quickly opens and automatically returns to its normal state.

This worked nicely:

                jQuery('#accordion .panel-heading').not(this).removeClass('isOpen');
                jQuery(this).toggleClass('isOpen');
                jQuery(this).next(".panel-collapse").addClass('thePanel');
                jQuery('#accordion .panel-collapse').not('.thePanel').slideUp("fast"); 
                jQuery(".thePanel").slideToggle("fast").removeClass('thePanel'); 

Thank you, PaulOB.

Glad it worked :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.