JSFiddle - React, Tailwind, and code Playground

by k_rma

HTML

<input type="checkbox" id="terms" name="terms" value="yes" class="tick2" />
<div id="content_more">CONTENT MORE</div>

CSS

#content_more {
    width: 990px;
    margin: auto;
    background: #ddd;
    height: auto;
    overflow: hidden;
    margin-top:50px;
    font-family:'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
    font-size:14px;
    background-color: white;
    padding: 9px 11px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #c5c5c5;
    -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
    -moz-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-bottom:60px;
    display:none;
}

JavaScript

$(function () {
    $('.tick2').click(function () {
        ($(this).is(':checked')) ? $("#content_more").show() : $("#content_more").hide();
    });
});