JSFiddle - React, Tailwind, and code Playground

by Iván Pereira

HTML

<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>
  </ul>

  <div class="project-detail">

    <div id="php-project" class="project-container common">
      <i class="ion-ios-close-empty close-icon js-close-icon"></i>
      <div classs="project-text">
        <h2 class="project-label">Project title: <span class="project-name"> php project</span></h2>
      </div>
    </div>
    <!-- end of php-project -->

    <div id="node-project" class="project-container common">
      <i class="ion-ios-close-empty close-icon js-close-icon"></i>
      <div classs="project-text">
        <h2 class="project-label">Project title: <span class="project-name"> node project</span></h2>
      </div>
    </div>
    <!-- end of node-project -->

  </div>
  <!-- end of project-detail -->

</div>
<!-- end of project  -->

CSS

.project-detail {
  float: left;
  max-width: 50%;
  position: relative;
  width: 50%;
}

#php-project {
   background-color:#9b59b6;
}
#node-project {
   background-color:#27ae60;
}

.project-container {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  transform: translateX(-100%);
  width: 100%;
}

.project-container.open {
  opacity: 1;
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  transform: translateX(100%);
}

JavaScript

$(document).ready(function() {

  $('ul#project_menu li').click(function(e) {

    var menuItemId = (e.currentTarget.id);

    var projectId = getProjectId(menuItemId);
    
     $('.project-container.open').removeClass('open');
     $(projectId).addClass('open');

  });

});

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';

  } else if (menuItemId.indexOf('html5-css3-js') > 0) {
    return '#html-css-js-project';

  }

}