JSFiddle - React, Tailwind, and code Playground

by lbstr

HTML

<button id="b1" type="button" data-mode="hide">Hide div</button>
<button id="b2" type="button">Print Data</button>
<div id="d" data-food="taco">I'm the div with the data</div>
<div id="results"></div>

JavaScript

$('#b1').click(function(){
    var $this = $(this),
        mode = $this.data('mode');
    
    if (mode === "hide") {
        $('#d').hide();
        $this.data('mode', 'show').text("Show div");
    }
    else if (mode === "show") {
        $('#d').show();
        $this.data('mode', 'hide').text("Hide div");
    }    
});
    
$('#b2').click(function(){
    $('#results').append('<span>' + $('#d').data('food') + '</span><br>');
});

$('#results').append('<span>' + $('#d').data('food') + '</span><br>');
$('#d').hide(20, function(){
    $('#results').append('<span>' + $('#d').data('food') + '</span><br>');
    $('#d').show(20, function(){
        $('#results').append('<span>' + $('#d').data('food') + '</span><br>');
    });
});