CODEWITHSUNDEEP
javascripthtmlcssjquery-selectors
Ren
Ren

Reputation: 1

How do I make a toggle Panel not be open by default? the toggle is made on JavaScript within the HTML

So I've got a page in which the user can find a "?" toggle to read information on how to use the page. However, whenever the page loads (or reloads/refreshes) the toggle panel opens up (as if open was its natural state), and only closes until the user clicks on the toggle (which, when the panel is open, turns into an "X").

How do I make it so the natural state of the panel is closed?

document.querySelector(".panel-toggle").addEventListener("click", () => {
  document.querySelector(".panel-wrap").classList.toggle("panel-open");
});
.panel-wrap {
  display: flex;
  height: 80vh;
  margin-left: -20px;
  margin-top: 10px;
  position: fixed;
  z-index: 9999;
}

.panel-toggle {
  margin-top: 150px;
  width: 50px;
  height: 90px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background-color: #225b4e;
  border-radius: 0 5px 5px 0;
  border: none;
  outline: none;
  cursor: pointer;
}

.panel-open .panel-contenido {
  display: initial;
}

.panel-open .toggle-open {
  display: none !important;
}

.panel-open .toggle-close {
  display: initial !important;
}
<div class="panel-wrap">
  <div class="panel-contenido">
    <p class="titulo">INFORMATION</p>
    <p><span class="subtitle">Info</span> that is important.</p>
  </div>

  <button class="panel-toggle" type="button">
    <img class="toggle-open" width="30" height="30" src="https://www.svgrepo.com/show/126178/question-mark.svg" alt="?" />
    <img class="toggle-close" width="25" height="25" src="https://www.svgrepo.com/show/12848/x-symbol.svg" alt="x" />
  </button>
</div>

Upvotes: -1

Views: 45

Answers (1)

IT goldman
IT goldman

Reputation: 19485

Add the class .panel-open to the .panel-wrap element. After all this what the toggle button toggles.

<div class="panel-wrap panel-open">
  <div class="panel-contenido">
    <p class="titulo">INFORMATION</p>
    <p><span class="subtitle">Info</span> that is important.</p>
  </div>

  <button class="panel-toggle" type="button">
    <img class="toggle-open" width="30" height="30" src="https://www.svgrepo.com/show/126178/question-mark.svg" alt="?" />
    <img class="toggle-close" width="25" height="25" src="https://www.svgrepo.com/show/12848/x-symbol.svg" alt="x" />
  </button>
</div>

Upvotes: 0

Related Questions