Undécimo post de ayuda. En este tutorial veremos cómo hacer para mostrar una sección oculta y al pulsar en la cabecera la muestre.
En el ya vimos como crear una cabecera. Ahora lo que queremos hacer es que muestre una sección oculta y al pulsar en la cabecera la muestre.
Ahora mismo lo que tenemos es esto:
<div id="titulo">NOMBRE CABECERA</div>
<div id="top">
CONTENIDO SECCIÓN
</div>
Tenemos que cambiarlo por esto:
<div id="seccion" style="cursor: pointer;">
<div onClick="document.getElementById('seccion_oculta').style.display='block'">VER SECCION</div>
<div onClick="document.getElementById('seccion_oculta').style.display='none'">OCULTAR SECCION</div>
</div>
<div id="seccion_oculta" style="display:none">
<div id="top">
CONTENIDO SECCIÓN
</div>
</div>
Básicamente, al pulsar en VER SECCION, muestra el contenido de la sección y al pulsar en OCULTAR SECCION lo oculta:
Vamos a complicarlo un poco más. No queremos que nos muestre siempre los textos ver y ocultar. Queremos que cuando este oculto nos muestre sólo Ver y cuando este visible nos muestre sólo ocultar:
<div id="seccion" style="cursor: pointer;">
<div id="btn_mostrar" style="display:block;" onClick="document.getElementById('btn_ocultar').style.display='block'; document.getElementById('seccion_oculta').style.display='block'; document.getElementById('btn_mostrar').style.display='none'">PULSA AQUÍ PARA <br>MOSTRAR LA SECCIÓN</div>
<div id="btn_ocultar" style="display:none;" onClick="document.getElementById('btn_ocultar').style.display ='none'; document.getElementById('seccion_oculta').style.display ='none'; document.getElementById('btn_mostrar').style.display='block'">PULSA AQUÍ PARA <br>OCULTAR LA SECCIÓN</div>
</div>
<div id="seccion_oculta" style="display:none">
<div id="top">
CONTENIDO SECCIÓN
</div>
</div>
Al pulsar en MOSTRAR LA SECCIÓN, muestra el texto OCULTAR LA SECCIÓN y el contenido de la sección. Además, el botón Ver desaparece.
Al pulsar en OCULTAR LA SECCIÓN, muestra el texto MOSTRAR LA SECCIÓN y el contenido de la sección y el texto OCULTAR LA SECCIÓN desaparecen.