One of the most typical features we can find in a web page is the Frequently asqued questions. There are in many ways: Fixed, floating and, as we can see in this case, collapsed

In a big faq container we have each container as you can see in the following bunch of code:

      <div class="faq">
        <h3 class="faq-title">
          Lorem ipsum dolor sit, amet consectetur adipisicing elit.
        </h3>

        <p class="faq-text">lorem ipsum dolor sit</p>

        <button class="faq-toggle">
          <i class="fas fa-chevron-down"></i>
          <i class="fas fa-times"></i>
        </button>
      </div>

The sinfle fact will be displayed onces we click inside the elevement in the faq class. When its happen the active class atributte will be added.

The javascript code only listen for the event clikc in the faq-toggle as I told you before

const toggles = document.querySelectorAll('.faq-toggle')

toggles.forEach(toggle => {
    toggle.addEventListener('click', () => {
        toggle.parentNode.classList.toggle('active')
    })
})

When it happens most changes in the display of the elements inside the the web:

.faq.active {
    background-color: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2), 3px 6px rgba(0, 0, 0, 0.1);
}

.faq.active::before,
.faq.active::after {
    content: '\f075';
    font-family: 'Font Awesome 5 Free';
    color: #2ecc71;
    font-size: 7rem;
    position: absolute;
    opacity: 0.2;
    top: 20px;
    left: 20px;
    z-index: 0;
}

.faq.active::before{
    color: #3498db;
    top: -10px;
    left: -30px;
    transform: rotateY(180deg);
}

.faq.active .faq-text{
    display: block;
}

.faq.active .faq-toggle .fa-times {
    color: white;
    display: block;
}

.faq.active .faq-toggle .fa-chevron-down {
    display: none;
}

.faq.active .faq-toggle{
    background-color: #9fa4a8;
}

You can see the code in this GitHub Repository: 12.faq_collapse and the demo of the project is here: FAQ Collapse