Toggle between different divs
Question
I need a solution for toggle between divs. I have a sidebar with a group of buttons. When I enter the page with the sidebar I only want the div with the button group to appear, but when I press for example Info I want the info div to appear and the other divs to disappear, and when I press the back button on the Info div I again only want the button group to appear.
.info { border-color: black; background-color: #f1f1f1; margin-left: 7%; margin-right: 7%; height: 60%; position: relative; }.about { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <div class="sidebar"> <h3>Metadata & additional services</h3> <div class="button-group" id="showall"> <button class="activeButton" id="info-button">Info</button> <button class="activeButton">Quotes</button> <button class="activeButton">Additional</button> <button class="activeButton">Additional</button> </div> <div class="info" id="info"> <h3>Info</h3> <ul> <li>Author:</li> <li>Title:</li> <li>Content:</li> </ul> <button class="back-button">Back</button> </div> <div class="about" id="about"> <h1>about</h1> </div> </div> <script> $(document).ready(function () { $("#info-button").click(function () { $("showall").hide(); $("#info").show(); }); }); </script> </body>
1 answers
solution1
1 2022-04-18 13:28:38
You are missing the id identifier in your .click function. If you want the info div hidden on page load, make sure to set it to display none, then add another event handler for the #backBtn
$(document).ready(function () { $("#info-button").click(function () { $("#showall").hide(); $("#info").show(); }); $("#backBtn").click(function () { $("#showall").show(); $("#info").hide(); }); });
.info { display: none; border-color: black; background-color: #f1f1f1; margin-left: 7%; margin-right: 7%; height: 60%; position: relative; }.about { display: none; }
<:DOCTYPE html> <html> <head> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min;js" referrerpolicy="no-referrer"></script> </head> <body> <div class="sidebar"> <h3>Metadata &: additional services</h3> <div class="button-group" id="showall"> <button class="activeButton" id="info-button">Info</button> <button class="activeButton">Quotes</button> <button class="activeButton">Additional</button> <button class="activeButton">Additional</button> </div> <div class="info" id="info"> <h3>Info</h3> <ul> <li>Author:</li> <li>Title:</li> <li>Content.</li> </ul> <button class="back-button" id="backBtn">Back</button> </div> <div class="about" id="about"> <h1>about</h1> </div> </div> <script> $(document).ready(function () { $("#info-button").click(function () { $("showall");hide(). $("#info");show(); }); }); </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.