Javascript toggle with multiple buttons without using class or id

Question

Hi i wrote some code to show and hide a paragraph in a card using Javascript. This works perfectly fine on the first card, but it doesn't work on any of the other cards. This shouldn't be very difficult, but it's a school project and there are a few rules. I cannot use div, class or id. It also has to be semantic, so the checkbox hack and the onclick attribute are not allowed.

This is my code:

var section = document.querySelectorAll('section > summary > p');
var button = document.querySelectorAll('section > summary > button');

var show = function () {
 section.classList.toggle('show')
}

button.addEventListener('click', show());

section summary p {
  display: none;
}

section summary p.show {
  display: block;
}

<body>
  <main>

    <!--first card-->

    <section>
      <!-- Top part-->
      <span> <img> </span>

      <!-- Bottom part-->
      <summary>

        <button>show paragraph</button>
        <!--This button triggers the toggle-->

        <h2></h2>
        <h3></h3>

        <p>I'm trying to show and hide this p <a href="#">lees meer</a></p>

        <footer></footer>

      </summary>

    </section>

    <!--second card-->

    <section>
      <!-- Top part-->
      <span> <img> </span>

      <!-- Bottom part-->
      <summary>

        <button>show paragraph</button>

        <h2></h2>
        <h3></h3>

        <p>I'm trying to show and hide this p <a href="#">lees meer</a></p>

        <footer></footer>

      </summary>

    </section>
  </main>
</body>

This is the link to my pen: https://codepen.io/SummerD/pen/MEMMNB

I have not seen any solutions to this problem without using classes. I hope you can help me!

`querySelector` will only return one item. Use `querySelectorAll`. — evolutionxbox, Oct 25 '17 at 11:19
i've just tried this and now both of them don't work @evolutionxbox — Summer, Oct 25 '17 at 11:24
no i'm new to javascript. i've replaced 'querySelector' with 'querySelectorAll' — Summer, Oct 25 '17 at 11:29
Ok. No problem. Firstly, you're selecting all elements on the page, this is a problem if you want to only show those which are visually related to the clicked button. Secondly, you need to loop over `querySelectorAll` results https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/. — evolutionxbox, Oct 25 '17 at 11:31
Haha, you're most definitely studying CMD in the second year at the HvA. — roberrrt-s, Oct 25 '17 at 12:00

score 1 · Answer 1 · answered Oct 25 '17 at 12:16

Given the nature of this assignment, and the lack of classes to use clean HTML and CSS, I went a bit overboard with stretching the JavaScript:

// Collect all buttons, and store them in an Array using querySelectorAll
var buttons = document.querySelectorAll('button')

// Initiate a for loop that 'loops' through all options in the buttons array.
for (var i = 0; i < buttons.length; i++) {
  // For every instance of buttons in the Array, apply an event listener (click).
  buttons[i].addEventListener('click', function(e) {
     // Grab the target of the click event, select their parent and access the 7th child (the <p> tag in question). Access the classList and toggle the 'show' class.
     e.target.parentNode.childNodes[7].classList.toggle('show');
  });
};

Normally, you wouldn't do this type of coding, since it's unmaintainable, hard to read and relies on a consistent DOM which can always change. It will work properly for your example though.

score 0 · Answer 2 · answered Oct 25 '17 at 15:22

This is one way to do it.

var cards = document.querySelectorAll('section');

cards.forEach((card)=>{
  card.querySelector('button').addEventListener('click', function(){
    card.querySelector('p').classList.toggle('show');
  })
})

* {
 box-sizing: border-box;
 font-family: Segoe UI, Myriad, Verdana, sans-serif;
}
body {
 background-color: grey;
  
} 
main {
 display: flex;
 flex-flow: row wrap;
 justify-content: center;
}

/*=================
  =====the card====
  =================*/
    
section {
 width: 15em;
 margin: 2em;
 box-shadow: 0 0.2em 0.4em 0 rgba(0, 0, 0, 0.20);
 background-color: white;
 max-height: 23em;
}


/*top part*/

span {
 display: block;
 overflow: hidden;
 position: relative;
}

span img {
 width: 120%;
}
/*bottom part*/
section summary {
 bottom: 0;
 background: white;
 width: 100%;
 padding: 1em;
}
section summary h2 {
 margin: 0;
 padding-bottom: 0.5em;
 color: black;
 font-size: 1.5em;
 font-weight: 700;
}
section summary h3 {
 margin: 0;
 padding: 0 0 1em;
 color: darkred;
 font-size: 1em;
 font-weight: 400;
}
  /*i'm trying to show/hide this p on click of the button*/
section summary p {
 color: black;
 font-size: 0.8em;
 line-height: 1.8em;
  display:none;
}
section summary p.show {
  display:block;
}
section summary footer {
 margin: 2em 0 0;
 color: black;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Cards</title>
</head>
<body>
<body>
<main>
<!--first card-->
  <section>
    <!-- Top part-->
    <span>
   <img src="https://www.w3schools.com/css/img_fjords.jpg"/> </span>
    <!-- Bottom part-->
    <summary>
      <button>show paragraph</button>
      <h2>Moe</h2>
      <h3>leeg</h3>
      <p>De buschauffeur port me wakker. We zijn bij de eindhalte, Centraal Station. Ik stap uit en duw de kinderwagen voort waarin mijn zoon ligt te slapen. Ik wou dat ik hem was. De mensen lopen in zichzelf gekeerd over het plein. De regen doet z’n best
        mij wakker te houden, maar mijn oogleden voelen zwaar, alsof er een stel verveelde kaboutertjes aan lopen te trekken. <a href="#">lees meer</a> </p>
      <footer>6 Minuten</footer>
    </summary>
    
  </section>
  <!--first card-->
  <section>
    <!-- Top part-->
    <span>
   <img src="https://www.w3schools.com/css/img_fjords.jpg"/> </span>
    <!-- Bottom part-->
    <summary>
      <button>show paragraph</button>
      <h2>Moe</h2>
      <h3>leeg</h3>
      <p>De buschauffeur port me wakker. We zijn bij de eindhalte, Centraal Station. Ik stap uit en duw de kinderwagen voort waarin mijn zoon ligt te slapen. Ik wou dat ik hem was. De mensen lopen in zichzelf gekeerd over het plein. De regen doet z’n best
        mij wakker te houden, maar mijn oogleden voelen zwaar, alsof er een stel verveelde kaboutertjes aan lopen te trekken. <a href="#">lees meer</a> </p>
      <footer>6 Minuten</footer>
    </summary>
    
  </section>
</main>
</body>
</body>
</html>

Notice, how I added event listener by selecting all the cards.

Javascript toggle with multiple buttons without using class or id

2 Answers2