JSFiddle - React, Tailwind, and code Playground

by rwaldron

HTML

<button>DOM A</button>
<button>DOM B</button>


<button>jQuery A</button>
<button>jQuery B</button>


<hr>
<div id="A" style="display:none;">
    AAAAAAAAAA
<div id="B" style="display:none;">
    BBBBBBBBBB
</div>

JavaScript

$("button").bind("click", function () {
    
    var $this = $(this), 
        data = ( $this.text() ).match( /(\w*)(\s)(\w)/ );
    
    console.log(data)
    if ( data[1] === "DOM" ) {
        document.getElementById( data[3] ).style.display = 
            document.getElementById( data[3] ).style.display=="block" ? 
                                                  "none" : "block";         
        return;
    }
    
    $("#" + data[3]).toggle();
    
});