How to add class .hidden-item to all item except the first child using vanilla JS

by

I need help with the following in vanilla JS. I need to add class “.hidden-item” to all “item” except the first child using vanilla JS.
Onclick button it show the hidden item and again click on button it hide those displayed item expect the first child.

 const button = document.querySelector('.toggle-button');
    const buttonText = document.querySelector('.toggle-button--text');
    const hiddenItems = document.querySelectorAll('.hidden-item');
    let isHidden = true;

    button.addEventListener('click', () => {
      buttonText.textContent = isHidden
        ? 'Read Less'
        : 'Read More';

      button.classList.toggle('open');

      isHidden = !isHidden;
      hiddenItems.forEach(item => item.classList.toggle('hidden'));
    });
.hidden {
      display: none;
    }
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Read More or Read Less</title>

</head>
<body>
  <p class="item">Atilla was born and bred in Stuttgart which lies in the Swabian region of Germany. Raised by Turkish parents, he was fully bilingual by the age of five and grew up speaking both languages. In 2009 he moved to Istanbul where he studied acting for three years at the Müjdat Gezen Conservatoire, before coming to the UK and furthering his training with a postgraduate degree at the Oxford School of Drama.</p>
  <p class="item hidden">Atilla’s work is highly versatile. It spans languages, accents and various genres. He lends his voice on a regular basis to a broad range of well-known clients and brands.</p>
  <p class="item hidden">He voiced Assyrian King Ashurbanipal for the British Museum’s exhibition trailer and brought to life Persian leader Cyrus the Great in the video game ‘Total War: Arena’.</p>
  <p class="item hidden">For BBC Radio 4 he played a Turkish spy in ‘Journey into Fear’ and German POW in the long-running series ‘Home Front’.</p>
  <p class="item hidden">For Big Finish Productions he worked alongside Sheridan Smith and Paul McGann on ‘Doctor Who’, followed by a two-hander opposite John Barrowman in ‘The Lives of Captain Jack’.</p>

  <div class="toggle-button">
    <div class="toggle-button--text">Read More</div>
  </div>

</body>
</html>

38 thoughts on “How to add class .hidden-item to all item except the first child using vanilla JS”

  38. 256293 196228An fascinating discussion may possibly be worth comment. I feel you should write on this topic, it may undoubtedly be a taboo topic but generally people are not enough to dicuss on such topics. To a higher. Cheers 382643

    Reply

Leave a Comment