Cannot get 3 tier collapsible structure in html - Is my JavaScript code the issue?

I'm brand new to HTML/JavaScript/CSS and trying to make a website. I want to create my resume in a page and there be collapsible options where it goes:

About Me (1)

Example text (2)

Certifications & Skillsets (1)

Example Text (2)

Experience (1)

Example 1 Job (2)
Description (3)
Example 2 Job (2)
Description (3)

Education (1)

Example Text (2)

The issue is mostly under 'Experience' the text after 'Example 1' and 'Example 2' won't display after I've selected it. I have Copiloted/AI'd this to death and cannot figure out why the collapsible buttons aren't working. Appreciate any help!

I tried changing display:block but then it shows up every time, I changed the variables in the JavaScript to coll2 because originally it was the same code just with collapsible2 changed.

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

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

var coll2 = document.getElementsByClassName("collapsible2");
var j;

for (j = 0; j < coll2.length; j++) {
  coll2[j].addEventListener("click", function() {
    this.classList.toggle("active");
    var content2 = this.nextElementsibling;
    if (content2.style.display === "block") {
      content2.style.display = "none";
    } else {
      content2.style.display = "block";
    }
  });
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: whitesmoke
}

p {
  color: black
}

.topnav {
  overflow: hidden;
  background-color: lavender;
  display: flex;
  position: sticky;
  align-items: center;
  justify-content: space-evenly;
  background-blend-mode: darken;
  background-size: cover;
  text-decoration: none;
  text-align: center;
  height: 75px;
  border-radius: 10px;
}

.topnav a {
  float: left;
  color: black;
  text-align: center;
  padding: 16px 16px;
  font-size: 18px;
  font-weight: bold;
  margin-right: 25px;
  border-radius: 10px;
  transition: color .3s ease-in-out;
}

.topnav a:hover {
  background-color: white;
  color: black;
  border-radius: 10px;
}

.topnav a.active {
  background-color: slateblue;
  color: white;
  border-color: black;
  border-width: 5px;
}

.topnav a.email-me {
  align-items: right;
  background-color: rgb(77, 65, 151);
  color: white;

}

.topnav a.email-me:hover {
  background-color: rgb(63, 53, 128);
  color: white;
  transition: color .3s ease-in-out;
}

.collapsible {
  color: black;
  background-color: lightgrey;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  height: 100px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 18px;
}

.active,
.collapsible:hover {
  background-color: darkgrey;
}

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

.collapsible2 {
  color: white;
  background-color: slateblue;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  height: 50px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 14px;
}

.active,
.collapsible2:hover {
  background-color: rgb(63, 53, 128);
}

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

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

</head>

<title> XXX Life & Experiences
</title>

<body>
  <nav class="topnav">
    <a href="main website code.html">About Me</a>
    <a class="active" href="Resume.html">Resume</a>
    <a href="Current Projects.html">Current Projects</a>
    <a href="mailto:XXX@gmail.com" class="email-me">Email Me</a>
  </nav>
  <div style="padding-left:16px">
    <p> Check out my LinkedIn for more details: <a href="https://www.linkedin.com/in/XXX/">LinkedIn Profile.</a></p> <br><br>

    <button class="collapsible"><h3>ABOUT ME</h3></button>
    <div class="content">
      <ul>
        <li>Senior consultant with a strong background in project management and leading technical teams. Effective at managing teams and clients, working with Agile principles, and supporting business requirements</li>
      </ul>
    </div>

    <button class="collapsible"><h3>CERTIFICATIONS & SKILLSETS</h3></button>
    <div class="content">
      <ul>
        <li>Project Management Professional (PMP) Certified: 2023 </li>
        <li>Salesforce Business Analyst Certified: 2023</li>
        <li>Skills: PowerPoint, Salesforce, Excel, Word, Visio, Mural, Qualtrics, and Jira</li>
      </ul>
    </div>

    <button class="collapsible"><h3>EXPERIENCE</p></h3></button>
    <div class="content">
      <button class ="collapsible2"><h4>EXAMPLE1 </h4></button>
      <br><br>
      <div class="content2">
        <h4>Development of New Salesforce Feature: AAA</h4>
        <ul>
          <li>XYZ</li>
        </ul>
        <h4>Development of New Salesforce Feature: BBB</h4>
        <ul>
          <li>XYZ/li>
        </ul>
      </div>

      <button class="collapsible2"><h4>EXAMPLE 2</h4></button>
      <br><br>
      <div class="content2">
        <ul>
          <li>XYZ</li>
        </ul>
      </div>
    </div>
    <button class="collapsible"><h3>EDUCATION </h3></button>
    <div class="content">
      <h4>XXX – B.B.A | Economics – Honors </h4>
      <ul>
        <li>GPA: 3.91</li>
      </ul>
    </div>
    <br><br>
    </p>
  </div>
