JSFiddle - React, Tailwind, and code Playground

by Arturo Gallegos

HTML

<ul class="toggle">
    <li><strong class="title">titulo</strong>
        <div>Ajustando el background-size se puede hacer magia. Con esto ajustamos el tamaño de nuestro patrón, para así realizar un bonito efecto.Se puede realizar el mismo efecto con la propiedad repeating-linear-gradient, nos dará el mismo efecto anterior. Se están utilizando ahora, en lugar de porcentajes, medidas fijas. Con esto podremos personalizar aún más nuestro efecto a desear.</div>
    </li>
    <li><strong class="title">titulo</strong>
        <div>Ajustando el background-size se puede hacer magia. Con esto ajustamos el tamaño de nuestro patrón, para así realizar un bonito efecto.Se puede realizar el mismo efecto con la propiedad repeating-linear-gradient, nos dará el mismo efecto anterior. Se están utilizando ahora, en lugar de porcentajes, medidas fijas. Con esto podremos personalizar aún más nuestro efecto a desear.</div>
    </li>
    <li><strong class="title">titulo</strong>
        <div>Ajustando el background-size se puede hacer magia. Con esto ajustamos el tamaño de nuestro patrón, para así realizar un bonito efecto.Se puede realizar el mismo efecto con la propiedad repeating-linear-gradient, nos dará el mismo efecto anterior. Se están utilizando ahora, en lugar de porcentajes, medidas fijas. Con esto podremos personalizar aún más nuestro efecto a desear.</div>
    </li>
</ul>

CSS

.toggle{list-style:none;margin:20px;padding:0;}
.toggle>li{margin:3px 0;border:1px #000 solid;}
.toggle>li>strong{display:block;font:13px/33px arial,verdana,tahoma;color:#fff;background:#222;padding:0 15px;cursor:pointer;}
.toggle>li>div{display:none;padding:15px;}

JavaScript

$('.toggle>li>.title').click(function(){
    if($(this).parent().hasClass('active')){
      $(this).next().slideUp('slow').parent().removeClass('active');
    }else{            $('.toggle>li').removeClass('active').children('div').slideUp('slow');
          $(this).next().slideDown('slow').parent().addClass('active');
        }
});