JSFiddle - React, Tailwind, and code Playground

by Thiago Diniz

HTML

<div id="accordeon-list" class="accordeon-list">
  <div class="accordeon-item">
    <div class="accordeon-title">Item 1</div>
    <div class="accordeon-content">Item Conteudo</div>
  </div>

  <div class="accordeon-item">
    <div class="accordeon-title">Item 2</div>
    <div class="accordeon-content">Item Conteudo</div>
  </div>

  <div class="accordeon-item">
    <div class="accordeon-title">Item 3</div>
    <div class="accordeon-content">Item Conteudo</div>
  </div>

  <div class="accordeon-item">
    <div class="accordeon-title">Item 4</div>
    <div class="accordeon-content">Item Conteudo</div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
  font-family: sans-serif
}

.accordeon-list {
  padding: 15px
}

.accordeon-item {
  margin: 0 auto 5px;
  padding: 8px;
  max-width: 600px;
  border: 1px solid #e2e2e2;
  list-style: none;
  position: relative;
  cursor: pointer
}

.accordeon-item:after {
  content: "+";
  top: 8px;
  right: 8px;
  position: absolute
}

.accordeon-item.active {
  background-color: #ddd
}

.accordeon-item.active:after {
  content: "-"
}

.accordeon-content {
  margin-top: 8px;
  display: none
}

JavaScript

$('.accordeon-title').on('click', function(event) {
  event.preventDefault();
  var item = $(this);

  if (item.din('.accordion-sublist').hasClass('active')) {
    item.removeClass('active');
    item.next('.accordion-sublist').slideUp('fast').removeClass('active');
  } else {
    $('.accordion-link.active').removeClass('active');
    item.addClass('active');
    $('.accordion-sublist.active').slideUp('fast').removeClass('active');
    item.next('.accordion-sublist').slideDown('fast').addClass('active')
  }
});