Accordion not working as expected when placed inside my container

Question

I have created an accordion from w3schools example. It is working as expected when I keep it separate. But when I place it with other inputs it is working as button only. The content of the accordion just flashes when I click the accordion button. My complete code::

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

.advance-search {
  background: #fff;
  padding: 40px 15px 25px 15px;
  border-radius: 3px;
  margin-bottom: -50px;
  box-shadow: -1px 3px 6px rgba(0, 0, 0, 0.12);
}


@media (min-width: 1200px) {
  .container {
    max-width: 1140px;

  }
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}


.align-content-center {
  -ms-flex-line-pack: center !important;

  align-content: center !important;

}

@media (min-width: 992px) {
  .col-lg-12 {
    -ms-flex: 0 0 100%;

    flex: 0 0 100%;

    max-width: 100%;

  }
}

.form-row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}

.form-row>.col,
.form-row>[class*="col-"] {
  padding-right: 5px;
  padding-left: 5px;
}

.form-group {
  margin-bottom: 1rem;
}

.form-control {
  border-radius: 2px;
  height: 50px;
  background-color: transparent;
  color: #666;
  box-shadow: none;
  font-size: 15px;
}

.btn {
  font-size: 15px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 15px 30px;
  border-radius: 4px;
}

.w-100 {
  width: 100% !important;
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active,
.accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">


<div class="container mt-3">
  <h2>Basic Card</h2>

  <div class="advance-search">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-12 col-md-12 align-content-center">
          <form>
            <div class="form-row">
              <div class="form-group col-xl-4 col-lg-3 col-md-6">
                <input type="text" class="form-control my-2 my-lg-1" id="inputtext4" placeholder="What are you looking for">
              </div>
              <div class="form-group col-lg-3 col-md-6">
                <select class="w-100 form-control mt-lg-1 mt-md-2">
                  <option>Category</option>
                  <option value="1">Top rated</option>
                  <option value="2">Lowest Price</option>
                  <option value="4">Highest Price</option>
                </select>
              </div>
              <div class="form-group col-lg-3 col-md-6">
                <button class="accordion ">Section 1</button>
                <div class="panel">
                  <p>Lorem ipsum</p>
                </div>
              </div>
              <div class="form-group col-lg-3 col-md-6">
                <input type="text" class="form-control my-2 my-lg-1" id="inputLocation4" placeholder="Location">
              </div>
              <div class="form-group col-xl-2 col-lg-3 col-md-6 align-self-center">
                <button type="submit" class="btn btn-primary active w-100">Search Now</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

</div>
<br><br><br>
<div class="container mt-3">
  <br>
  <div class="form-group col-lg-3 col-md-6">
    <button class="accordion form-control">Section 1</button>
    <div class="panel">
      <p>Lorem ipsum </p>
    </div>
  </div>
</div>

Navid Abedini · Accepted Answer · 2025-07-11 15:46:14Z

4

The accordion button inside the form acts like a submit button by default. So when you click it, the form submits (or page reloads), and the accordion content only shows briefly. Because the button’s default type inside a form is submit.
Add type="button" to the accordion button to prevent form submission.

<button type="button" class="accordion">Section 1</button>

answered Jul 11 at 15:46

Navid Abedini

6211 gold badge4 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

nischalinn Jul 12 at 6:20

hello, can you please check this once:: stackoverflow.com/questions/79699046/…

Navid Abedini Jul 12 at 9:23

Hello, I would be glad to check it for you; however, the link you provided is not accessible. It shows the following message: Page not found — This question was voluntarily removed by its author. @nischalinn

nischalinn Jul 12 at 12:02

I solved the problem, so removed the post. Thank you for your concern. Can you look into this post please, stackoverflow.com/questions/79699248/…

Collectives™ on Stack Overflow

Accordion not working as expected when placed inside my container

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related