jQuery toggleClass example

Toggle class name on click in jQuery

by adamovic

HTML

<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://www.numbeo.com/common/mmenu-light/mmenu-light.css" />
       <link rel="stylesheet" type="text/css" href="https://www.numbeo.com/common/style_mobile.css" />
       
</head>
<body>


<nav id="header_nav">
<div id="header">
<div class="logo-and-upper-ad">
<table class="header_table">
<tbody><tr>
<td style="vertical-align: top;">
<img src="https://www.numbeo.com/images/Menu1.svg" alt="" class="icon_menu3">
</td>
<td style="padding-left: 0.5em; padding-right: 0.5em; text-align: center;">
</td>
<td style="text-align: center; padding-left: 0.5em; padding-right: 0.5em; width: 100%;">
<nav style="display: flex; flex-direction: row; vertical-align: middle; width: 100%;">
      <form action="https://www.numbeo.com/common/dispatcher.jsp" method="get" id="menu_dispatch_form" class="dispatch_form_flex">
<span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input id="city_selector_menu_city_id" type="text" placeholder="Select City" class="ui-autocomplete-input city-selector-menu" name="city_selector_menu_city_id" style="flex: 1; margin-left: 0.5em; margin-right: 0.5em;" autocomplete="off">
<input type="hidden" id="menu_city_id" name="city_id">
<input type="hidden" id="name_menu_city_id" name="name_city_id">
      </form>
</nav>
</td>
</tr></tbody></table>
</div> <!-- logo-and-upper-ad -->
</div>
</nav>

<div style="background: yellow; display:  block; width: 100%; height: 1000px; display: block; margin-top: 40px;">
aaa
</div>
</body>

</html>

CSS

body {
  padding-top: 0em;
    padding-left: 0em;
    padding-right: 0em;
    padding-bottom: 1em;
    margin: 0;
}

.logo-and-upper-ad {
  background: #aaf;
  border: 2px solid #000;
}

#header_nav {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  height: 40px;
  z-index: 150;
}