CODEWITHSUNDEEP
javascripthtmljquerycsstoggle
user17637519
user17637519

Reputation: 31

Toggle between different divs

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>

Upvotes: 0

Views: 508

Answers (1)

BeerusDev
BeerusDev

Reputation: 1519

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 &amp; 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>

Upvotes: 1

Related Questions