</body>

</html>

Solution

There are (at least, havn't checked for more) 2 problems in your code that prevent it from functioning. For one, you should remove the two <br> elements between the <button class="collapsible2"> and <div class="content2"> elements. The reason is that your JS's nextElementSibling otherwise reaches the <br> elements instead of the <div class="content2"> elements.

And that's the second point: You've typed nextElementsibling (small "s") instead of nextElementSibling, that's the reason why your JS throws an error by accessing .style - nextElementsibling is undefined and you cannot access a property on undefined.

Below code corrects both errors.

Note that I removed most parts of your HTML to focus on the relevant parts that did not work.
I added comments to the lines I changed/removed/added

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

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

var coll2 = document.getElementsByClassName("collapsible2");
var j;

for (j = 0; j < coll2.length; j++) {
  coll2[j].addEventListener("click", function() {
    this.classList.toggle("active");
    // var content2 = this.nextElementsibling; // ! ERROR, should be nextElement S ibling
    var content2 = this.nextElementSibling;
    if (content2.style.display === "block") {
      content2.style.display = "none";
    } else {
      content2.style.display = "block";
    }
  });
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: whitesmoke
}

p {
  color: black
}

.topnav {
  overflow: hidden;
  background-color: lavender;
  display: flex;
  position: sticky;
  align-items: center;
  justify-content: space-evenly;
  background-blend-mode: darken;
  background-size: cover;
  text-decoration: none;
  text-align: center;
  height: 75px;
  border-radius: 10px;
}

.topnav a {
  float: left;
  color: black;
  text-align: center;
  padding: 16px 16px;
  font-size: 18px;
  font-weight: bold;
  margin-right: 25px;
  border-radius: 10px;
  transition: color .3s ease-in-out;
}

.topnav a:hover {
  background-color: white;
  color: black;
  border-radius: 10px;
}

.topnav a.active {
  background-color: slateblue;
  color: white;
  border-color: black;
  border-width: 5px;
}

.topnav a.email-me {
  align-items: right;
  background-color: rgb(77, 65, 151);
  color: white;

}

.topnav a.email-me:hover {
  background-color: rgb(63, 53, 128);
  color: white;
  transition: color .3s ease-in-out;
}

.collapsible {
  color: black;
  background-color: lightgrey;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  height: 100px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 18px;
}

.active,
.collapsible:hover {
  background-color: darkgrey;
}

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

.collapsible2 {
  color: white;
  background-color: slateblue;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  height: 50px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 14px;
  display: block; /* ! ADDED */
}

.active,
.collapsible2:hover {
  background-color: rgb(63, 53, 128);
}

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

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

</head>

<title> XXX Life & Experiences
</title>

<body>

<button class="collapsible"><h3>EXPERIENCE</p></h3></button>
    <div class="content">
      <button class ="collapsible2"><h4>EXAMPLE1 </h4></button>
      <!-- <br><br> ! REMOVED -->
      <div class="content2">
        <h4>Development of New Salesforce Feature: AAA</h4>
        <ul>
          <li>XYZ</li>
        </ul>
        <h4>Development of New Salesforce Feature: BBB</h4>
        <ul>
          <li>XYZ/li>
        </ul>
      </div>

      <button class="collapsible2"><h4>EXAMPLE 2</h4></button>
      <!-- <br><br> ! REMOVED -->
      <div class="content2">
        <ul>
          <li>XYZ</li>
        </ul>
      </div>
    </div>
    </p>
  </div>
</body>

</html>