Looking to enhance user experience by optimizing menu functionality. Upon the initial click of the menu button, I aim to display only the menu headings. Subsequently, clicking on a specific heading would reveal its associated category content.
How can this be achieved?
Below is my HTML structure:
<div class="container-fluid dropdown_menu" style="display: none;">
<div class="row">
<div class="col-sm-3 menu_column">
<div class="row ">
<div class="col-xs-12 menu_head">
<h2> Health Centers </h2></div>
</div>
<div class="row">
<div class="col-xs-12">
<hr class="menu_head_divider">
</div>
</div>
<div class="row" id="menu_content">
<div class="col-xs-12">
<ul class="list-unstyled">
<li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item">Hospitals </span> </a> </li>
<li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item">Diagnostics </span> </a> </li>
<li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item">Clinics </span> </a> </li>
<li><a href="#"><image src="images/List/hospital_icon_menu.png"/> <span class="menu_list_item">Alternative Health Care </span> </a> </li>
</ul>
</div>
</div>
</div>
<div class="col-sm-3 menu_column">
[Content for second column]
</div>
<div class="col-sm-3 menu_column">
[Content for third column]
</div>
<div class="col-sm-3 menu_column" style="border: none;">
[Content for fourth column]
</div>
</div>
</div>
Furthermore, here is the jQuery snippet used:
$(document).ready(function () {
$("#menu").click(function () {
$(".dropdown_menu").toggle();
$(".menu_content").css("display", "none");
});
});