[Resolved] Accordion Panel Header Clickable

[Author]

Posts

[dazone]

Hi There,

Just a suggestion because there seems to be no straightforward way to implement this.

I've used accordions in my last couple of sites and both times felt that in order to show that the headers are hiding content, they deserved an icon (say a downwards pointing carat or a plus). As Layouts takes care of generating all of the markup, I do this with css :after selctors. This works fine.

I have noticed however, that unless a user clicks on the text in the header (or icon) directly, the panel will not expand.

I feel like this would be a simple change in the back-end with a few lines of Javascript but could make the Accordion feel much more natural for end-users.

I am probably going to implement this in the site I'm currently developing and so could possibly provide the solution I get if needed.

Many thanks for all the hard work.

[dazone]

OK so I've found two seemingly workable solutions both on Stack Overflow.

The first solution, I cannot implement to see it in action but it makes sense.
hidden link

If you modify the generated HTML code slightly from this:

<div class="panel-heading">
    <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
            Collapsible Group Item #1
        </a>
    </h4>
</div>

to this:

<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
    <h4 class="panel-title">
        <a>Collapsible Group Item #1</a>
    </h4>
</div>

You get the full clickable header.

The option I have used is a simple modification to the CSS.

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

I must admit, I feel that this is a bit of a hack and not really what CSS is made for (not really formatting as much as behavioural) but it does work and that's fine as a temporary workaround.

I'll leave the thread open so that I see what you guys think about adding this as a feature.

[Noman]

Hi,

Thank you for contacting Toolset support. Toolset Layouts already have Accordion Cell:
https://toolset.com/documentation/user-guides/accordion-cell/

Would you like to submit a feature for having ability to “Add an icon to the According cell”?

On the other hand, method you are using looks fine and you can use that.

Thank you

[dazone]

Hi Norman, Thanks for the reply.

Though it would be nice to have a feature to add an icon to the header. The feature request was more for the UX of the accordion cell.

After presenting two sites to clients using accordions, they both initially clicked on the header rather than the link text within the header and mentioned that this was slightly confusing.

When an icon is added to indicate that the header reveals more content, it looks like there is a big clickable region in between but that is not the case. This functionality is only achieved after making the link a block level element or moving the data-toggle directives to the surrounding div.panel-header element.

I hope this clarifies. Please feel free to close the ticket after the feature request has been made.

[Noman]

Yes I see now what you are talking about 🙂 I agree with you that an icon will make it look more useful and good UX. I have now submitted this idea as a feature request to our team for further consideration. We appreciate the time you have taken to provide this feedback.

Thank you for your suggestions.

[dazone]

Thanks.

Again, the trick is also making the link inside the header block-level too.