Mostrar u ocultar una capa (div) con HTML5

Bienvenidos a Vertutoriales.com, en esta ocasión vamos a ver cómo mostrar u ocultar una capa en Javascript, nosotros vamos a lanzar la función desde un combobox o como se llama en html <select>. Aún así la función es bastante clara, simplemente recibimos un parámetro «Si» queremos que muestre o no

Veamos el código:

function MuestraCapa(Mostrar)
{

var capa;
if (Mostrar == ‘Si’)
{
capa = document.getElementById(‘NombreCapa’);
capa.style.display = ‘block’;
}else{
capa = document.getElementById(‘NombreCapa’);
capa.style.display = ‘none’;
}
}

Con este código ya tendríamos la función lista para mostrar u ocultar la capa, para ello hemos debido de crear un <div> de la siguiente manera y ubicar dentro de ella lo que queramos o no mostrar:

<div id=»NombreCapa»></div>

Una vez tengamos creada la capa y dentro de ella lo que queramos, solo nos faltaría llamar a la función, como decíamos lo habíamos ubicado en un select, pero da igual donde lo pongáis, podéis lanzar la función por ejemplo al pulsar en un enlace haciendo uso del evento onclick. P. Ej.:

<a href=#» onclick(MuestraCapa(‘Si’))>Muestra Capa</>

<a href=#» onclick(MuestraCapa(‘no’))>Oculta Capa</>

Con esto quedaría todo explicado. Espero que os sirva! yo lo acabo de implementar en el gestor de contenidos Dk Web 

Un saludo!