JSFiddle - React, Tailwind, and code Playground

HTML

<div class="js-accordian" style="display: none;">
<div class="js-accord-row" data-accord-open="false">
    <span class="js-accord-target">This is what you click</span>
    <div class="js-accord-content">
    shit here
    </div>
</div>
<div class="js-accord-row" data-accord-open="false">
    <span class="js-accord-target">This is what you click</span>
    <div class="js-accord-content">
    more shit here
    </div>
</div>
<div class="js-accord-row" data-accord-open="false">
    <span class="js-accord-target">This is what you click</span>
    <div class="js-accord-content">
    last of the shit
    </div>
</div>
<div class="js-accord-row" data-accord-open="true">
    <span class="js-accord-target">This is what you click</span>
    <div class="js-accord-content">
    viewing shit in here
    </div>
    <div class="js-accord-content">
    </div>
</div>
</div>

JavaScript

(function($) {
    // Accordian Plugin
    var methods = {
        init: function(options) {
            var settings = $.extend({
                'slide': true
            }, options);

            return this.each(function() {
                var $container = $(this);
                var $accords = $('.js-accord-row');
/*
                var close = $.slideUp('fast') ? settings.slide === true : hide();
                var open = $.slideDown('fast') ? settings.slide === true : show();
                */
                // Loop through all elements and see which ones are initially set to closed
                $.each($accords, function(i, el) {
                    if ($(el).data('accord-open') === false) {
                        $(el).find('.js-accord-content').hide();
                    }
                    // Hide the container initially to prevent a slight jarring which is basically us looping through the items and hiding them if they are visible
                    $container.show();
                });
                
                $accords.on('click', $accords, function() {
                   var $accord = $(this);
                    if ($accord.data('accord-open') == true) {
$accord.find('.js-accord-content').slideUp('fast');
                        $accord.data('accord-open', false);
                    } else {
$accord.find('.js-accord-content').slideDown('fast');
 $accord.data('accord-open', true);
                    }                        
                    
                });

                // They clicked on an accord so show it all change it's data status to open and hide all the other ones.
                /*
                $accords.on('click', $accords, function() {
                    var $accord = $(this);
                    if ($accord.data('accord-open') === true) {
                        $accord.find('.js-accord-content').slideUp('fast');
                        $accord.data('accord-open', false);
                    } else...