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!

 

Carlos Dk

Apasionado por la enseñanza y el SEO

4 comentarios en “Mostrar u ocultar una capa (div) con HTML5

  • el 18 diciembre, 2012 a las 11:34 pm
    Permalink

    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

    Respuesta
    • el 19 diciembre, 2012 a las 10:22 am
      Permalink

      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 😉

      Respuesta
  • el 5 mayo, 2017 a las 12:54 am
    Permalink

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

    Respuesta

Deja una respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.