JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<input type="checkbox" id="1403317" value="" />
<div id="mainBox">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus bibendum velit, at accumsan erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ante lacus, iaculis ut varius at, rhoncus vel mi. Proin convallis mi at odio egestas, at sagittis lorem finibus. Praesent eleifend ornare auctor. Sed venenatis metus quam, ac porta felis porttitor nec. Sed ac nibh pellentesque mi ultricies imperdiet. Vestibulum ut feugiat ligula. Ut sagittis, massa et mollis tincidunt, dolor enim auctor sem, faucibus rutrum augue lorem ac purus. Maecenas commodo nunc nisi, sit amet egestas risus tristique quis. Sed mauris sem, varius in laoreet et, ultrices at urna. Praesent suscipit nec elit ac congue. Fusce nunc sem, porttitor rutrum libero sit amet, molestie placerat nibh.</p>
</div>

JavaScript

window.onload = onPageLoad();

function onPageLoad() { 

  $('#1403317').val('false');
  
  var checkBoxVal = $('#1403317').val();

  if(checkBoxVal =='true'){
    document.getElementById("1403317").checked = true;
    $('#mainBox').hide();
  }else {
    document.getElementById("1403317").checked = false;
    $('#mainBox').show();
  }

}

$(document).on('click', '#1403317', function(){	

  var checkBoxVal = $(this).val();

  if(checkBoxVal == 'true'){
    $(this).val('false');
    $('#mainBox').show();           
  }else{
    $(this).val('true');
    $('#mainBox').hide();
  } 

});