JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<h2>Default options:</h2>
<p>These are the default options. Clicking them will give you more information about each options.</p>

<ul>
    <li>
        <div>toggletext1: null</div> 
        <span class="more">// Text string. Shown when primary is visible.</span>
    </li>
    <li>
        <div>toggletext2: null</div> 
        <span class="more">// Text string. Shown when secondary is visible.</span>
     </li>
    <li>
        <div>slide: 'up'</div>
        <span class="more">// values: 'up', 'down', 'right', 'left'. </span>
    </li>
    <li>
        <div>fade: false</div>
        <span class="more">// When set to true, it overrides sliding and uses fade.</span>
    </li>
    <li>
        <div>biggerwins: false</div> <span class="more">// ---</span></li>
    <li><div>speedin: 400</div>      <span class="more">// Animation speed when showing secondary box.</span></li>
    <li>
        <div>speedout: 400</div>     <span class="more">// Animation speed when hiding secondary box</span></li>
    <li>
        <div>easein: "swing"</div>   <span class="more">// Easing for showing secondary box.</span></li>
    <li>
        <div>easeout: "swing"</div>  <span class="more">// Easing for hiding sexondary box.</span></li>
    <li>
        <div>ready: function() {}</div>      <span class="more">// Plugin is all setup and ready to roll.</span></li>
    <li>
        <div>eventIn: function() {}</div>    <span class="more">// Event In triggered.</span></li>
    <li>
        <div>eventOut: function() {}</div>   <span class="more">// Event Out triggered.</span></li>
    <li>
        <div>animateIn: function() {}</div>  <span class="more">// Animate In ended.</span></li>
    <li>
        <div>animateOut: function() {}</div>  <span class="more">// Animate Out ended.</span></li>
</ul>

CSS

html {
    font-size: 13px;
    font-family: Arial;
    color: #fff;
    background: #222;
    margin: 20px;
}

ul li {
    padding: 4px;
}

ul .comment {
    color: #999;
}

ul .more {
    display: none;
}

JavaScript

$("ul li").on("click", function() {
    
    var options = $(this),
        more = '.more',
        oMore = options.find( more );
    
    var SH = oMore.is(':visible') ? 'hide' : 'show';
    
    oMore[ SH ]();
    
    options.siblings().find( more ).hide();
    
});