I have two divs. One displays configure wifi and other displays status. What is happening is that, when I click on the navbar button it shows the Wific configure div and if I click it again it hides it.
and if I click the second button show status div, it shows the status along witht he configure wifi div. then I have to click either of the button for what I do not want to see.
what I want to acheive just using css and html of what I have attempted is to toggle between divs when respective button is clicked in nav bar.
.toggle-content {
display: none;
}
.toggle-content.is-visible {
display: block;
}
html {
font-family: Arial;
display: inline-block;
margin: 0px auto;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
font-size: 1.0rem;
text-align: center;
padding: 14px 26px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.center {
margin: auto;
border-style: groove;
padding: 10px;
}
h2 {
font-size: 1.0rem;
}
p,
{
font-size: 3.0rem;
}
.units {
font-size: 1.2rem;
}
</style><ul>
<li><a class="toggle active" href="#wifisetup">Configure Wifi</a></li>
<li><a class="toggle" href="#PotsStatus">Show Status</a></li>
</ul>
<div class="toggle-content" id="wifisetup" style="display:visible; font-size:18px;">
<h2>Connect to a Wifi Network!</h2>
<label for="wifi">Choose ssid:</label>
<select name="wifi" id="ssid">
</select><br>
<label for="wifi" id="pass_lbl">Enter password:</label>
<input type="password" id="pass"></input>
<br><br>
<input type="button" value="Rescan">
<button id="button_save" class="button_wifi" onclick="update()">Connect</button>
</div>
<br>
<div id="PotsStatus" class="toggle-content" style="font-size:14px;">
</div>I want to be able to toggle between the two divs not toggle on off by clicking the same button in navbar twice though even if it exists its ok but when I choose show status the configure wifi div should hide.
