Accordion

Código HTML:

								

<div class="accordion" id="accordionPJENL">

    <div class="accordion-item">
        <h2 class="accordion-header" id="heading-01">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#item-01" aria-expanded="true" aria-controls="item-01">
                Item 01
            </button>
        </h2>
        <div id="item-01" class="accordion-collapse collapse show" aria-labelledby="heading-01" data-bs-parent="#accordionPJENL">
            <div class="accordion-body">
                01 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, quod cum. Amet repellat pariatur reprehenderit, accusamus culpa quod adipisci. Consectetur praesentium accusamus beatae placeat, asperiores tempore iste laborum culpa eos!
            </div>
        </div>
    </div>

    <div class="accordion-item">
        <h2 class="accordion-header" id="heading-02">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#item-02" aria-expanded="false" aria-controls="item-02">
                Item 02
            </button>
        </h2>
        <div id="item-02" class="accordion-collapse collapse" aria-labelledby="heading-02" data-bs-parent="#accordionPJENL">
            <div class="accordion-body">
                02 - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus possimus nisi, eius officiis sapiente iusto hic excepturi dolorem debitis in minima, eaque tenetur. Nihil impedit aperiam commodi voluptas iure voluptatem?
            </div>
        </div>
    </div>

    <div class="accordion-item">
        <h2 class="accordion-header" id="heading-03">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#item-03" aria-expanded="false" aria-controls="item-03">
                Item 03
            </button>
        </h2>
        <div id="item-03" class="accordion-collapse collapse" aria-labelledby="heading-03" data-bs-parent="#accordionPJENL">
            <div class="accordion-body">
                03 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum dolorum ex deserunt nisi nesciunt necessitatibus totam laboriosam, natus ad? Est possimus excepturi facilis quidem totam quas temporibus necessitatibus illo repellat.
            </div>
        </div>
    </div>

    <div class="accordion-item">
        <h2 class="accordion-header" id="heading-04">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#item-04" aria-expanded="false" aria-controls="item-04">
                Item 04
            </button>
        </h2>
        <div id="item-04" class="accordion-collapse collapse" aria-labelledby="heading-04" data-bs-parent="#accordionPJENL">
            <div class="accordion-body">
                04 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum dolorum ex deserunt nisi nesciunt necessitatibus totam laboriosam, natus ad? Est possimus excepturi facilis quidem totam quas temporibus necessitatibus illo repellat.
            </div>
        </div>
    </div>

    <div class="accordion-item">
        <h2 class="accordion-header" id="heading-05">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#item-05" aria-expanded="false" aria-controls="item-05">
                Item 05
            </button>
        </h2>
        <div id="item-05" class="accordion-collapse collapse" aria-labelledby="heading-05" data-bs-parent="#accordionPJENL">
            <div class="accordion-body">
                05 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum dolorum ex deserunt nisi nesciunt necessitatibus totam laboriosam, natus ad? Est possimus excepturi facilis quidem totam quas temporibus necessitatibus illo repellat.
            </div>
        </div>
    </div>

</div>

								
							

Código CSS:

								

/*============================================================
ACCORDION
============================================================*/

.accordion-item {
  box-shadow: 0px 0px 15px 2px #CCCCCC;
}

.accordion-header {
  background: #EEEEEE;
}

.accordion-header:hover,
.accordion-header:active {
  background: #eee;
}

.accordion-button {
  font-weight: bold;
  color: #004987;
  font-size: 18px;
  padding: 20px;
  background-color: transparent;
}

.accordion-button:not(.collapsed) {
  background-color: #004987;
  color: #FFFFFF;
}

.accordion-button:not(.collapsed)::after {
  filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(35deg) brightness(103%) contrast(101%);
}

.accordion-body {
  padding: 25px;
}

.accordion-button-link:hover,
.accordion-button-link:focus {
  text-decoration: none;
}