Не можете получить 3 -уровневую складную структуру в HTML - мой код JavaScript проблемой? ⇐ Javascript

[Anonymous]

Я совершенно новый для HTML/JavaScript/CSS и пытаюсь создать веб -сайт. Я хочу создать свое резюме на странице, и есть складные параметры, где оно идет: < /p>
О меня (1) < /h1>

• Пример текста (2) < /li>
  < /ul>
  Сертификаты и навыки (1) < /h1>
  Пример. /> Опыт (1) < /h1>
  
  Пример 1 задания (2) < /p>
  < /li>
  Описание (3) < /p>
  < /li>
  Пример 2) < /p>
  < /li>
  < /p>
  < /li>
  < /p>
  < /li>
  . (3.) Я скрепил/до смерти и не могу понять, почему складные кнопки не работают. Цените любую помощь! < /P>
  Я попытался изменить дисплей: блокировать, но затем он отображается каждый раз, я менял переменные в JavaScript на Coll2, потому что изначально это был один и тот же код с COLLASBIBLE2. PrettyPrint-Override ">

  Код: Выделить всё

  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";
  }
  });
  } < /code>
  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;
  }< /code>
  
  
  
  
  
  
  
  
  
   XXX Life & Experiences
  
  
  
  
  [url=main website code.html]About Me[/url]
  [url=Resume.html]Resume[/url]
  [url=Current Projects.html]Current Projects[/url]
  [url=mailto:XXX@gmail.com]Email Me [/url]
  
  
   Check out my LinkedIn  for more details: [url=https://www.linkedin.com/in/XXX/]LinkedIn Profile.[/url]
  
  
  [img]icons/me icon.png[/img]
  ABOUT ME
  
  
  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
  [/list]
  
  
  [img]icons/skills icon.png[/img]
  CERTIFICATIONS & SKILLSETS
  
  [list]
  [*]Project Management Professional (PMP) Certified: 2023
  [*]Salesforce Business Analyst Certified: 2023
  [*]Skills: PowerPoint, Salesforce, Excel, Word, Visio, Mural, Qualtrics, and Jira
  [/list]
  
  [img]icons/icons8-salesforce-48 (1).png[/img]
  [img]icons/jira icon.png[/img]
  [img]icons/powerpoint icon.png[/img]
  [img]icons/visio icon.png[/img]
  
  
  [img]icons/work icon.png[/img]
  EXPERIENCE
  
  [h4]EXAMPLE1 [/h4]
  
  
  [h4]Development of New Salesforce Feature: AAA[/h4]
  [list]
  [*]XYZ
  [/list]
  [h4]Development of New Salesforce Feature: BBB[/h4]
  [list]
  [*]XYZ/li>
  [/list]
  
  [h4]EXAMPLE 2[/h4]
  
  [list]
  XYZ
  [/list]
  
  
  
  [img]icons/education icon.png[/img]
  EDUCATION 
  
  [h4]XXX – B.B.A | Economics – Honors [/h4]
  [list]
  [*]GPA: 3.91
  [/list]
  
  Icons by [url=https://icons8.com]Icons8. [/url]
  
  
  
  
  

  
  
  
  Подробнее здесь: https://stackoverflow.com/questions/795 ... e-the-issu