My goal is to be able to show / hide excerpt of the content.
This is a wordpress site so posts are generated hence giving a button a unique ID is not an option. It must be working for all added posts in the future too.

The excerpt should be first hidden and shown once the button is clicked.

Current code adds and removes .excerpt class, however, the excerpt is not showing.

HTML

```
                <div class="card-img-top"><?php the_post_thumbnail(); ?></div>
                <div class="card-body">
                    <p class="card-text"><?php the_category(', '); ?></p>
                    <h5 class="card-title"><?php the_title(); ?></h5>
                    <p class="card-text excerpt"><?php the_excerpt(); ?></p>
                    <button class="btn btn-primary btn-md btn-rounded border-0 text-white read-more">Read More</button>
                </div>
                </div>

```

CSS

```
.excerpt + p {
  display: none;
}

.excerpt {
  display: block;
}

```

JS

```
const readMoreBtns = document.querySelectorAll('.read-more')

const showMoreHandler = (event) => {
const cardActiveParagraphs = document.querySelectorAll('.excerpt + p')

const cardBody = event.target.parentElement
const cardParagraph = cardBody.querySelector('.excerpt + p')
  console.log(cardParagraph)

cardActiveParagraphs.forEach((paragraph) => {
  paragraph.classList.toggle('excerpt')
})

}

readMoreBtns.forEach((button) => 
{
button.addEventListener('click', e => showMoreHandler(e));
});

```