JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap2/bootstrap-switch.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.js"></script>
<div class="well text-center">
  <h1>Today's Games</h1>
  <br>
  <input type="checkbox" name="spoiler-checkbox" data-size="mini" data-on-color="danger" checked>
  <br />
  <label for="checkbox">Spoiler-Free</label>
</div>
    
<div class="col-xs-4 col-xs-offset-4">
  <table class="table table-bordered" id="Game1">
    <thead>
      <tr>
        <th class="status" colspan="3" id="timeleft">3:31 3rd Quarter</th>
        <th class="status" colspan="3" id="starttime">7:30pm EST</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="team" colspan="2">Bulls</td>
        <td class="score" colspan="1">59</td>
      </tr>
      <tr>
        <td class="team" colspan="2">Bucks</td>
        <td class="score" colspan="1">65</td>
      </tr>
    </tbody>
  </table>
</div>
<div style="clear:both"</div>
<hr>
<p><b>Notes for Helpers:</b></p>
<p>See <a href="http://www.bootstrap-switch.org/events.html">this</a>.</p>
<p>Clicking Toggle ON:</p>
<ol>
  <li>get toggle to hide .score and #timeleft and Unhide #starttime (7:30pm EST) </li>
  <li>Store this setting as localStorage</li>
  <li>reloading page will have switch in checked status and remember the above settings</li>
 </ol>
    
<p>Clicking Toggle OFF:</p>
<ol>
  <li>Hide #starttime, show .score and #timeleft</li>
  <li>Delete the localStorage</li>
  <li>reloading page will have switch in notchecked status and remember these settings</li>
 </ol>

CSS

#timeleft {
    color:red;
}

#starttime {
    display:none;
}

.team {
    font-weight: 700;
}

JavaScript

$( document ).ready(function() {

    
//Set the listener to store data on localstorage whenever event switch is fired
$("[name='spoiler-checkbox']").on('switchChange.bootstrapSwitch', function(event, state) {
// alert(state);
    if (localStorage)
    localStorage.setItem("ckbspoiler", state);
	$('.score').hide();
    $('#timeleft').hide();
    $('#starttime').show();
    
});
    

// retrieve the localstorace value for ckbspoiler and set the last saved status if any
var lastState = null;
if (localStorage)
    lastState = (localStorage.getItem("ckbspoiler")  === "true");
  //  alert(lastState);
//if(lastState != null) $("[name='spoiler-checkbox']").setState(lastState);
//if(lastState != null)  $("[name='spoiler-checkbox']").bootstrapSwitch('setState', lastState, true);
    if(lastState != null)  $("[name='spoiler-checkbox']").prop('checked', lastState);

    $("[name='spoiler-checkbox']").bootstrapSwitch();
    
    
    
 });