JSFiddle - React, Tailwind, and code Playground

by TCloud

HTML

<ul class="menu">
  <li class="item" data-content="first">First</li>
  <li class="item" data-content="second">Second</li>
  <li class="item" data-content="third">Third</li>
</ul>


<div class="content-box" id="first">
  <h2>First</h2>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, iusto.
</div>
<div class="content-box" id="second">
  <h2>Second</h2>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, iusto.
</div>
<div class="content-box" id="third">
  <h2>Third</h2>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, iusto.
</div>

SASS

body
  margin: 0
  padding: 0

h2
  margin: 0

.menu
  width: 30%
  height: 100vh
  border: 1px solid #ddd
  background-color: #f0f0f0
  padding: 10px
  box-sizing: border-box
  list-style: none
  margin: 0
  display: inline-block
  .item
    padding: 10px
    cursor: pointer
    
.content-box
  width: 40%
  height: 100vh
  background-color: #fefefe
  display: none
  box-sizing: border-box

JavaScript

// Массив страниц контента
let contentBox = []

// Страницы
let page_1 = { visible: true, id: "#first" }
let page_2 = { visible: false, id: "#second" }
let page_3 = { visible: false, id: "#third" }

contentBox.push(page_1)
contentBox.push(page_2)
contentBox.push(page_3)

// Открывает нужную "страницу"
function openPage(contentBox, id){
	contentBox.map(item => {
  	(item.id == id)
    	? item.visible = true
      : item.visible = false
  })
  
  console.log(contentBox)
  
  showPage(contentBox)
}

// Функция скрывает элементы на которых свойство visible false
// Показывает только те страницы, у которых свойств visible true
function showPage(contentBox){
	contentBox.map(item => {
  	(item.visible)
    	? $(item.id).css("display", "inline-block")
      : $(item.id).css("display", "none")
  })
}

showPage(contentBox)

// Надатие на элемент меню
$("li.item").click(function(){
	let pageID = `#${$(this).attr("data-content")}`

	openPage(contentBox, pageID)
})