NoName84 NoName84 - 1 month ago 6
Javascript Question

Very Simple Javascript Toggle Not Working

I am trying to create a simple toggle class using javascript but there is an issue with my code. Can someone let me know what the mistake is? Thanks.

HTML:

<div id="buttonOne">CLick Here One</div>
<div id="carouselOne">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi incidunt minus laudantium, tempora fuga expedita odit esse fugiat, quas vel debitis, quae dolorem dolores neque labore. Cumque placeat assumenda, mollitia!</p>
</div>


CSS:

#carouselOne {
display: none;
}

#buttonOne {
cursor: pointer;
}

.toggleHideShow {
display:block;
}


Javascript:

var btnOne = document.getElementById("buttonOne");

function functionOne() {
var carOne = document.getElementById("carouselOne");
if ( carOne.className == "" ) {
carOne.className = "toggleHideShow";
}else {
carOne.className = "";
}
}
btnOne.addEventListener("click", functionOne);

Answer

Try this:

var btnOne = document.getElementById("buttonOne");

function functionOne() {
  var carOne = document.getElementById("carouselOne");

  carOne.classList.toggle('hidden');
}

btnOne.addEventListener("click", functionOne);
.hidden {
  display: none;
}
<div id="buttonOne">CLick Here One</div>

<div id="carouselOne">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi incidunt minus laudantium, tempora fuga expedita odit esse fugiat, quas vel debitis, quae dolorem dolores neque labore. Cumque placeat assumenda, mollitia!</p>
</div>

Comments