Necesito una solución para alternar entre divs. Tengo una barra lateral con un grupo de botones. Cuando entro a la página con la barra lateral solo quiero que me aparezca el div con el grupo de botones, pero cuando presiono por ejemplo Info quiero que aparezca el div info y desaparezcan los demás div, y cuando presiono el botón atrás en el Info div Nuevamente solo quiero que aparezca el grupo de botones.
.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>Le falta el identificador de identificación en su función .click . Si desea ocultar el div de información en la carga de la página, asegúrese de configurarlo para que no muestre ninguno, luego agregue otro controlador de eventos para el #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>