JSFiddle - React, Tailwind, and code Playground

by Gerald Gillespie

HTML

<div><span id="togglethis">---&gt;&gt;</span><span id="togglethis2">toggle this</span></div>

<div id="checkbox">
       <input id="checkthebox" type=checkbox checked=checked value="#togglethis"><label for="checkthebox">toggle that. hides "toggle this"</label>
</div>
<div>
    <input id="togglethat" type="button" value="#checkthebox"/><label for="togglethis">checkthe box tiggers the change of the check</label>
</div>
<div id="console"></div>
<input type=button value="clear console" id="clearconsole" />

CSS

div
{
    padding:10px;
    margin:5px;
    border: 1px solid black;
}

JavaScript

var $console = $('#console');
$('#checkthebox').change(function(e) {
    $console.append('begin change<br>');
    $console.append($(this).val() + '<br/>');
    $console.append($(this).prop('checked') + '<br/>');
    if ($(this).prop('checked') == true) {
        $($(this).val()).show();
        $(this).prop('checked', true);

    } else {
        $($(this).val()).hide();
        $(this).prop('checked', false);
    }
    $console.append($(this).val() + '<br/>');
    $console.append($(this).prop('checked') + '<br/>');
    $console.append('leaving change<br>-------<br/>');
    e.preventDefault();
}); //end change
$('#togglethat').click(function(e) {
    $console.append('begin click<br>');
    $console.append($($(this)).val() + ' ' + !($($(this)).prop('checked')) + '<br/>');
    // a
    $($(this).val()).prop('checked', ($($(this)).prop('checked'))).trigger('change');
    //.prop('checked', (($($(this)).prop('checked'))));
    $console.append($($(this)).val() + ' ' + $($(this)).prop('checked') + '<br/>');
    $console.append('leaving click<br/>-----<br/>');
}); // end click
$('#togglethis').click(function() {
    $('#togglethis2').toggle();
    $console.append(window.getComputedStyle(this).getPropertyValue("display") + '<br/>');
    var cond = !($('#checkthebox').prop('checked'));
    $('#checkthebox').prop('checked', cond);
  $console.append(window.getComputedStyle(this).getPropertyValue("display") + '<br/>');
}); //end click div
$('#clearconsole').click(function() {
    $console.html('');
});