OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

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

  • Thread starter Thread starter Ren
  • Start date Start date
R

Ren

Guest
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?


Code:
document.querySelector(".panel-toggle").addEventListener("click", () => {
  document.querySelector(".panel-wrap").classList.toggle("panel-open");
});

Code:
.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;
}

Code:
<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>

<p>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").</p>
<p>How do I make it so the natural state of the panel is closed?</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>document.querySelector(".panel-toggle").addEventListener("click", () => {
document.querySelector(".panel-wrap").classList.toggle("panel-open");
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre>
</div>
</div>
</p>
 

Online statistics

Members online
0
Guests online
3
Total visitors
3
Top