Sections ignore toggle with animation-CodePudding

I did some research on the internet and used it to create a section with animation. If you click on one of the 3 section headers, a sectionText appears under the header. I also made a toggle for this but it only works if you do it with display. I am really desperate what to do because it doesn't work with the animation but with display it does. What have I done wrong?

Here is the code I made:

var section = document.getElementsByClassName("section");
var i;

for (i = 0; i < section.length; i  ) {
  section[i].addEventListener("click", function() {
    var sectionText = this.nextElementSibling;
    if (sectionText.style.left = "-100%") {
      sectionText.style.left = "0%";
      sectionText.style.opacity = "1";
    } else {
      sectionText.style.left = "-100%";
      sectionText.style.opacity = "0";
    } 
  });
}

* {
  margin: 0;
  padding: 0;
}

.section {
  background: #000;
  color: #fff;
  cursor: pointer;
  padding: 15px;
  width: 100%;
  border: none;
  text-align: left;
  font-size: 15px;
}

.sectionText {
  padding: 10px;
  overflow: hidden;
  position: relative;
  left: -100%;
  transition: 0.2s ease-out;
  opacity: 0;
  background: #f2f2f2;
}

<button class="section">Header 1</button>
<div class="sectionText">
  <p>Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text </p>
</div>

<button class="section">Header 2</button>
<div class="sectionText">
  <p>Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text</p>
</div>

<button class="section">Header 3</button>
<div class="sectionText">
  <p>Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text </p>
</div>

CodePudding user response：

Use === instead of = in the if

Also switch this:

if (sectionText.style.left === "-100%") {
      sectionText.style.left = "0%";
      sectionText.style.opacity = "1";
    } else {
      sectionText.style.left = "-100%";
      sectionText.style.opacity = "0";
}

with this:

if (sectionText.style.left === "0%") {
      sectionText.style.left = "-100%";
      sectionText.style.opacity = "0";
    } else {
      sectionText.style.left = "0%";
      sectionText.style.opacity = "1";
    }

so you can toggle it by the first click.

Here's the code:

var section = document.getElementsByClassName("section");
var i;

for (i = 0; i < section.length; i  ) {
  section[i].addEventListener("click", function() {
    var sectionText = this.nextElementSibling;
    if (sectionText.style.left === "0%") {
      sectionText.style.left = "-100%";
      sectionText.style.opacity = "0";
    } else {
      sectionText.style.left = "0%";
      sectionText.style.opacity = "1";
    } 
  });
}

* {
  margin: 0;
  padding: 0;
}

.section {
  background: #000;
  color: #fff;
  cursor: pointer;
  padding: 15px;
  width: 100%;
  border: none;
  text-align: left;
  font-size: 15px;
}

.sectionText {
  padding: 10px;
  overflow: hidden;
  position: relative;
  left: -100%;
  transition: 0.2s ease-out;
  opacity: 0;
  background: #f2f2f2;
}

<button class="section">Header 1</button>
<div class="sectionText">
  <p>Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text </p>
</div>

<button class="section">Header 2</button>
<div class="sectionText">
  <p>Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text</p>
</div>

<button class="section">Header 3</button>
<div class="sectionText">
  <p>Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text Some Random Text </p>
</div>