[SOLVED] accordion only working as button inside container class but working as expected outside

accordion only working as button inside container class but working as expected outside

I have created a accordion from w3school 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 are just flashed when I click the accordion button. My complete code::

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
  
  <style>
  .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;
}
  </style>
</head>
<body>

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


    <script type="text/javascript">
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";
    }
  });
}
    </script>
</body>
</html>

Solution

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>