JSFiddle - React, Tailwind, and code Playground

by JInks Peng

HTML

<div id='main'>
	<p id='x' data-expand='true' tabindex='0'>
		<span style='text-decoration:underline'>X</span> Collapse sidebar
	</p>
	<ul>
	  <li>one</li>		
	  <li>two</li>		
	  <li>three</li>		
	</ul>
</div>

CSS

#x{
  	cursor: pointer;
  }
  #main{
  	border:1px dotted  #ccc;
  	width: 400px;
  }

JavaScript

window.onload = function() {
  	var x = document.getElementById('x');
  	x.setAttribute('style','display:block');
  	x.onclick = expandOrShrink;
  	x.onkeypress = expandOrShrink;
  }
  function expandOrShrink() {
  	if(this.getAttribute('data-expand') === 'true') {
  		document.getElementById('main').setAttribute('style','width: 150px');
  		this.setAttribute('data-expand','false');
  	} else {
  		document.getElementById('main').setAttribute('style','width: 400px');
  		this.setAttribute('data-expand','true');
  	}
  }