JSFiddle - React, Tailwind, and code Playground

by Adam Azad

HTML

<p id="text" data-display="true">Hello World</p>

<button data-action="toggle">Show</button>

CSS

body {
  text-align:center;
}
p {
  font-family:"Open Sans", sans-serif;
  font-size:24px;
  font-weight:bold;
}
p[data-display="true"] {
  display:inline-block;
}
p[data-display="false"] {
  display:none;
}
button[data-action="toggle"] {
  position:absolute;
  width:100px;
  padding:10x 20px;
  margin:auto;
  left:0;
  right:0;
  bottom:30px;
  color: #ffffff;
  background-color: #88C100;
  border:1px solid #88C100;
}

JavaScript

if(window.sessionStorage) {

    $(function(){
        
        // Set initial value;
        sessionStorage.someKey = 

        $('[data-action="toggle"]').on('click', function(e){
             e.preventDefault();
             if( $('#text'). ) {
             
             } else {
                
             }
        }):
    });

} else {
   alert("Your browser doesn't support Web Storage API :(");
}



function updateValue(v) {
    sessionStorage.setItem('shown', v);
}

function getValueFromStorage() {
   if( sessionStorage.shown == 'true') {
       $('#text').attr('data-display','true');
   } else {
       $('#text').attr('data-display','false');
   }
}