Accordion

Informação importante

Quando utilizar múltiplos accordions na mesma página, lembre-se de modificar o atributo 'id' de cada 'input'e o atributo 'for' de cada 'label', garantindo assim que a abertura dos accordions ocorra de maneira adequada.

Accordion sem ícone

Preview

HTML

<div class="accordion">
    <input type="checkbox" id="accordion-1" />
    <label for="accordion-1" class="accordion__item">
        How do I make smooth scroll
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 15L7.75702 10.757L9.17202 9.34299L12 12.172L14.828 9.34299L16.243 10.757L12 15Z" fill="currentColor"/>
        </svg>
    </label>

   <div class="accordion__content">
      <p class="accordion__text">
         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.
      </p>
   </div>
</div>

CSS

.accordion {
  width: 100%;
  height: auto;
  background-color: #fff;
  color: #434343;
  display: flex;
  flex-direction: column;
}

.accordion input{
  display: none;
}

.accordion__item{
  width: 100%;
  min-height: 36px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  color: #434343;
  font-size: 18px;
  font-weight: 500;
  line-height: 21.6px;
  cursor: pointer;
}

.accordion__item svg {
  color: #434343;
  transition: transform 0.5s ease-in-out;
}

.accordion:hover .accordion__item,
.accordion:hover .accordion__item svg path {
  color: #000000;
}

.accordion input:checked ~ .accordion__item svg,
.accordion input:checked ~ .accordion__item{
  color: #000000;
}

.accordion input:checked ~ .accordion__item svg {
  transform: rotate(-180deg);
}

.accordion__content { 
  overflow: hidden;
  border-bottom: 1px solid #E6E6E6;
  max-height: 1px;
  transition: max-height 0.5s ease-in-out;
}

.accordion:hover .accordion__content {
  border-bottom: 1px solid #A7A7A7!important;
}

.accordion input:checked ~ .accordion__content {
  max-height: 999px;
}

.accordion__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: #5C5C5C;
  margin-bottom: 20px;
}

Accordion com ícone

Preview

HTML

<div class="accordion">
   <input type="checkbox" id="accordion-1" />
   <label for="accordion-1" class="accordion__item">
       <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M10 9.16669V6.66669L13.3334 10L10 13.3334V10.8334H6.66669V9.16669H10ZM10 1.66669C14.6 1.66669 18.3334 5.40002 18.3334 10C18.3334 14.6 14.6 18.3334 10 18.3334C5.40002 18.3334 1.66669 14.6 1.66669 10C1.66669 5.40002 5.40002 1.66669 10 1.66669ZM10 16.6667C13.6834 16.6667 16.6667 13.6834 16.6667 10C16.6667 6.31669 13.6834 3.33335 10 3.33335C6.31669 3.33335 3.33335 6.31669 3.33335 10C3.33335 13.6834 6.31669 16.6667 10 16.6667Z" fill="currentColor"/>
       </svg>
       <span>How do I make smooth scroll</span>
       <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M12 15L7.75702 10.757L9.17202 9.34299L12 12.172L14.828 9.34299L16.243 10.757L12 15Z" fill="currentColor"/>
       </svg>
   </label>

  <div class="accordion__content">
     <p class="accordion__text">
        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.
     </p>
  </div>
</div>

CSS

.accordion {
  width: 100%;
  height: auto;
  background-color: #fff;
  color: #434343;
  display: flex;
  flex-direction: column;
}

.accordion input{
  display: none;
}

.accordion__item{
  width: 100%;
  min-height: 36px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  color: #434343;
  font-size: 18px;
  font-weight: 500;
  line-height: 21.6px;
  cursor: pointer;
}

.accordion__item span{
  margin-right: auto;
  margin-left: 8px;
}

.accordion__item svg {
  color: #434343;
  transition: transform 0.5s ease-in-out;
}

.accordion:hover .accordion__item,
.accordion:hover .accordion__item svg path {
  color: #000000;
}

.accordion input:checked ~ .accordion__item svg,
.accordion input:checked ~ .accordion__item{
  color: #000000;
}

.accordion input:checked ~ .accordion__item svg:last-of-type {
  transform: rotate(-180deg);
}

.accordion__content { 
  overflow: hidden;
  border-bottom: 1px solid #E6E6E6;
  max-height: 1px;
  transition: max-height 0.5s ease-in-out;
}

.accordion:hover .accordion__content {
  border-bottom: 1px solid #A7A7A7!important;
}

.accordion input:checked ~ .accordion__content {
  max-height: 999px;
}

.accordion__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: #5C5C5C;
  margin-bottom: 20px;
}

Accordion com borda

Preview

HTML

