How to make a expand/collapse sidebar with recollect effect
Because of my work, I know much about how to implement this sidebar.At first I want to use the display property of the tab to control the expand/collapse effect.The theroy of this tech is if you onclik on link the conponet that I want to display will block and form will disappear.But at last I faced a problem that it can’t remeber the state of the sidebar,in other words,I don’t know that option do you click if you don’t click it. In my mentor’s help, I changed my thinking.Using innerHTML property is suitable in this application.
I will introduce how it works as follows:
First I defined a js funciton named display to display different content with different option.Then the page that import this js file can use this function.The code is:
HTML File:
<div>
<select id=”content” onchange=”display(this.value)”>
<option value=”1”>option 1</option>
<option value=”2”>option 2</option>
<option value=”3”>option 3</option>
<option value=”4”>option 4</option>
</select>
</div>
js File
function display(id)
{
swith(id)
{
case “1”:
document.getElementById(content).innerHTML=”<h1>First content</h1>”;
break;
case “2”:
document.getElementById(content).innerHTML=”<h1>Second content</h1>”;
break;
case “3”:
document.getElementById(content).innerHTML=”<h1>Third content</h1>”;
break;
case “4”:
document.getElementById(content).innerHTML=”<h1>Fourth content</h1>”;
break;
}
}
