Search code examples
javascripthtmlcsscss-selectorssemantics

Javascript toggle without using class or id

i'm trying to show and hide a paragraph using javascript. But since this is a school project there are a few rules. I cannot use div class or id. This makes it hard for me to select the tags in Javascript. It has to be semantic, therefore the checkbox hack and the onclick attribute are not allowed.

here is the codepen https://codepen.io/SummerD/pen/pWXWdy

this is my html

<body>
<main>

  <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>blah blah blah, this is the paragraph  <a href="#">read more</a> </p>
      <footer>6 Minutes</footer>
    </summary>

  </section>

</main>
</body>

this is my css

section {
    width: 15em;
    margin: 2em;
    background-color: white;
    height: 23em;
}

  /*i'm trying to show/hide this p on click of the button*/

section summary p {
  display:none;
}

i've already tried this:

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

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

button.addEventListener('click', show);

with this css

section summary p {
    color: black;
    font-size: 0.8em;
    line-height: 1.8em;
  display:none;
}
section summary p.show {
  display:block;
}

but sadly this does not work. I don't know if it doesn't work because of a typo, because i honestly don't know what i'm doing, i'm really bad at javascript.

I hope you can help me!

Solution

  • Ironically, the problem isn't with your button not being able to toggle (it actually does this just fine), but rather that you can't click on your button because <section> is being overlapped by <main>. This is because you have a z-index of -1 on section (not shown in your code in the question), which means that it sits 'behind' <main>, which has the default z-index of 0 (technically auto, which inherits up to the default 0 for <html>).

    Simply removing this will fix your problem:

    section {
  /* z-index: 1 */
}

    I've created a new pen showcasing this here, and added it to the following snippet:

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

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

button.addEventListener('click', 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;
}
    <body>
  <main>
    <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>

    Hope this helps! :)