Making element content toggle on h1 header click with pure Javascript

Question

I want to make some content toggle when clicking on a h1 header. I want to be able to click on the h1 header and make the section under it hide or show.

For the Javascript I'm trying to select all (5) sections, but not the h1, that are all inside a aside element. I can't figure this out either.

Please take a look at my code and let me know what you would do.

HTML

<aside>
    <h1><a href="#">Title</a></h1>
        <section>
            <h1>Foo</h1>
            <p>
                Foo
            </p>
        </section>
        <section>
            <h1>Foo</h1>
            <p>
                Foo
            </p>
        </section>
        <section>
            <h1>Foo</h1>
            <p>
                Foo
            </p>
        </section>
        <section>
            <h1>Foo</h1>
            <p>
                Foo
            </p>
        </section>
        <section>
            <h1>Foo</h1>
            <p>
                Foo
            </p>
        </section>
    </aside>

CSS

    .invisible {
  display: none;
}

JS

// select
var laatste = document.querySelector('aside h1:not(:first-of-type)');

// hide
laatste.classList.add('invisible');

// toggle 
document.querySelector('aside > h1').onclick = function() {
  if (laatste.className === "invisible") {
    laatste.classList.remove('invisible');
  }
  else {
    laatste.classList.add('invisible');
  }
}

I'm not allowed to use jQuery and add classes or divs to my HTML.

Answer 1

You could select all the h1 headers, then attach an event listener to each one them. On the click event you could then toggle the invisible class on your section contents element, in this case "<p>".

//select
var all_headers_list = document.querySelectorAll('aside section h1');

//toggle
for (i = 0; i < all_headers_list.length; ++i) {
    var entry = all_headers_list[i];

    entry.addEventListener('click', function(e) {
          var header = e.target;

          if (header.className === 'invisible_content') {
              header.classList.remove('invisible_content');
              showSectionContent(header.parentNode)  
          }else {
              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');
}

function showSectionContent(section){
    var section_content = section.querySelector('p');
    if(section_content != undefined) section_content.classList.remove('invisible');
}

.invisible_content {}

.invisible {
  display: none;
}

Note that the invisible_content class is there just to be a indicator of hidden content in this case.

http://jsfiddle.net/4cqcL0Lg/ http //jsfiddle.net/4cqcL0Lg/