Bootstrap accordion: how to make entire button clickable?

Question

i add an accordion menu to my 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 can i make the entire button clickable? At the moment just the title does it.

Thank you in advance

Boo

Answer 1

Create click event .panel-heading and in the event check if .panel-heading second ancestor is <a class="" href="#colapseXXXXX" data-parent="#accordion" data-toggle="collapse"></a>. For example checking value in href. Then if it is true trigger click on the <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;
    });

});;

Triggering click on causing bubbling up click event back to .panel-heading and .panel-heading was triggering click on again making infinite loop. If I try to preventDefault() I also prevent default bootstrap behavior so click didn't change anything. Solution above is the only one in my opinion.

Hymnist

Sorry, i am afraid i do not understand what you mean... can you add some more code? – Boo

When you said "ancestor"... did you mean "child" ? – Boo

Yes, sorry find "descendant" – Kaiserism

I think i do my homework: pastebin.com/tZpSMaKF. Anyway none of these works except the first. What's wrong? – Boo

It doesn't work: ahref.indexOf('#collapse') seems to be always -1 – Boo

Is var ahref defined? Please put your whole code to JS Fiddle to edit it quickly. – Kaiserism

I tested it and seems not to work well. First if i want to close the menu the click doesn't work the second time. In addition, if you make few clicks on different heading then it finally brokes... – Boo

Let us continue this discussion in chat. – Kaiserism

I tried to come in chat but i think you are offline. Anyway i changed your code, because in my case href property does not contain collapse string, so i removed the if condition at all. Please have a look and tell me if it is ok in my case: jsfiddle.net/5g60qLq2/43 – Boo

Answer 2

Just a note,

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

    <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>

Schoenfeld

This works perfectly! Is there any reason why we would not want to place a a header inside of a link? <a href="#"><h4>Header</h4></a> I – Spendable

I wouldn't see any reason why not seems to work just fine – Schoenfeld

Answer 3

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

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

If the parents divs got padding, set it to 0 and set it to your .panel-title a instead

.panel-heading{
    padding: 0;
}

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

No need for .js here

Whizbang

Dude, this should have more votes! Worked like a charm! – Weightlessness

Answer 4

This is an old thread, but I faced exactly the same problem today using Bootstrap 4.

I followed the solution of hikups, but it is not necessary to use custom CSS. Simply add d-block in the class attribute of the anchor element.

<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="d-block">1. Menu number one</a>

Cephalopod