nischalinn nischalinn - 4 months ago 40
ASP.NET (C#) Question

show/hide menu items on client click for free Adminiziolite template

I've downloaded a web template of Adminiziolite. I am trying to create a show/hide menu items on client click. How can I do this?

<div id="aside" class="box">

<div class="padding box">

<!-- Logo (Max. width = 200px) -->
<p id="logo">
<a href="#">
<img src="tmp/logo.gif" alt="Our logo" title="Visit Site" /></a>
</p>
</div>
<!-- /padding -->

<ul class="box">
<li><a href="OPDRegister.aspx">New Patient Register</a></li>
<li><a href="OldPatientRegistration.aspx">Old Patient Register</a></li>
<li><a href="DetailRegistration.aspx">Detail Patient Register</a></li>
<li id="submenu-active"><a href="#">Report</a>
<!-- Active -->
<ul>
<li><a href="#">New Patient Report</a></li>
<li><a href="#">Old Patient Report</a></li>
<li><a href="#">Detail Patient Report</a></li>
</ul>
</li>
</ul>
</div>


I am trying to show/hide the menu items under the Report Section. On Client Click, the report items should be displayed, how can i do this?

Answer

You can hide/show your sub menu adding the following JavaScript and inline CSS.

How does it work:

  • Hide sub menu item report (using inline css <ul style="display:none">).
  • Add an event listener (click) on your menu report.
  • When User click on menu report, check variable isMenuReportVisible.
  • If sub menu is not visible, make it visible, otherwise hide it.

var btnHide = document.getElementById('btnHide'),
  btnShow = document.getElementById('btnShow'),
  reportMenu = document.querySelector('#submenu-active > ul'),
  menuReport = document.querySelector('#submenu-active'),
  isMenuReportVisible = false;
menuReport.addEventListener('click', function(even) {
  if (!isMenuReportVisible) {
    reportMenu.style.display = '';
    isMenuReportVisible = true;
  } else {
    reportMenu.style.display = 'none';
    isMenuReportVisible = false;
  }
});
<div id="aside" class="box">

  <div class="padding box">

    <!-- Logo (Max. width = 200px) -->
    <p id="logo">
      <a href="#">
        <img src="tmp/logo.gif" alt="Our logo" title="Visit Site" /></a>
    </p>
  </div>
  <!-- /padding -->

  <ul class="box">
    <li><a href="OPDRegister.aspx">New Patient Register</a></li>
    <li><a href="OldPatientRegistration.aspx">Old Patient Register</a></li>
    <li><a href="DetailRegistration.aspx">Detail Patient Register</a></li>
    <li id="submenu-active"><a href="#">Report</a>
      <!-- Active -->
      <ul style="display:none">
        <li><a href="#">New Patient Report</a></li>
        <li><a href="#">Old Patient Report</a></li>
        <li><a href="#">Detail Patient Report</a></li>
      </ul>
    </li>
  </ul>
</div>