Simple FAQ workaround for those in need.

[the.rampage.rado]

Here's a simple and short guide to make a simple accordion style FAQ section using HMTL5 and few rows of CSS. Not the perfect solution but a workaround for those waiting to find it.

https://www.stechies.com/create-accordion-html-without-javascript/


I combined it with section headers using h2 as title for the sections and it looks pretty fine. It's a simple list, but it's working on all modern browsers and very easy to implement.

Adaptation:

Put the custom CSS in Thirtybees' Custom Code section or your theme's custom CSS code field (Warehouse has one). If you have a theme solution go with it, as it will combine the custom rules with the main css file and not embed them in the html. Adjust to your liking.

details {
    border: 1px solid #d4d4d4;    
    padding: .75em .75em 0;
	margin-top: 10px;
	box-shadow:0 0 20px #d4d4d4;
}

summary {	
    font-weight: bold;
    margin: -.75em -.75em 0;
    padding: .75em;
    background-color: #5f75a4;
    color: #fff;
}

details[open] {
    padding: .75em;
	border-bottom: 1px solid #d4d4d4;
}

details[open] summary {
    border-bottom: 1px solid #d4d4d4;
    margin-bottom: 10px;
}

Open a text editor as Notepad++ and format your html code for your CMS page there. Every Q&A is a separate <details></details> tag.
When you're done with your code go to tinymce's source code editor and paste your code.

Using the usual WYSIWYG editor does not work (you can edit the text after you imported the source but you can't make the element).

EDIT: HTML purifier might have to be disabled in order to save this correctly in TinyMCE, but if you don't make daily changes in this page this could enabled after the page is complete.

The only fault is that this workaround is not using .js and when you open new question, the already opened one does not close. But for its simplicity and robustness it's a solid solution for me, no bootstrap shenanigans, etc.

 

	<details>
		<summary>Question 1</summary>
		Answer 1
	</details>
	<details>
		<summary>Question 2</summary>
		Answer 2
	</details>

[Beeta]

27 minutes ago, the.rampage.rado said:

Here's a simple and short guide to make a simple accordion style FAQ section using HMTL5 and few rows of CSS. Not the perfect solution but a workaround for those waiting to find it.

https://www.stechies.com/create-accordion-html-without-javascript/


I combined it with section headers using h2 as title for the sections and it looks pretty fine. It's a simple list, but it's working on all modern browsers and very easy to implement.

Adaptation:

Put the custom CSS in Thirtybees' Custom Code section or your theme's custom CSS code field (Warehouse has one). If you have a theme solution go with it, as it will combine the custom rules with the main css file and not embed them in the html. Adjust to your liking.

details {
    border: 1px solid #d4d4d4;    
    padding: .75em .75em 0;
	margin-top: 10px;
	box-shadow:0 0 20px #d4d4d4;
}

summary {	
    font-weight: bold;
    margin: -.75em -.75em 0;
    padding: .75em;
    background-color: #5f75a4;
    color: #fff;
}

details[open] {
    padding: .75em;
	border-bottom: 1px solid #d4d4d4;
}

details[open] summary {
    border-bottom: 1px solid #d4d4d4;
    margin-bottom: 10px;
}

Open a text editor as Notepad++ and format your html code for your CMS page there. Every Q&A is a separate <details></details> tag.
When you're done with your code go to tinymce's source code editor and paste your code.

Using the usual WYSIWYG editor does not work (you can edit the text after you imported the source but you can't make the element).

The only fault is that this workaround is not using .js and when you one new question, the already opened one does not close. But for its simplicity and robustness it's a solid solution for me, no bootstrap shenanigans, etc.

 

	<details>
		<summary>Question 1</summary>
		Answer 1
	</details>
	<details>
		<summary>Question 2</summary>
		Answer 2
	</details>

In my case is not working, it continue to change the html to

<p></p>
<p>Accordion One Body Content 1 Accordion Two Body Content 2</p>
<p></p>

after I save the cms article

p.s. I think this topic have to be moved to Tips and Tricks forum as in this forum the replies are answers.

[the.rampage.rado]

Do you have this turned on?



Yes, I'll move it there. Thanks for the suggestion!

[Beeta]

yes it was activated

I deactivated it and re-paste it and now it's working, thank you

Isn't this dangerous? now it's contact form fields are not purified?

Edited July 22, 2023 by Beeta

[the.rampage.rado]

Yes, but you could disable it only when you edit this CMS page then reenable it?

 

TinyMCE is driving me nuts, on each save it puts more and more blank paragraphs...