-1

I was using this code to create a collapsible in my Cart Drawer but after de Ajax call, the collapsible stops working. Does anyone know how I can fix this?

Note: I've added onclick="return false;" in the button because it would otherwise redirect to the cart page on click.

var coll = document.getElementsByClassName("collapsibletest");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("activetest");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
.collapsibletest {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.activetest, .collapsibletest:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}
<button type="button" class="collapsible" onclick="return false;">Open Collapsible</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
Maurice
  • 11
  • 2

1 Answers1

0

Remove onclick="return false;" and put event.preventDefault() at the beginning of your on-click EventListener function.

More info: When to use PreventDefault( ) vs Return false?

var coll = document.getElementsByClassName("collapsibletest");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function (event) {
    event.preventDefault(); // use this to prevent redirecting

    this.classList.toggle("activetest");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
.collapsibletest {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.activetest,
.collapsibletest:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}
<button type="button" class="collapsibletest">
      Open Collapsible
    </button>
    <div class="content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat.
      </p>
    </div>
DVN-Anakin
  • 1,549
  • 1
  • 8
  • 12
  • This didn't work on the redirect. It's still redirecting to the cart page when implementing your fix. – Maurice Sep 07 '21 at 10:03
  • Can you put `console.log('Coll', coll.length);` inside your script and refresh the page, see if the console outputs anything else than `0`. If you get `0` then it means your script executes before the page loads thus, you are not assigning the event listener. If that is the case, you have to put your Javascript after your form. – DVN-Anakin Sep 07 '21 at 11:47
  • Coll is returning a "1" – Maurice Sep 08 '21 at 09:51