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!

 

Te puede interesar:

4 comentarios

  • Alberto commented on 18 diciembre, 2012 Reply

    Una pregunta, me gustaria saber algo en vez de un href para mostrar y otro href para ocultar no se podria poner en el mismo mostrar y ocultar? por ejemplo cuando se este mostrando la info que diga mostrar menos y cuando no se muestre que diga mostrar mas pero sin tener que hacer dos href uno para mostrar y otro para ocultar
    muchas gracias

    • VideoTutoriales commented on 19 diciembre, 2012 Reply

      Se utiliza Href, como podría utilizarse cualquier otro objeto, la cuestión es que se lance la función, da igual desde donde la lances 😉

  • carlos commented on 5 mayo, 2017 Reply

    teniendo una encusta digamos de 15 preguntas es posible mostrar de 5 en 5? en lugar de mostar las 15 preguntas

    • Carlos Dk commented on 5 mayo, 2017 Reply

      Puedes usar un paginado, un asistente, etc… Sí, se puede 😉

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *