In-text Conditional Logic or Similar?

[selhost]

Does anyone know of an easy way/better option for having an in-text list expand to include additional sub options, like a form, when the user clicks a given hyperlink/word? More specifically, I need to add 30+ years of award history to a club's site. The achive will have two main categories with seven sub-categories each. The main categories do not contain award information, only the sub-categories do (or 14 awards for each year). I would like visitors to easily manuever/veiw information needed without having to navigate through a lot of different pages or have massive amounts of information to view at one time. Hope that makes sense.

I was thinking something like this:

2019 Results: Open | Youth
2018 Results: Open | Youth
2017 Results: Open | Youth

That could expand to something like this:
2019 Results: Open | Youth
National Standings
Standings by Zone
Quality Points
Quality Points by Zone
Herdsman
Top Points
2018 Results: Open | Youth
2017 Results: Open | Youth
2016 Results: Open | Youth
2015 Results: Open | Youth

Thanks for any help/tips you can give me!

[Victor Font]

You need to use an accordion. If you're using Gutenberg, you can use the Atomic Blocks accordion block.

If you're using the classic text editor, you'd have to enqueue the WordPress built-in jQuery accordion script and write your own custom HTML.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[selhost]

Thank you very much for the suggestions. Atomic Blocks seems pretty easy, but I can't locate an option for the expansion to yeild a different drop down for specific words in the title rather than just one expansion/drop down for the entire title. For example: if someone clicked on the word "Open" below, I would need the following dropdown with words that I could link to specific downloads or pages. Whereas if a visitor clicked "Youth," then I would need the same expansion/drop down to appear except the links would direct to Youth data and not Open (or adults).

2019 Results: Open | Youth
National Standings
Standings by Zone
Quality Points
Quality Points by Zone
Herdsman
Top Points

I guess the only other option if I'm limited to one expansion/drop down may be to have the 2019 Results be the title and then the dropdown contain the words Open and Youth, which could be hyperlinks?

2019 Results
National Standings: Open | Youth
Standings by Zone: Open | Youth
Quality Points: Open | Youth
Quality Points by Zone: Open | Youth
Herdsman: Open | Youth
Top PointsNational Standings: Open | Youth

Would you be able to share additional thoughts with me?

Thank you!!!

[selhost]

PS-is there a way to change the title background color to white instead of grey?

[Victor Font]

I'm not aware of any plugin that allows for 2 triggers for an accordion. You'll have to do this with custom code.

You didn't provide a link to your site, so to change the the color, use your browser's built-in inspection tool to examine the CSS of the element. Then, edit the style.css to make the change.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[selhost]

Thank you for your help! I apologize for not adding a link, but I had just started working on the website and it wasn't live at the time. Thanks again!

[Author]

Posts