CODEWITHSUNDEEP
javascriptjquerydomtoggle
tasiaraye
tasiaraye

Reputation: 1

How can I show and hide a <div>?

My assignment is to show and hide a <div> using DOM. There are multiple h2 but only one has an id and I am not allowed to add id's or classes. How can I make only one div show and hide. The id for the h2 with the div I need to show is info.

Here is a snippet of my code:

body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 100%;
  margin: 20px;
  padding: 10px;
}

section {
  margin-bottom: 50px;
}

footer p {
  border-top: 1px solid #000;
  padding: 10px;
}

#info div:first-of-type {
  display: none;
}

#info div.more {
  display: block;
}

#info h2 {
  cursor: pointer;
}
<body>
  <section>
    <figure>
      <img s src="https://media.swansonvitamins.com/images/items/250/JR187.png" alt="Photo of Curcumin 95">
    </figure>
    <ul>
      <li>Curcumin 95 protects against oxidative damage</li>
      <li>Delivers 95% curcuminoids</li>

    </ul>
  </section>
  <section id="info">
    <h2>Show More...</h2>
    <div>
      <p>Other Ingredients: Cellulose, magnesium stearate (vegetable source) and silicon dioxide. Capsule consists of hydroxypropylmethylcellulose.
      </p>

      <p>Usage: Take 1 capsule per day with food or as directed by your qualified healthcare professional</p>

      <p>Note: ...</p>
    </div>

    <h2>Our Guarantee</h2>
    <div>
      <p>Our lab evaluates...</p>
    </div>

Upvotes: 0

Views: 38

Answers (2)

handycode
handycode

Reputation: 72

var h2List = document.querySelectorAll('#info h2')
h2List.forEach(h2 => { 
  h2.addEventListener('click', () => h2.nextSibling.classList.toggle('more'))
})

I think this is you want

Upvotes: 1

륜디아
륜디아

Reputation: 1

I think...u have to make onclick event in h2 tag... then include script code $(this).css('display' , 'block')

Upvotes: 0

Related Questions