How toggle nav bar visibility?

Question

I'm a beginner in javascript. I want to add hide and show button using toggle methods. Here is my html.

<body>
  <header>
    <li><a href="#">Mécanique</a>
      <ul class="sub-menu">
        <li><a href="#">Mécanique du point</a></li>
        <li><a href="#">Mécanique du solide</a></li>
      </ul>
    </li>

  </header>
</body>

I promise you now, Google ‘jQuery hide show nav’ and you will be greeted with the most awesome answer :-) — David, Sep 03 '18 at 20:13
take a look on this video on YT https://www.youtube.com/watch?v=CPvZzJlUz20 — Alvaro Alves, Sep 03 '18 at 20:15
@moradov um.. where's the 'button' that you want to toggle? .. (you don't need a button to toggle the menu, but try and be specific with your questions..) — Rachel Gallen, Sep 03 '18 at 20:23
Possible duplicate of [toggle show/hide div with button?](https://stackoverflow.com/questions/4528085/toggle-show-hide-div-with-button) — Son Truong, Sep 04 '18 at 01:23

score 0 · Accepted Answer · answered Sep 03 '18 at 20:39

Learn how things work before you ask a question here at StackOverflow. We all still learning, but, we have to try things ourselves.

Besides that, here's how to use jQuery to hide/show .sub-menu by clicking the a tag that contains 'Mécanique' word, and I'll give it an ID so we can reference it later by JavaScript.

// we put everything in the document.ready handler to ensure that the document has finished loading.
$(document).ready(function() {
  // reference the 'a' tag that I gave it an id of 'trigger', and also referencing the .sub-menu ul.
  var trigger = $('#trigger'),
    menu = $('.sub-menu');
  // adding the event listener to the #trigger to hide/show the .sub-menu ul.
  trigger.on('click', function(e) {
    // cancel the default behaviour when clicking a link.
    e.preventDefault();
    // hide/show the menu.
    menu.toggle();
  });  
});

ul.sub-menu {
  // by default, let's make the .sub-menu ul hidden.
  display: none;
}

    <body>
      <header>
        <li><a href="#" id="trigger">Mécanique</a>
          <ul class="sub-menu">
            <li><a href="#">Mécanique du point</a></li>
            <li><a href="#">Mécanique du solide</a></li>
          </ul>
        </li>

      </header>
      <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
    </body>

Hope I pushed you further.

How toggle nav bar visibility?

1 Answers1