Looking to design a user-friendly restaurant menu with categorized buttons that reveal information when clicked. The goal is to display one category at a time, so when a new button is pressed, the previous category disappears.
Struggling to find a solution for this functionality. Tried using an accordion layout, but it doesn't quite meet my needs.
Here's a snippet of what I have so far (menu details are incomplete):
<p>
<div class="container"><div class="row justify-content-center">
<a class="btn btn-primary mt-3 ml-1 mr-1" data-toggle="collapse" href="#omelet" role="button" aria-expanded="false" aria-controls="omelet">Omelets — Proven Favorites!</a>
<button class="btn btn-primary mt-3 ml-1 mr-1" type="button" data-toggle="collapse" data-target="#favorites" aria-expanded="false" aria-controls="favorites">Favorites of Our Regulars</button>
<button class="btn btn-primary mt-3 ml-1 mr-1" type="button" data-toggle="collapse" data-target="#eggCombo" aria-expanded="false" aria-controls="eggCombo">Egg Combinations</button>
</div></div>
</p>
<div class="row">
<div class="">
<div class="collapse multi-collapse" id="omelet">
<div class="card card-body">
<div>
<b>Cheese Omelet</b> — Choice of Jack, Cheddar, Swiss, Cream Cheese or Bleu Cheese
</div>
<div>
<b>Turkey, Spinach, Onion, & Cheese Omelet</b><br>
</div>
<div>
<b>Mushroom & Cheese Omelet</b>
</div>
<div>
<b>Chili Cheese Omelet</b>
</div>
<div>
<b>Veggie & Cheese Omelet</b> — Sautéed Mushrooms, Onions, Green Peppes, Zucchini, & Spinach
</div>
<div>
<b>Avocado, Cream Cheese & Chive Omelet</b>
</div>
<div>
<b>Mexican Cheese Omelet</b> — Chorizo, Mushrooms, Onions, Green Peppers, Zucchini, & Jack Cheese
</div>
<div>
<b>Spinach, Mushroom & Cheese Omelet</b> — Hugh & Jean Special
</div>
</div>
</div>
</div>
<div class="">
<div class="collapse multi-collapse" id="favorites">
<div class="card card-body">
<b>André's Suggestions</b> — 1 biscuit & sausage gravy with 2 eggs & 2 strips of bacon; OR 1 biscuit & veggie gravy with extra veggies & fruit<br>
<b>Whoopie's Breakfast</b> — 2 eggs any style, bacon, potatoes, toast, and large orange juice<br>
<b>Nova's Favorite</b> — Spinach, eggs, and cheese scrumptiously scrambled and served with fruit, tortillas, small fresh squeezed O.J. and lots of salsa<br>
<b>Bob's High Carbohydrate Runner's Breakfast</b> — 1 high protein pancake, 2 eggs any style, and potatoes<br>
<b>Lily's Special</b> — Bowl of rice & cheese, small fruit plate, muffin<br>
<b>Laura's Regular</b> — 1/2 raisin bread French toast, 2 strips of bacon, 1 egg<br>
<b>Damian's Breakfast Burrito</b> — 2 eggs scrambled with salsa, avocado, and cheese, rolled in a tortilla, topped with sour cream and served with potatoes<br>
<b>Dick's Diet Delight</b> — 2 eggs poached on an English muffin, seasonal fruit or small O.J.<br>
<b>John's Special</b> — Granola with seasonal fruit and muffin; OR oatmeal with seasonal fruit and muffin<br>
</div>
</div>
</div>
<div class="">
<div class="collapse multi-collapse" id="eggCombo">
<div class="card card-body">
<div>1 egg any style</div>
<div>2 eggs any style</div>
<div>2 eggs, 2 strips of Bacon</div>
<div>2 eggs, 4 strips of bacon</div>
<div>2 eggs, sausage</div>
<div>2 eggs Ham <i>PJ's Fave</i></div>
<div>2 eggs, turkey</div>
<div>2 eggs, hamburger patty</div>
<div>2 eggs, corned beef hash</div>
<div>Huevos rancheros</div>
<div>Rudy's Huevos Rancheros <i>Chorizo, beans, & green chilies</i></div>
</div>
</div>
</div>
</div>
In order to only display the last card associated with the button that was pressed, utilizing Bootstrap4, how can I make this work?