JSFiddle - React, Tailwind, and code Playground

by Chris Getz

HTML

<button onclick="document.getElementById('stuff').innerHTML='Clicked First Button';">Button Left
</button>
<button onclick="document.getElementById('stuff').innerHTML='Clicked Second Button';">Button Right
</button>
<p>This code shouldn't change.
</p>
<p id="stuff">This will change.
</p>
<p>This won't either.
</p>
<button onclick="openMe()">open
</button>
<button onclick="closeMe()">Close
</button>
<p id="demo"> Extra details...You can open and close this paragraph using the buttons above.
</p>
<script>
function closeMe(){
		x=document.getElementById("demo");
    x.style.display="none";
    //x.className="closed";
}


function openMe(){
		x=document.getElementById("demo");
    x.style.display="block";
    //x.className="open";
}</script>

CSS

p{border-style:solid;
background-color: lightblue;}

.closed{display:none;}
.open{display:block;}

JavaScript

/*
function closeMe(){
		x=document.getElementById("demo");
    x.style.display="none";
    //x.className="closed";
}


function openMe(){
		x=document.getElementById("demo");
    x.style.display="block";
    //x.className="open";
}
*/