JSFiddle - React, Tailwind, and code Playground

HTML

<div id=chatbox>
    <p><i>15:21</i><b data-c=john>john</b>: hello jack</p>
    <p><i>15:22</i>i want to tell you something</p>
    <p><i>17:17</i><b data-c=jack>jack</b>: hi john.</p>
    <p class=hidden><i>20:15</i>Ο <span data-c=server>server</span> alex joined the chat</p>
    <p><i>17:17</i><b data-c=alex>alex</b>: hi all of you.</p>
</div>
<button id="show_hidden">Show</button>

CSS

.hidden {display: none;}

JavaScript

var button = document.getElementById('show_hidden'),
    hidden = true;

button.addEventListener('click', function() {
    var st = document.getElementById('myStyle');
    
    if (st) {
        st.innerHTML = '.hidden { display: '+ (hidden?'block':'none') +'; }';
    }else{
        var css = '.hidden { display: block; }',
            head = document.head || document.getElementsByTagName('head')[0],
            style = document.createElement('style');
    
        style.type = 'text/css';
        style.id   = 'myStyle';
        
        if (style.styleSheet){
            style.styleSheet.cssText = css;
        } else {
            style.appendChild(document.createTextNode(css));
        }
        head.appendChild(style);
    }
    
    button.innerHTML = (hidden ? 'Hide' : 'Show');
    hidden = !hidden;
}, false);