非自举式可折叠导航栏

Question

I'm trying to set-up my code so that when I click a link with the id of "#toggleNav"

    <a href="#" id="toggleNav"><i class="fa fa-bars"></i></a>

It will add or remove the ".hidden" class of an element with an id of "#nav"

    <ul class="navbar navCollapse" id="nav">
      <span class="links">
        <a href="#">
          <li>Home</li>
        </a>
    ...

".hidden" class:

    *.hidden {
      display: none;
    }

So that it will act as a toggle on a navigation bar, but since I have this only on if the screen size is less than 600px, I would like it to default to .hidden ONLY if the screen is 599px or less, AND default to shown ONLY if the size is 600px or more.

If there's either an easier way to do it, or I need a plugin, I would be grateful for any responses that would help.

And I don't want to use any bootstrap or other frameworks - preferably just CSS or javascript, and maybe jQuery.

Thanks!

Answer 1

You can do this via css media queries, like so:

@media (max-width: 600px) {
  *.smhidden {
    display: none;
  }
}

Add this class to your element so that even when the .hidden class is gone, if the screen size is less than 600, the .smhidden class will still be hiding the element.

EDIT

You can set defaults via JavaScript by using:

var windowWidth = window.innerWidth;
if (windowWidth < 600) {
    $('#nav').addClass('hidden');
} 

Answer 2

I just found a way to do this, but I would rather not use two separate buttons.

    <span class="float-right">
        <a href="#" id="toggleNavShow"><i class="fa fa-bars"></i></a>
        <a href="#" id="toggleNavHide" class="hidden"><i class="fa 
        fa-bars"></i></a>
    </span>

And the repetitive js...

    $(document).ready(function(){
      $("#toggleNavShow").click(function(){
        $("#nav").show();
        $("#toggleNavShow").hide();
        $("#toggleNavHide").show();
      });
      $("#toggleNavHide").click(function(){
        $("#nav").hide();
        $("#toggleNavShow").show();
        $("#toggleNavHide").hide();
      });
   });

If there's a way to just use one button I'd love to know... I'm not all that experienced with js.