There is a link a(href= "javascript://0" onclick = "hidden ()") , and the function itself

 function hidden () { $('.site-nav__menu-item--hidden').toggleClass('.site-nav__menu-item--visible'); };

There is an object that can change its properties by clicking on this link (by adding / removing a new class that can override these properties)

 .site-nav__menu-item--hidden{ display: none; } .site-nav__menu-item--visible{ display: inline-block; }

Why doesn't the script work?

  • one
    toggleClass already knows that you are adding or removing a class, respectively, "." no need to bet. In your example, the class ".site-nav__menu-item-visible" is added, and you need "site-nav__menu-item-visible". In general, remove the point. - DemoGosha
  • Thank you, did not know! - Vladislav Stas

1 answer 1

You can do this:

 function hide() { $('.block').toggleClass('site-nav__menu-item--visible site-nav__menu-item--hidden'); }; 
 .site-nav__menu-item--hidden{ display: none; } .site-nav__menu-item--visible{ display: inline-block; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="block site-nav__menu-item--hidden">Block</div> <button id="toggleBlock" onclick="hide()">click</button>