<label for="accordion-1" class="accordion">
    <input type="checkbox" id="accordion-1" />
    <div for="accordion-1" class="accordion__item">
        How do I make smooth scroll
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 15L7.75702 10.757L9.17202 9.34299L12 12.172L14.828 9.34299L16.243 10.757L12 15Z" fill="currentColor"/>
        </svg>
    </div>

   <div class="accordion__content">
      <p class="accordion__text">
         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.
      </p>
   </div>
</label>

CSS

.accordion {
  width: 100%;
  height: auto;
  background-color: #fff;
  color: #434343;
  display: flex;
  flex-direction: column;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  padding: 16px;
  cursor: pointer;
}

.accordion:hover{
  border: 1px solid #A7A7A7;
}

.accordion input {
  display: none;
}

.accordion__item {
  width: 100%;
  min-height: 24px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: #434343;
  font-size: 18px;
  font-weight: 500;
  line-height: 21.6px;
  cursor: pointer;
}

.accordion__item svg {
  color: #434343;
  transition: transform 0.5s ease-in-out;
}

.accordion:hover .accordion__item,
.accordion:hover .accordion__item svg path {
  color: #000000;
}

.accordion input:checked~.accordion__item svg,
.accordion input:checked~.accordion__item {
  color: #000000;
}

.accordion input:checked~.accordion__item svg {
  transform: rotate(-180deg);
}

.accordion__content {
  overflow: hidden;
  max-height: 0px;
  transition: all 0.5s;
}

.accordion input:checked~.accordion__content {
  max-height: 999px;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid #E6E6E6;
}

.accordion__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: #5C5C5C;
  cursor: text;
}

Accordion com borda e ícone

Preview

HTML

<label for="accordion-1" class="accordion">
   <input type="checkbox" id="accordion-1" />
   <div class="accordion__item">
       <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M10 9.16669V6.66669L13.3334 10L10 13.3334V10.8334H6.66669V9.16669H10ZM10 1.66669C14.6 1.66669 18.3334 5.40002 18.3334 10C18.3334 14.6 14.6 18.3334 10 18.3334C5.40002 18.3334 1.66669 14.6 1.66669 10C1.66669 5.40002 5.40002 1.66669 10 1.66669ZM10 16.6667C13.6834 16.6667 16.6667 13.6834 16.6667 10C16.6667 6.31669 13.6834 3.33335 10 3.33335C6.31669 3.33335 3.33335 6.31669 3.33335 10C3.33335 13.6834 6.31669 16.6667 10 16.6667Z" fill="currentColor"/>
       </svg>
       <span>How do I make smooth scroll</span>
       <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M12 15L7.75702 10.757L9.17202 9.34299L12 12.172L14.828 9.34299L16.243 10.757L12 15Z" fill="currentColor"/>
       </svg>
   </div>

  <div class="accordion__content">
     <p class="accordion__text">
        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.
     </p>
  </div>
</label>

CSS

.accordion {
  width: 100%;
  max-width: 500px;
  height: auto;
  background-color: #fff;
  color: #434343;
  display: flex;
  flex-direction: column;
  border: 1px solid #E6E6E6;
  border-radius: 4px;
  padding: 16px;
  cursor: pointer;
}

.accordion:hover {
  border: 1px solid #A7A7A7;
}

.accordion input {
  display: none;
}

.accordion__item {
  width: 100%;
  min-height: 24px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  color: #434343;
  font-size: 18px;
  font-weight: 500;
  line-height: 21.6px;
  cursor: pointer;
}

.accordion {
  width: 100%;
  height: auto;
  background-color: #fff;
  color: #434343;
  display: flex;
  flex-direction: column;
}

.accordion input {
  display: none;
}

.accordion__item {
  width: 100%;
  min-height: 24px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  color: #434343;
  font-size: 18px;
  font-weight: 500;
  line-height: 21.6px;
  cursor: pointer;
}

.accordion__item span {
  margin-right: auto;
  margin-left: 8px;
}

.accordion__item svg {
  color: #434343;
  transition: transform 0.5s ease-in-out;
}

.accordion:hover .accordion__item,
.accordion:hover .accordion__item svg path {
  color: #000000;
}

.accordion input:checked~.accordion__item svg,
.accordion input:checked~.accordion__item {
  color: #000000;
}

.accordion input:checked~.accordion__item svg:last-of-type {
  transform: rotate(-180deg);
}

.accordion__content {
  overflow: hidden;
  max-height: 0px;
  transition: all 0.5s;
}

.accordion input:checked~.accordion__content {
  max-height: 999px;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid #E6E6E6;
}

.accordion__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: #5C5C5C;
  cursor: text;
}

Accordion sem ícone e com destaque quando ativo

Preview

HTML

