Pequeños triángulos de plegado: ¿Cómo puedo crear secciones plegables en una página web?

Question

Algunas páginas tienen un "giro" de control triángulo que puede colapsar submenús. Quiero que el mismo tipo de comportamiento, pero para las secciones de un formulario.

decir que tenía una forma que tenía entradas prestamista, nombre, dirección y ciudad. Algunos de los usuarios de mi sitio van a necesitar un segundo conjunto de estos campos. Me gustaría ocultar los campos extra para la mayoría de los usuarios. Los que necesitan los campos adicionales deben ser capaces de acceder a ellos con un solo clic. ¿Cómo iba a hacer eso?

Answer 1

Ah, creo que quiere decir que desea tener secciones plegables en su formulario.

En resumen:

1. Poner el contenido que desea derrumbará de DIV, con la propiedad CSS de "display: none" en un primer momento
2. Envolver un enlace (Una etiqueta) la imagen triángulo alrededor (o el texto como "Ocultar / Mostrar") que se ejecuta el código JavaScript para alternar la propiedad de presentación.
3. Si desea que el triángulo de "convertir" cuando la sección se expande / muestra, puede hacer que el canje de JavaScript la imagen al mismo tiempo.

Aquí hay una mejor explicación: Cómo crear un DIV plegable con Javascript y CSS [ Actualización de 27/01/2013 el artículo ya no está disponible en la web, puede referirse a < a href = "https://github.com/toddfoster/lectionary/blob/master/lectionary.html" rel = "nofollow noreferrer"> la fuente de esta página HTML para un ejemplo de aplicación inspirada en este artículo]

O si la búsqueda de Google con palabras como "secciones CSS colapso" o como se pueden encontrar muchos otros tutoriales, incluidos los súper-lujo (por ejemplo, http://xtractpro.com/articles/Animated-Collapsible-Panel.aspx ).

Answer 2

Su absoluta forma más básica de ocultar / mostrar un elemento utilizando JavaScript está estableciendo la propiedad de visibilidad de un elemento.

Dada su ejemplo imaginar que tenía la siguiente forma definida en su página:

<form id="form1">
    <fieldset id="lenderInfo">
        <legend>Primary Lender</legend>
        <label for="lenderName">Name</label>
        <input id="lenderName" type="text" />
        <br />
        <label for="lenderAddress">Address</label>
        <input id="lenderAddress" type="text" />
    </fieldset>
    <a href="#" onclick="showElement('secondaryLenderInfo');">Add Lender</a>
    <fieldset id="secondaryLenderInfo" style="visibility:hidden;">
        <legend>Secondary Lender</legend>
        <label for="secondaryLenderName">Name</label>
        <input id="secondaryLenderName" type="text" />
        <br />
        <label for="secondaryLenderAddress">Address</label>
        <input id="secondaryLenderAddress" type="text" />
    </fieldset>
</form>

Hay dos cosas a tener en cuenta aquí:

1. El segundo grupo de campos de entrada están ocultos inicialmente utilizando un poco de CSS en línea.
2. El enlace "Añadir Prestamista" está llamando a un método JavaScript que hará todo el trabajo por ti. Al hacer clic en ese enlace se establecerá dinámicamente el estilo de la visibilidad de ese elemento haciendo que se vea en la pantalla.

showElement() toma un elemento id como parámetro y se ve así:

function showElement(strElem) {
    var oElem = document.getElementById(strElem);

    oElem.style.visibility = "visible";

    return false;
}

Casi todos los enfoques JavaScript va a estar haciendo esto bajo el capó, pero yo recomendaría el uso de un marco que oculta los detalles de implementación de distancia de usted. Echar un vistazo a jQuery , y jQuery UI con el fin de conseguir una transición mucho más pulido al ocultar / mostrar sus elementos.

Answer 3

He aquí una sencilla css única solución que utiliza una casilla de verificación:

.hideNext:not(:checked)+div {
  max-height: 0;
  overflow: hidden;
}

<label for="ch1">More Options</label><input id="ch1" type="checkbox" class="hideNext" />
<div>Whatever you want to hide.</div>
and then more stuff below..