Read More Toggle (Alternative)

Toggle an additional section of content.

JavaScript

// **************************************************
//  Read More Toggle
// **************************************************
const readMore = () => {
    const readMoreButton = document.querySelector('.read-more-button')
    const readMoreText = document.querySelector('.read-more-text')

    if (readMoreButton && readMoreText) {
        readMoreButton.addEventListener('click', (event) => {
            readMoreText.classList.toggle('hidden')
            readMoreButton.classList.toggle('active')

            if (readMoreButton.classList.contains('active')) {
                readMoreButton.textContent = 'Read Less'
            } else {
                readMoreButton.textContent = 'Read More'
            }
        })
    }
}
readMore()

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum...</p>

<p><button class="read-more-button">Read More</button></p>

<div class="read-more-text hidden">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos accusamus, cupiditate aliquam a temporibus nihil cumque eligendi quaerat molestiae velit corporis dolores deserunt officia amet culpa quis reiciendis, impedit esse corrupti aspernatur. Enim, fugit ad laudantium, sapiente assumenda et vel facere veritatis nesciunt tenetur earum sint debitis consequuntur culpa nemo, laboriosam hic aliquid? Modi omnis quidem corporis praesentium excepturi neque veniam, voluptatibus sit iure fuga nisi, eaque sunt nihil quae commodi voluptas. Corporis fugit nostrum ex aut similique alias expedita consequatur suscipit perferendis animi? Illum eligendi, iste voluptate aut temporibus repudiandae assumenda sint laboriosam nesciunt, architecto aperiam impedit soluta unde?<br><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas facere, tempore ipsum repellendus veniam sint in inventore, optio expedita necessitatibus magni, odio quibusdam ut rem? Vero maiores optio qui laboriosam distinctio voluptatibus id iusto perspiciatis nihil sequi nam molestias nobis voluptate minus eveniet quae quos, adipisci aliquam placeat, voluptatum totam!</p>
</div>

CSS

.read-more-button {
  background-color: #223c86;
  border: 2px solid #223c86;
  border-radius: 0;
  min-width: 185px;
  margin-inline: auto;
  padding: 0.75em 2em;
  color: #fff;
  font-size: 1rem;
  line-height: 1rem;
  display: block;
  cursor: pointer;

  &:after {
    content: '\2b';
    margin-left: 0.5em;
    font-family: 'Icons';
    font-size: 1.7rem;
    line-height: 0;
    vertical-align: middle;
  }

  &:hover {
    background-color: #fff;
    color: #223c86;
  }

  &.active {
    &:after {
      content: '\2d';
      vertical-align: inherit;
    }
  }
}

.read-more-text {
  &.hidden {
    display: none;
  }
}

CodePen

May 23, 2022