JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<input type="radio" name="showHide" value="show" /> Show | <input type="radio" name="showHide" value="hide" checked="checked" /> Hide
<div id="content">
    <p>Nulla porttitor accumsan tincidunt. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta. Nulla porttitor accumsan tincidunt. Donec rutrum congue leo eget malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p>

<p>Nulla porttitor accumsan tincidunt. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta.</p>

<p>Donec sollicitudin molestie malesuada. Donec sollicitudin molestie malesuada. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p>

<p>Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Pellentesque in ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Sed porttitor lectus nibh.</p>
</div>

CSS

div#content{
    display:none;
    border: 3px dotted blue;
    margin: 5px;
    padding: 5px;
}

JavaScript

$(function(){
    $("[name=showHide]").on("change", function(){
        
        // Let's get the value, just to check
        var myVal = $(this).val();
        console.log(myVal);
        if (myVal === "show") {
            $("#content").show();
        } else if (myVal === "hide") {
            $("#content").hide();
        }
    });
});