<div class="accordion__container">
  <input type="checkbox" id="accordion-1" />
  <label for="accordion-1" class="accordion">
      <div class="accordion__item">
          How do I make smooth scroll
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 15L7.75702 10.757L9.17202 9.34299L12 12.172L14.828 9.34299L16.243 10.757L12 15Z" fill="currentColor"/>
          </svg>
      </div>

    <div class="accordion__content">
        <p class="accordion__text">
          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.
        </p>
    </div>
  </label>
</div>

CSS

.accordion {
  width: 100%;
  height: auto;
  background-color: #fff;
  color: #434343;
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: 4px;
  cursor: pointer;
}

.accordion__container input:checked ~ .accordion{
  background-color: #F5F5F5;
}

.accordion__container input {
  display: none;
}

.accordion__item {
  width: 100%;
  min-height: 36px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  color: #434343;
  font-size: 18px;
  font-weight: 500;
  line-height: 21.6px;
  cursor: pointer;
  border-bottom: 1px solid #E6E6E6;
}

.accordion__item svg {
  color: #434343;
  transition: transform 0.5s ease-in-out;
  border-radius: 99px;
  background-color: #F5F5F5;
}

.accordion:hover .accordion__item svg {
  background-color: #E6E6E6!important;
}

.accordion:hover .accordion__item,
.accordion:hover .accordion__item svg path {
  color: #000000;
}

.accordion__container input:checked~.accordion__item svg,
.accordion__container input:checked~.accordion__item {
  color: #000000;
}

.accordion__container input:checked~ .accordion .accordion__item svg {
  transform: rotate(-180deg);
  background-color: #fff;
}

.accordion__content {
  overflow: hidden;
  max-height: 1px;
  transition: max-height 0.5s ease-in-out;
}

.accordion:hover .accordion__item {
  border-bottom: 1px solid #A7A7A7 !important;
}

.accordion__container input:checked~ .accordion .accordion__content {
  max-height: 999px;
}

.accordion__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: #5C5C5C;
  padding-top: 16px;
  cursor: text;
}

Accordion com ícone e com destaque quando ativo

Preview

HTML

<div class="accordion__container">
  <input type="checkbox" id="accordion-1" />
  <label for="accordion-1" class="accordion">
      <div class="accordion__item">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 9.16669V6.66669L13.3334 10L10 13.3334V10.8334H6.66669V9.16669H10ZM10 1.66669C14.6 1.66669 18.3334 5.40002 18.3334 10C18.3334 14.6 14.6 18.3334 10 18.3334C5.40002 18.3334 1.66669 14.6 1.66669 10C1.66669 5.40002 5.40002 1.66669 10 1.66669ZM10 16.6667C13.6834 16.6667 16.6667 13.6834 16.6667 10C16.6667 6.31669 13.6834 3.33335 10 3.33335C6.31669 3.33335 3.33335 6.31669 3.33335 10C3.33335 13.6834 6.31669 16.6667 10 16.6667Z" fill="currentColor"/>
          </svg>
          <span>How do I make smooth scroll</span>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 15L7.75702 10.757L9.17202 9.34299L12 12.172L14.828 9.34299L16.243 10.757L12 15Z" fill="currentColor"/>
          </svg>
      </div>

    <div class="accordion__content">
        <p class="accordion__text">
          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.
        </p>
    </div>
  </label>
</div>

CSS

.accordion {
  width: 100%;
  height: auto;
  background-color: #fff;
  color: #434343;
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: 4px;
  cursor: pointer;
}

.accordion__container input:checked ~ .accordion{
  background-color: #F5F5F5;
}

.accordion__container input {
  display: none;
}

.accordion__item {
  width: 100%;
  min-height: 36px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  color: #434343;
  font-size: 18px;
  font-weight: 500;
  line-height: 21.6px;
  cursor: pointer;
  border-bottom: 1px solid #E6E6E6;
}

.accordion__item span {
  margin-right: auto;
  margin-left: 8px;
}

.accordion__item svg:last-of-type {
  color: #434343;
  transition: transform 0.5s ease-in-out;
  border-radius: 99px;
  background-color: #F5F5F5;
}

.accordion:hover .accordion__item svg:last-of-type {
  background-color: #E6E6E6!important;
}

.accordion:hover .accordion__item,
.accordion:hover .accordion__item svg path {
  color: #000000;
}

.accordion__container input:checked~.accordion__item svg,
.accordion__container input:checked~.accordion__item {
  color: #000000;
}

.accordion__container input:checked~ .accordion .accordion__item svg:last-of-type {
  transform: rotate(-180deg);
  background-color: #fff;
}

.accordion__content {
  overflow: hidden;
  max-height: 1px;
  transition: max-height 0.5s ease-in-out;
}

.accordion:hover .accordion__item {
  border-bottom: 1px solid #A7A7A7 !important;
}

.accordion__container input:checked~ .accordion .accordion__content {
  max-height: 999px;
}

.accordion__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: #5C5C5C;
  padding-top: 16px;
  cursor: text;
}