Tukukkk

var showAbout   = document.getElementById("aboutBtn");

var hideAbout   = document.getElementById("aboutDiv");

var showproject = document.getElementById("projectBtn");

var hideproject = document.getElementById("projectDiv");



showAbout.addEventListener('click', function () {

    if (hideAbout.classList == 'hide') {

        hideAbout.classList = 'show';

        hideproject.classList = 'hide';

    } else {

        hideAbout.classList = 'hide';

        hideproject.classList = 'hide';

    }

});



showproject.addEventListener('click', function () {

    if (hideproject.classList == 'hide') {

        hideproject.classList = 'show';

        hideAbout.classList = 'hide';

    } else {

        hideproject.classList = 'hide';

        hideAbout.classList = 'hide';

    }

});

.show {

  display: block;

}



.hide {

  display: none;

}



#yourApp div {

  height: 120px;

  width: 120px;

}



#aboutDiv {

  background-color: pink;

}



#projectDiv {

  background-color: dodgerblue;

}



#aboutBtn {

  background-color: pink

}



#projectBtn {

  background-color: dodgerblue

}

<div id="yourApp">

  <div id='aboutDiv' class='show'>About</div>

  <div id='projectDiv' class='hide'>Project</div>

  

  <button id="aboutBtn">About</button>

  <button id="projectBtn">Project</button>

</div>

!function () {

  var aboutBtn = document.getElementById("aboutBtn");

  var projectBtn = document.getElementById("projectBtn");

  var aboutPage = document.getElementById("aboutDiv");

  var projectPage = document.getElementById("projectDiv");



  // The class name for visible elements.

  var showState = 'show';



  // The class name for hidden elements.

  var hideState = 'hide';



  // Boolean value to state if you wish to

  // automatically toggle between

  // the two elements.

  var toggle = false;



  // Forces the other element to be hidden.

  var hideOther = true;





  // Simply states if the provided element

  // is visible or not.

  var isVisible = function (el) {

    return el.className.toLowerCase().indexOf(showState) >= 0;

  };



  // Simple method to swap the visibility

  // state.

  var swapState = function (el, oel) {

    if (isVisible(el)) el.className = hideState;

    else el.className = showState;



    if (oel != null)

      if (el.className === showState) oel.className = hideState;

      else oel.className = showState;

  };



  var controller = function (el) {

    var me, other;



    // Simply workout which button has been pressed.

    if (el.getAttribute('id') === projectBtn.getAttribute('id')) {

      me = projectPage;

      other = aboutPage;

    } else {

      me = aboutPage;

      other = projectPage;

    }



    // If toggle is false.

    if (!toggle) swapState(me);

    else swapState(me, other);



    // Both wouldn't really work together,

    // at least to my knowledge.

    if (hideOther && !toggle) other.className = hideState;

  };



  // Simply bind the event handler.

  aboutBtn.addEventListener('click', function () { controller(aboutBtn); });

  projectBtn.addEventListener('click', function () { controller(projectBtn); });

}();

.show {

  display: block;

}



.hide {

  display: none;

}



#yourApp div {

  height: 100px;

  width: 100px;

}



#aboutDiv {

  background: pink;

}



#projectDiv {

  background: dodgerblue;

}

<div id="yourApp">

  <div id='aboutDiv' class='show'></div>

  <div id='projectDiv' class='hide'></div>

  

  <button id="aboutBtn">About</button>

  <button id="projectBtn">Project</button>

</div>