JSFiddle - React, Tailwind, and code Playground

by creature_x

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: right;
    max-width: 50%;
    margin-right: 75px;
    color: #fff; 
}

#php-project {
   background-color:#9b59b6;
    margin: 30px;
    display:none;

}
#node-project {
   background-color:#27ae60;
    margin: 30px;
    display:none;
}

.project-container{
  transition: all 1s;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
}

.project-container.open{
  transform: translateX(-200px);
  -webkit-transform: translateX(-200px);
  -moz-transform: translateX(-200px);
    display: inline-block;
}

JavaScript

$(document).ready(function() {
   
    itemsToRender = [];
    $('ul#project_menu li').click(function(e) {
       
        
         
        $('.common').hide();
        menuItemId = (e.currentTarget.id);
        var projectId = getProjectId(menuItemId);
        console.log(projectId);
        
        $('.project-container.open').removeClass('open');
        $(projectId).addClass('open');
        
        
       /* $(projectId).fadeIn('slow'); <--- THIS WORKS! But I want the slide effect instead  */
       });
       
  
  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';
     
    }          
}
       
       
 });