JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="project">
  <ul id="project_menu" class="project_menu">
    <li id="menu-php-mysql" data-projectID="php-project">PHP/MySQL</li>
    <li id="menu-nodejs" data-projectID="node-project">NodeJS</li>
    <!-- more code -->
  </ul>
  <div class="project-detail">
    <div id="php-project">
      <i class="ion-ios-close-empty close-icon js-close-icon"></i>
      <div classs="project-text">
        PHP project text
        <!-- data about project -->
      </div>
    </div>
    <div id="node-project">
      <i class="ion-ios-close-empty close-icon js-close-icon"></i>
      <div classs="project-text">
        Node Project Text
        <!-- data about project -->
      </div>
      <!-- and so on.. -->
    </div>
  </div>
</div>

CSS

.project_menu > li{
  cursor: pointer;
}
.project-detail{
  width: 300px;
  height: 100px;
  background-color: #dedede;
  overflow: hidden;
  position: relative;
}

.project-detail > div{
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 10px;
  background-color: #fefefe;
  position: absolute;
  right: 300px;
}

JavaScript

$(document).ready(function() {
  console.log('at 1');
  $('.project-detail > div:first-child').css("right","0px");
  itemsToRender = [];
  $('#project_menu li').click(function(e) {
		console.log('at 3');
    menuItemId = (e.currentTarget.id);
    console.log('menuItemId = '+menuItemId);
    $('.common').hide();
		
    console.log('at 4');
    $(getProjectId(menuItemId)).css('display', 'inline');
    console.log($('.project-detail > div'));
		var value = '0px';
  	console.log('value = '+value);
    $(getProjectId(menuItemId)).animate({
      right: '0px'

    }, 800);
    var req = '.project-detail > div';
    $('.project-detail > div').not($(getProjectId(menuItemId))).animate({
    	right: '300px'
    }, 800);

  });
  console.log('at 2');
});

function getProjectId(menuItemId) {

  if (menuItemId.indexOf('php') > 0) {
    return '#php-project';

  } else if (menuItemId.indexOf('node') > 0) {
    return '#node-project';

  } else if (menuItemId.indexOf('angular') > 0) {
    return '#angular-project';

  } else if (menuItemId.indexOf('mean') > 0) {
    return '#mean-project';

  }
}