JSFiddle - React, Tailwind, and code Playground

by Andry Zirka

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="main">

		<div id="sidebarBox" >
		<ul>
			<li id="button1">Заголовок 1</li>
			<li id="button2">Заголовок 2</li>
			<li id="button3">Заголовок 3</li>
			<li id="button4">Заголовок 4</li>
			<li id="button5">Заголовок 5</li>
		</ul>

		</div>

		<div id="mainPicture"> Picture</div>	


		<div id="contextBoxing">
			<div id="button1_Context1">Context1</div>
			<div id="button2_Context2">Context2</div>
			<div id="button3_Context3">Context3</div>
			<div id="button4_Context4">Context4</div>
			<div id="button5_Context5">Context5</div>


		</div>



	</div>

CSS

#main {
	position: relative;
	width: 800px;
	height: 500px;
	background-color: gold;
}


#sidebarBox {
	float: left;
	margin: 1%;
	font-size: 2em;	
	cursor: pointer;
}

#sidebarBox li {
	background-color: red; 
	width: 100%;	
    list-style-type: none;
	border: 1px solid black;
	margin: 1%;
	padding: 1%;

}


#mainPicture,
#button1_Context1,
#button2_Context2,
#button3_Context3,
#button4_Context4,
#button5_Context5 {
	float: left;
	margin: 10%;
	width: 300px;
	height: 300px;
	background-color: pink;

	font-size: 3em;
	text-align: center;
	
	border: 1px solid black;


}

#button1_Context1 {

	background-color: orange;
	display: none;
}

#button2_Context2 {

	background-color: green;
	display: none;
}
#button3_Context3 {

	background-color: lightblue;
	display: none;
}

#button4_Context4 {

	background-color: blue;
	display: none;
}

#button5_Context5 {

	background-color: purple;
	display: none;
}

#sidebarBox li:hover{
	background-color: lightgreen;
}

JavaScript

window.onload = function() {
	
    var $button1 = $('#button1'),   
        $button2 = $('#button2'),
        $button3 = $('#button3'),
        $button4 = $('#button4'),
        $button5 = $('#button5'),

        $Context1 = $('#button1_Context1'),   
        $Context2 = $('#button2_Context2'),
        $Context3 = $('#button3_Context3'),
        $Context4 = $('#button4_Context4'),
        $Context5 = $('#button5_Context5');

     var fullContext = [$Context1, $Context2, $Context3, $Context4, $Context5];   

     function showChapter(button, chapter) {
     


        button.on( "click", function() {


            $('#mainPicture').hide();    

            chapter.toggle();

});

 

}


showChapter($button1, $Context1);
showChapter($button2, $Context2);
showChapter($button3, $Context3);
showChapter($button4, $Context4);
showChapter($button5, $Context5);

}