Como Mostrar y/o ocultar Divs

Si queremos mostrar u ocultar divs en nuestro sitio web, existe una pequeña rutina JavaScript, que combinada con un poco de CSS nos sacaran del apuro.

Este es el JavaScript

function cambiadisplay(id) { if (document.getElementById('uno').style.display=='block') { document.getElementById('uno').style.display='none'; }else{ document.getElementById('uno').style.display='block'; document.getElementById('dos').style.display='none'; document.getElementById('tres').style.display='none'; } } function cambiadisplaydos(id) { if (document.getElementById('dos').style.display=='block') { document.getElementById('dos').style.display='none'; }else{ document.getElementById('uno').style.display='none'; document.getElementById('dos').style.display='block'; document.getElementById('tres').style.display='none'; } }

Segudamente, armaremos la estructura en el body de la siguiente manera:

<!--Menu para ocultar o mostrar--> <ul id="menu"> <li><span onclick="cambiadisplay('uno');">Elemento Uno</span></li> <li><span onclick="cambiadisplaydos('dos');">Elemento Dos</span></li> <li><span onclick="cambiadisplaytres('tres');">Elemento Tres</span></li> </ul> <!--estos son los divs que se mostraran u ocultaran--> <div id="uno" style="display:none">contenido Uno</div> <div id="dos" style="display:none">Contenido Dos</div> <div id="tres" style="display:none">Contenido tres</div>

Y listo!

Si queremos que el cursor cambie a la tan famosa y agradable manito, insertaremos el siguiente codigo CSS:

span { cursor:pointer }