I would appreciate some guidance on which direction to take regarding a front-end design.
Context:
I am trying to create a page where I have 10 buttons on a top panel. Underneath this top panel will be a main panel containing N boxes of text.
Depending on what button in the top panel is clicked or active (default-button1), I want the boxes in the main panel to display the relevant boxes of text.
Example:
A restaurant menu where you have categories such as Food, Drinks, Desserts at the top. And a section which updates and shows the various options dependent on which category has been selected.
A minimal example:
3 buttons or links as Category1, Category2, Category3
Category1 should have 5 paragraphs. Category2 should have 3 paragaraphs. Category3 should have 8 paragraphs.
I am looking for an efficient way to implement this. Any pointers?
I understand the DOM allows one to dynamically render HTML using the call below, but I am confused as to how to 'grow' elements with this static approach. I am determined to learn more JavaScript.
document.getElementsByClassName(“”).innerHTML = "New text"
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div class = "main_content">
<nav>
<ul id = "categories">
<li>Cat 1</a></li>
<li>Cat 2</li>
<li>Cat 3</li>
</ul>
</nav>
<article class = "items_list">
<section class ="items">
<!--# of <p> elements and inner HTML text for each element depends on which <li> element is currently active -->
<p>Item A</p>
</section>
<section class = "items">
<p>Item B</p>
</section>
<section class = "items">
<p>Item C</p>
</section>
</article>
</div>
</body>
</html>
For every Category/Button you need to add Event Handler which will trigger a function on the event of onClick. Then according to your requirements, you can add and remove classes on paragraphs which will let you show and hide them.
Those classes can simply have display:none or display:block on it.