...">
Geek Answers Handbook

Bootstrap accordion: how to make the whole button pressed?

I will add my accordion menu to the site using this example:

<div class="bs-example"> <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="#collapseOne">1. Menu number one</a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> <p>Menu number one text</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="#collapseTwo">2. Menu number two</a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> <p>Menu number two</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="#collapseThree">3. Menu number three</a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> <p>Menu number three</p> </div> </div> </div> </div> </div>

You can see it live here

Do you know how I can make a button pressed? At the moment, only the name does this.

Thank you in advance

+4
source share
3 answers

Create a click event .panel-heading and, if checked, if .panel-heading second ancestor <a class="" href="#colapseXXXXX" data-parent="#accordion" data-toggle="collapse"></a> . For example, checking the value in href. Then, if it is a true trigger, click on <a> .

Try this code:

 $('.panel-heading').on('click', function () { var a = $(this).childen('.panel-title').children('a'); var ahref = a.prop('href'); if (ahref.indexOf('#collapse') > -1) { a.trigger("click"); } });

Working solution:

 $(document).ready(function(){ $('.panel-heading').on('click', function () { var a = $(this).find('a'); var ahref = a.prop('href'); if (ahref.indexOf('#collapse') > -1) { $('.panel-collapse').removeClass('in'); $(this).next('div').addClass('in'); } }); $(".panel-heading a").on('click', function(event) { $(this).closest('.panel-heading').trigger('click'); return false; }); });;

Starting a click on a bubble call up a click event back to the .panel header and the .panel header triggered a click again, making an endless loop. If I try to prevent Default (), I also prevent the default loading behavior, so clicking does not change anything. The solution given above is the only one, in my opinion.

+4
source

Just notice

Did you try to pull the outside of the h4 class? therefore instead

  <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. Menu number one</a> </h4> </div>

try

  <div class="panel-heading"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> <h4 class="panel-title">1. Menu number one</h4> </a> </div>
+1
source

I know this is an old thread, but I had the same problem and solved it easier.

Just give your ".panel-title a" block display

If the parent divs got a registration, set it to 0 and set it instead of .panel-title a instead

 .panel-heading{ padding: 0; } .panel-title a{ display: block; padding: 15px; }

No need here .js

0
source

More articles:


All Articles