New mystery: unexpected link behaviour in prebuilt FAQ bloc

After adding a prebuilt FAQ bloc I edited the answer by removing the .collapse class from the paragraph text. My text included links to examples of other websites, so I created links to those to open in a new tab. Everything looks to be correct but after I preview/publish, click on the FAQ to expand it, then click on the url link, all that happens is the question box collapses again.
I’ve replicated the problem outside of my project. Please see attached.
FAQ_links_question.bloc (156.8 KB)

Stretched link works on a pseudo level, so the parent element needs a position: relative set or it won’t work correctly.

So in your case everything in the white box becomes the faq link.

Solve this by: on .faq-10-question add position: relative.


I would suggest using the accordion bric and styling it.

——

Note: A lot of Bootstrap elements already have position relative applied, so in many cases you do not have to do this, but in your case… yes.

More info here

1 Like

Hi Ricardo,

This bloc works like this by design, because I made the whole DIV clickable to open and close. If you check the class faq-10-box, it already has the position set to relative.

As Pete suggested, you can also set the position to relative for the .faq-10-question class, but keep in mind that it will limit the clickable area around the question. If you plan on using links in the answer, I think it is a good option for you.

By the way, make sure you are using the Minimalist Library Starter Template, because it includes the settings and code needed for the animated + sign to work properly.

Cheers,
Eldar

1 Like

Just change the structure slightly and have the best of both worlds.

I didn’t realise it was part of your library, I actually didn’t read the text. :smiley: Should have spotted it.

1 Like

I have bunch of FAQ sections with different structures (including using the customized accordion bric, etc), and I wanted this one to be exactly like that.

That being said, I will probably create a few other versions using different layouts but with this design.

2 Likes

Hey, @RobertF,

I recently developed a Frequently Asked Questions (FAQ) section. Please let me know if it aligns with what you’re seeking. It also manages links efficiently.

Small Potato Ltd - 2024

3 Likes

Thanks everyone. Very useful, and a few options to choose from. I’ll pick up on this and update this thread with which way I go soon.

Links and bouncing cats, what an age we live in. :rofl:

2 Likes

A little respect for the rulers of the world would be appreciated :joy:

1 Like

Having had 6 cats over the years…………

……………I now have a dog!

2 Likes

Hi Eldar, on this point I want to check something:
The site I’m working on was started before I upgraded to Blocs Master. After upgrading I decided to update the FAQ section from the Minimalist library which I was able to browse to and select from the Blocs menu. Although I could do this are you saying this is an option I should avoid in future, whenever the template in play is not the Minimalist Library starter template?
Thanks

I didn’t have much luck with the accordion styling unfortunately, so I used codepen and searched for FAQ to get a general style and the base code, then added a code widget and edited and styled it from there and I have to say, works wonders for me.

Hi Robert,

You can use the sections from the library in any project, but for the best experience, I do recommend to use the Minimalist Starter template. It comes with custom classes, custom code, and some global settings for typography and colors.

1 Like

Blocs uses a card instead of the Bootstrap markup as documented, So it’s missing the animated chevrons that will appear by default, and some other things like the full header being the toggle trigger, and active headers which is native to BS. Not to mention it’s using anchors and not button tags. It would be a lot easier if it was following the BS docs.

1 Like

My Faq Bloc can be downloaded for free. More info here:

1 Like

Thanks, understood.

Hi Jerry, I’ve just installed Smooth Component Premium. Js script is linked, and css added after stripping out all the backslashes. I’m very pleased with how it looks and it resolves the link problem initially encounted.

I’ve been trying to work out how to modify the CSS so that the initial state of the FAQ item is collapsed. After searching W3Schools I tried setting pointer-event which was currently ‘none’ to ‘auto’ but that didn’t work. Hum…Is it the code or script I modify, and what do I need to change?

Just change the CSS provided.