JSFiddle - React, Tailwind, and code Playground

HTML

<button>Show it!</button>
<div>
    <p>JSON:<pre>{ "Data": ["Text", "XML"] }</pre></p>
</div>

CSS

button {
    width: 100px;
    height: 30px;
    font-weight: 600;
    color: #fff;
    background-color: #38F;
    border: 1px solid #BDF; 
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

div {
    margin-top: 10px;
    padding: 5px 20px 5px 20px;
    display: none;
    background-color: #DDD;
    border: 1px solid #AAA;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;

}

JavaScript

jQuery.fn.extend({
    toggleText: function(stateOne, stateTwo) {
        return this.each(function() {
            stateTwo = stateTwo || '';
            console.log(stateOne, stateTwo, $(this).text());
            $(this).text() !== stateTwo  && stateOne
            ? $(this).text(stateTwo)
            : $(this).text(stateOne);
        });  
    }
});

$('button').on('click', function() {
    $(this).toggleText('Show it!', 'Hide it!').next().toggle();
});