JSFiddle - React, Tailwind, and code Playground

by neohekate

HTML

<div id="sidebar">
  <ul>
    <li>
      First
    </li>
    <li>
      Second
    </li>
    <li>
      Third
    </li>
  </ul>
</div>
<div id="content">
  <ul>
    <li>
      Content 1 Yadda Yadda
    </li>
    <li>
      Content 2 Yadda Yadda
    </li>
    <li>
      Content 3 Yadda Yadda
    </li>
  </ul>
</div>

CSS

* {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
}

#sidebar {
  width: 180px;
  height: calc(100% - 20px);
  padding: 10px;
  background-color: blue;
  float: left;
}

#content {
  width: calc(100% - 220px);
  height: calc(100% - 20px);
  padding: 10px;
  float: right;
}

#content li {
  display: none;  
}

.activeBar {
  color: hotpink;
  background-color: white;
}

.activeContent {
  display: block;
}

JavaScript

$(document).ready(function() {
	function setDivs() {
  	$.each($('#sidebar ul li'), function(ind) {
     $(this).attr('id', 'menuitem-' + parseInt(ind + 1));
  	});
    
    $.each($('#content ul li'), function(ind) {
     $(this).attr('id', 'menuitem-' + parseInt(ind + 1));
  	});
  }
  
  setDivs('sidebar');
  setDivs('content');

	$('#sidebar ul li').on('click', function() {
    if (!$(this).hasClass('activeBar')) {
    	$('.activeBar').removeClass('activeBar');
      $(this).addClass('activeBar');
    }
  });
});