JSFiddle - React, Tailwind, and code Playground

by aflynt

HTML

<div id="accordion">
    <h3 class="details-toggle"><span id="control-title">+ More</span></h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>
</div>

CSS

#control-title {
    color:#000000;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background: none;
    
}

JavaScript

$(function() {
    $( "#accordion" ).accordion();
  });
$(function(){
   $(".details-toggle").click(function () {
      $(this).find("#control-title").text(function(i, text){
          return text === "- Less" ? "+ More" : "- Less";
      })
   });
    $("#accordion").accordion({ header: "h3", collapsible: true, active: false });
});