JSFiddle - React, Tailwind, and code Playground

by Justin Breen

HTML

<!-- Expand Plugin -->

JavaScript

/**
     * Expand Plugin
     */

    (function ($) {
        $.fn.extend({
            expand: function (o) {
                var d = {
                    speed: 300,
                    // toggle: '.element h2'
                }
                var o = $.extend(d, o);
                var t = this;

                t.each(function () {

                    /**
                     * Decide toggle
                     * 1: Options
                     * 2: Previous element
                     * 3: Make
                     */

                    if (o.toggle) {
                        var toggle = o.toggle;
                    } else if ($(this).prev().length > 0) {
                        var toggle = $(this).prev();
                    } else {
                        var toggle = $('<button id="unique-id" type="button">Expand Content</button>');
                        $(this).before(toggle);
                    }

                    /**
                     * Append toggle with svg icon
                     */

                    toggle.addClass('expand-toggle').append('<svg viewBox="0 0 451.847 451.847" xmlns="http://www.w3.org/2000/svg"><path d="M225.923 354.706c-8.098 0-16.195-3.092-22.369-9.263L9.27 151.157c-12.359-12.359-12.359-32.397 0-44.751 12.354-12.354 32.388-12.354 44.748 0l171.905 171.915 171.906-171.909c12.359-12.354 32.391-12.354 44.744 0 12.365 12.354 12.365 32.392 0 44.751L248.292 345.449c-6.177 6.172-14.274 9.257-22.369 9.257z"/></svg>');

                    /**
                     * Detect state
                     * || Toggle attribute aria-expanded not true
                     * || Toggle attribute class active
                     * || Target attribute class active
                     */

                    if (toggle.attr('aria-expanded') != 'true' && !toggle.hasClass('active') && !t.hasClass('active')) {
                        t.hide().removeClass('active');
                        toggle.attr('aria-expanded',...