Make entire accordion panel clickable

Bootstrap Studio Help
1

I would like to make the entire panel clickable rather than just the link title. Does anyone know how to do this please?

2

Well it is possible. Not semantic I believe and you can't do it with the drag/drop, you have to use Custom Code to make it work.

You can drag/drop the Accordion component and then in the Overview pane right click it and select Convert to HTML. This way you can just move the link code to wrap around the .panel classed element. So it would be something similar to this.

<div id="accordion-1" class="panel-group" aria-multiselectable="true" role="tablist">
    < a role="button" data-toggle="collapse" data-parent="#accordion-1" aria-expanded="true" href="#accordion-1 .item-1"> // moved
        <div class="panel panel-default">
            <div class="panel-heading" role="tab">
                < h4 class="panel-title">Accordion Item< /h4>
            </div>
            <div class="panel-collapse collapse in item-1" role="tabpanel">
                <div class="panel-body">
                    < span>Item body.< /span>
                </div>
            </div>
        </div>
    < /a> // moved
</div>

Saj

3

Just so you know, you lose some of the base functionality like clicking one of the other accordion panels will not close a previously open panel because the link is no longer where the scripting expects it to be.

Saj

4

Thank you very much for your reply. Very informative. Absolutely love Bootstrap Studio by the way :-)