Hello everyone, I was wondering if there’s a way to make an entire accordion header clickable (especially the arrow on the right side of my design)? Right now, it’s just the text that seems clickable. Thank you!
Thanks! I see what youre saying. I’ll give it a try!
@Flashman - thanks yes, that works. I had to get rid of the arrow (it wouldn’t run over the top of it). Let me know if you think of another way, but I think that will work as an alternative. 
Thanks!
I’ve never actually done it using an arrow and just relied on this method. It’s just one of those things I’ve not thought about much because they have only been used on pages that are rarely visited like T&C’s etc.
A few years ago I used Rapidweaver and there was a custom plugin that did exactly what you want, so I may take a peek at how that was done, but I think the key problem here is that we are relying on bootstrap cards that are not strictly intended for this purpose. It may be possible with some clever use of a custom class but most likely require some custom coding.
Gotcha, thanks. I found this thread but I’m horrid at coding so I wasn’t following it well. Accordian toggle indicator - #55 by benfluri
I would totally not worry about it and get rid of the arrows, but I included them in my wireframes that the client saw (and this is a bit of a unique site so they are pretty front and center), so I’m still trying out different solutions.
Add the class .stretched-link. This should do the trick.
1 Like
I’ve tried that previously and in this case they stop opening at all.
I’ll give it a try later tonight.
The stretched-link class works, same as the width option in the side panel.
What we need to know is how did they make the arrow. It’s obviously sitting outside the link.
1 Like
I have tried applying the stretched-link class to the body, entire card and the column. No matter where it is applied it blocks the accordion from opening here.
You apply the stretched link class to the link.
1 Like
Couple of options I can think of now for the OP.
-
Make a new link with an icon, and add all attributes that make the link work on the accordion. (You can see them when you click on the link under custom attributes)
-
Use a Pseudo Element, I would choose this
OK that works. The only other time I’ve done this was in a project some time ago with some two column structures and a link button going to another page.
1 Like
Hi @MicaZmuera,
I did something similar on a demo page I did for clients - this is on a website called eventdemo which I did.
If you scroll down you will see the arrow I added after the text and as @Flashman said to stretch this open. I kept the text central.
Ade
Thanks @PeteSharp - I appreciate the comment - thank you. I use this just to show companies a very basic event stream website. None of the companies on this website exist, so its all safe to use - I created the basic sponsors logos etc.
I will create this with sitelok fully in the background of it at somepoint, but many companies just ask for a basic lock out of one password gets them all in - just to keep it away from public, or to lock it from everyone during rehearsals etc.
Its a sub domain of my viewlive website, which is basically a white table, website which if a client wants a quick 1 day website set up for a live stream but do not want to mess around with paying for a domain , i just create it on a as a sub domain - use it and bin it!
It’s still early plans of my new ventures.
1 Like
Thank you! I will keep this in my back pocket for future projects!