Looking for a way to toggle between different divs? Here's the scenario: You have a sidebar with a set of buttons. Upon entering the page, you only want the div containing the button group to be visible. However, when a specific button (e.g. Info) is clicked, you want the corresponding div (info) to appear while the others disappear. And if the back button on the Info div is pressed, you want to revert back to the initial state with only the button group visible.
.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>