Want a help in simple HTML - html

Question

I've made a vertical menu for my webpage. I want that when i click on any item in the menu, the content open without loading other page. The previous div hides and other div comes on clicking on the menu. Can anyone help me here?
http://demo.tinywall.info/html5-history-api/menu2.php
I need something like this, but with simple HTML and CSS. I also don't need to change URL, the url will be same. Only the hidden content shows up.
This is the website where i want to put this thing -> www.techstore.tk

Answer 1

You can do this:
#btnLeft:active {
...
}
Then insert anything that you want to change in that.
Or if you want to have jquery in, you can do the following:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".category").click(function(){
$(".filter").toggle("swing");
});
});
</script>
<div class="category">Select Me</div>
<div class="filter">My hide able div</div>
Speed
milliseconds - You can do any number to define how fast it it.
"slow"
"fast"
Easing
"swing" - moves slower at the beginning/end, but faster in the middle
"linear" - moves in a constant speed
Or, you can try a slide effect like this:
$(document).ready(function(){
$(".categorie").click(function(){
$("#.filter").slideToggle("slow"); // You can add any transition in place of "slow".
});
});
Callback functions
A callback function is executed after the current effect is 100% finished. But you can call another function before the effect starts. Here are both examples:
Callback - Executes after the effect is finished:
$(".category").click(function(){
$(".filter").hide("slow", function(){
alert("The effect just finished");
});
});
Executes before the effect starts. Note: this is not called a callback:
$(".category").click(function(){
$(".filter").hide(1000);
alert("The effect will start after this message goes away");
});