I have a page where the header and footer are always static, just change the body when you press a few buttons.
The fact is that I have the main page, I need to make the different divs of the content I want to change.
I have two questions:
How do I make a div or another appear when I press a button?
Do I create all the div's in the same index.html or do I create each html file and put the content of what I want to come out instead of all the div's in the same index.html?
You can add all the div in the same .html file and then with jquery you can make them appear and disappear whenever you want. I'll give you an example:
$("#hide").click(function(){
$("p").hide();//Esta función oculta la etiqueta p
});
$("#show").click(function(){
$("p").show();//Esta función muestra la etiqueta p
});
I hope it works
You must create the div in the same html, with different ID name, then by jquery, you can indicate through the button the div to show or to hide. HTML
<div class="btnmenu" id="menua">
<div style="cursor:pointer;border:none;"><h2><img class="img" id="imga" src="imagenes/mas.png"/><h2> TITULO</h2></div>
</div>
<div id="obsa" class="obs" style=" display:none;">
xxxxxxxxxx
</div>
<div class="btnmenu" id="menub">
<div style="cursor:pointer;border:none;"><h2><img class="img" id="imgb" src="imagenes/mas.png"/><h2> TITULO</h2></div>
</div>
<div id="obsb" class="obs" style="display:none;"> xxxxxxxxxxxxxxxx
THE JS would be
$("div.btnmenu").click(function(){
id=this.id.substr(4, 1);
valor=$("img#img"+id).attr("src");
$("div.obs").slideUp("normal");
$("img.img").attr("src","imagenes/mas.png" );
$("div#obs"+id+":hidden").slideDown("normal");
if (valor=="imagenes/mas.png")
{
$("img#img"+id).attr("src","imagenes/menos.png" );
}
else
{
$("img#img"+id).attr("src","imagenes/mas.png" );
}
});