Create Accordion for Main Category on Homepage

[Wei Hong]

Dear Flynax Family,

I'm using general wide and I want to create a accordion for the main categories box show in screenshot asas.jpg

So it will show a button and user click on it it show the category box, I looked on google and found this method but I dont know how to apply it, I tried to test on content.tpl, blocks_manager.tpl but no luck.
https://www.w3schools.com/howto/tryi...cordion_symbol

Can someone knowledgeable with this help me out. I would really appreciate it.

[Rudi]

Hello Wei Hong,

Go to ftp > templates > tpl > blocks > categories_block.tpl

change:

Only registered members can view the code.

to:

Only registered members can view the code.

and:

Only registered members can view the code.

to:

Only registered members can view the code.

then insert at the bottom of the file that js code:

Only registered members can view the code.

and insert css styles to css > style.css (without <style> tag)

[Wei Hong]

Thanks Rudi for your reply. But I want the whole box of all category (that I circle in red dot in screenshot above) to be collapsed, not just individual. Then there is a text

[ Click here to see all available category ]

When click on it, all of the categories show like in screenshot on my 1st post.

[Rudi]

In this case you can use a default accordeon controller for fieldset containers:

add before the first <div> the following tpl:

Only registered members can view the code.

and after this div:

Only registered members can view the code.

then go to style.css

and find the following styles:

Only registered members can view the code.

and change them to:

Only registered members can view the code.

[Wei Hong]

Thanks Rudi, it works great. Is there any way if I want to make the accordion collapsed by default?

[Rudi]

use hide=true or hide=false after name='YOUR_HEADER_TITLE' to set a default state for category box

you're welcome

[Wei Hong]

Thank you very much Rudi, have a good weekend