html - Making element content toggle on h1 header click with pure Javascript -

I want to toggle some content while clicking on the h1 header. I want to be able to click on the h1 header and hide or show the section below it.

Pre>

& lt; On one hand & gt; & Lt; H1 & gt; & Lt; A href = "#" & gt; Title & lt; / A & gt; & Lt; / H1> & Lt; Section & gt; & Lt; H1 & gt; Foo & lt; / H1> & Lt; P & gt; Foo & lt; / P & gt; & Lt; / Section & gt; & Lt; Section & gt; & Lt; H1 & gt; Foo & lt; / H1> & Lt; P & gt; Foo & lt; / P & gt; & Lt; / Section & gt; & Lt; Section & gt; & Lt; H1 & gt; Foo & lt; / H1> & Lt; P & gt; Foo & lt; / P & gt; & Lt; / Section & gt; & Lt; Section & gt; & Lt; H1 & gt; Foo & lt; / H1> & Lt; P & gt; Foo & lt; / P & gt; & Lt; / Section & gt; & Lt; Section & gt; & Lt; H1 & gt; Foo & lt; / H1> & Lt; P & gt; Foo & lt; / P & gt; & Lt; / Section & gt; & Lt; / One side & gt;

css

 . Unknown {display: none; }  

JS

  // var laatste = document.query selector ('whip h1: no (types of: earlier)'); // Hide Latte.clashlist.ed ('Invisible'); // toggle document.quire selector ('puzzle> h1'). Onclick = function () {if (laatste.className === "invisible") {laatste.classList.remove ('invisible'); } And {laatste.classList.add ('invisible'); }}  

I do not have permission to use jQuery and add class or divs to my HTML.

You can choose all H1 headers, then you can attach an event listener to each one Are there. On the click event, you can then toggle the invisible square on your section content element, in this case " p & gt;"

JAVASCRIPT:

 Select  // all_headers_list = document.querySelectorAll ('separate section H1'); Toggle {var entry = all_headers_list [i] for // (i = 0; i & lt; all_headers_list.length; ++ i); (Header.className === 'invisible_content') {header.classList.remove ('invisible_content'); ShowSectionContent (header.parentNode) entry. AddEventListener ('click', function (e) {var header = e.target;} Other {header.classList.add ('invisible_content'); hideSectionContent (header.parentNode);}}); } Function hideSectionContent (section) {var section_content = section.querySelector ('p'); If (section_content! = Undefined) section_content.classList.add ('invisible'); } ShowSectionContent (section) {var section_content = section.querySelector ('p'); If (section_content! = Undefined) section_content.classList.remove ('invisible'); }  

CSS:

  .invisible_content {} .Unknown {display: none; }  

Note that in this case invisible_content class is an indicator of hidden content.

Example: