Read More Toggle

Toggle between two sections of content.

CodePen

JavaScript

// **************************************************
//  Read More Toggle (rmt)
// **************************************************
const readMoreToggle = () => {
    document.querySelectorAll('.rmt').forEach((element) => {
        const rmtContent = element.querySelectorAll('.rmt-content');

        element.querySelectorAll('.rmt-link').forEach((link) => {
            link.addEventListener('click', (event) => {
                rmtContent.forEach((section) => {
                    section.classList.toggle('rmt-hide');
                });
                event.preventDefault()
            });
        });
    });
};
readMoreToggle();

HTML

<div class="rmt">
    <div class="rmt-content">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corrupti, quasi? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis praesentium minima aliquid velit. Optio ipsa veniam perferendis consequatur natus, hic obcaecati, officiis placeat atque reprehenderit quaerat tenetur facere maiores quidem.</p>
        <a href="#" class="rmt-link more">Read More</a>
    </div>

    <div class="rmt-content rmt-hide">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero modi cupiditate eaque architecto facilis amet, tempora nulla eos similique ut minus adipisci sed repellat recusandae pariatur cumque id nobis impedit autem facere alias dolor quae. Iste officiis eius recusandae hic?</p>
        <a href="#" class="rmt-link less">Previous</a>
    </div>
</div>

CSS

// **************************************************
//  Read More Toggle
// **************************************************
.rmt-hide {
  display: none;
}

.rmt-link {
  font-size: 1.1rem;
  text-decoration: none;
}