JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<ul>
    <li class="closed">list item 1</li>
    <li class="closed">list item 2</li>
    <li class="closed">list item 3</li>
    <li class="closed">list item 4</li>
    <li class="closed">list item 5</li>
    <li class="closed">list item 6</li>
</ul>

CSS

.closed{
  background-color: lightgrey;

}

.open{
  padding: 20px;
  background-color: grey;
}

JavaScript

/*toggle css classes in a list*/
/*
$("li").on(
    "click", function () {      
      if($(this).hasClass('open')){
         $(this).removeClass('open').addClass('closed');
    }
    else{
      $('li').removeClass('open').addClass('closed');
      $(this).addClass('open').removeClass('closed');
    }
    });


*/
/*
function open_close() {  
    var myStat = $(this).hasClass('open');
    $("li").removeClass('open').addClass('closed');      
    if(!myStat){
         $(this).addClass('open').removeClass('closed');
    }
}

$("li").on(
    "click", open_close);

*/
$("li").on(
    "click", function () {
         $(this).toggleClass('open').toggleClass('closed');
         $('li').not($(this)).removeClass('open').addClass('closed');    
});