Accordion issue, can't get jquery to work

[richarddunnebsc]

I have an accordion with 1 empty panel

<div class="accordion-body">
    <div class="accordion">
     <h1></h1>
     <hr>
     <div class="container">
      <div class="label">/div>
      <div class="content"></div>
     </div>
    </div>   
  </div>

and this css

/* Sets the background color of the body to blue. Sets font to Rubik */

body {
  background-color: #0A2344;
  font-family: 'Times New Roman', Times, serif;
}

/* Aligns the heading text to the center. */

h1 {
  text-align: center;
}

/* Sets the width for the accordion. Sets the margin to 90px on the top and bottom and auto to the left and right */

.accordion {
  width: 80%;
  margin: 90px auto;
  color: black;
  background-color: white;
  padding: 45px 45px;
}

.accordion .container {
  position: relative;
  margin: 10px 10px;
}

/* Positions the labels relative to the .container. Adds padding to the top and bottom and increases font size. Also makes its cursor a pointer */

.accordion .label {
  position: relative;
  padding: 10px 0;
  font-size: 30px;
  color: black;
  cursor: pointer;
}

.accordion .label::before {
  content: '+';
  color: black;
  position: absolute;
  top: 50%;
  right: -5px;
  font-size: 30px;
  transform: translateY(-50%);
}

/* Hides the content (height: 0), decreases font size, justifies text and adds transition */

.accordion .content {
  position: relative;
  background: white;
  height: 0;
  font-size: 20px;
  text-align: justify;
  width: 100%;
  overflow: auto;
  transition: 0.5s;
}

/* Adds a horizontal line between the contents */

.accordion hr {
  width: 100;
  margin-left: 0;
  border: 1px solid grey;
}

.accordion .container.active .content {
  min-height: 250px;

}

/* Changes from plus sign to negative sign once active */

.accordion .container.active .label::before {
  content: '-';
  font-size: 30px;
}

js

const accordion = document.getElementsByClassName('container');

for (i = 0; i < accordion.length; i++) {
  accordion[i].addEventListener('click', function () {
    this.classList.toggle('active')
  })
}

What do I need to change to allow a form in the content, so clicking inside content doesn't close the content?

[not2easy]

Hi richarddunnebsc and welcome to WebmasterWorld [webmasterworld.com]

If this was posted via copy/paste, there is an error with the label class div closing tag as it is missing a <:

<div class="label">/div>

I'm not seeing anything within the css to either hide or show a form, only the .content so I can't see anything to change there. Is there a form in the .content, is the .content within .container?

Sorry this is not much help.

[richarddunnebsc]

Apologies for the typo, I noticed it and fixed it. The accordion is empty. I did have a form in the content, but it was still observing the original behaviour, click anywhere in the form (content) and it closes. I want the content to close by clicking on the label. I also want to add a button that will close the open container, then add a new open container. But one problem at a time.

[richarddunnebsc]

I found this on jfiddle :[jsfiddle.net ]
but I can't get it (jquery) to work. Am I missing something?
Is there any reason this wouldn't work after copy/paste. I have the script below the html.

[richarddunnebsc]

I figured out why the panel wasn't opening and closing. I didn't have the JQuery library script.

[not2easy]

Thank you for coming back with the answer. That might help another person with the same problem. ;)