triângulos pequenos dobráveis: como posso criar seções recolhíveis em uma página web?

Question

Algumas páginas web têm uma "viragem" controle triângulo que pode recolher submenus. Eu quero o mesmo tipo de comportamento, mas para as seções de um formulário.

Say I teve um formulário que tinha entradas credor, nome, endereço e cidade. Alguns usuários do meu site vai precisar de um segundo conjunto desses campos. Gostaria de ocultar os campos extras para a maioria dos usuários. Os que necessitam os campos extras deve ser capaz de acessá-los com um clique. Como eu faria isso?

Answer 1

Ah, eu acho que você quer dizer que você quer ter seções recolhíveis no formulário.

Em resumo:

1. Coloque o conteúdo que você deseja entrar em colapso em seu próprio DIV, com a propriedade CSS de "display: none" em primeiro lugar
2. Enrole um link (A tag) em torno da imagem Triângulo (ou texto como "Hide / Show") que executa o JavaScript para alternar a propriedade display.
3. Se você quiser o triângulo para "virar" quando a seção é expandido / mostrado, você pode ter a troca JavaScript para fora a imagem ao mesmo tempo.

Aqui está uma explicação melhor: Como criar um dobrável DIV com Javascript e CSS [ Atualização 2013/01/27 o artigo não está mais disponível na web, você pode se referir a < a href = "https://github.com/toddfoster/lectionary/blob/master/lectionary.html" rel = "nofollow noreferrer"> a fonte desta página HTML para um exemplo aplicada inspirado por este artigo]

Ou se você pesquisa no Google com palavras como "seções CSS colapso" ou como você vai encontrar muitos outros tutoriais, incluindo os super-fantasia (por exemplo, http://xtractpro.com/articles/Animated-Collapsible-Panel.aspx ).

Answer 2

Seu absoluta forma mais básica de esconder / mostrando um elemento usando JavaScript, definindo a propriedade visibilidade de um elemento.

Dado o seu exemplo Imagine que você tinha a seguinte forma definida em sua 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>

Há duas coisas a nota aqui:

1. O segundo grupo de campos de entrada são inicialmente escondido usando um pouco de css em linha.
2. O link "Add Lender" está chamando um método JavaScript que irá fazer todo o trabalho para você. Quando você clicar nesse link que irá definir dinamicamente o estilo de visibilidade desse elemento fazendo-a aparecer na tela.

showElement() leva um elemento id como um parâmetro e olha como este:

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

    oElem.style.visibility = "visible";

    return false;
}

Quase todos os abordagem JavaScript vai estar fazendo isso sob o capô, mas eu recomendo o uso de um quadro que esconde os detalhes de implementação longe de você. Dê uma olhada na JQuery , e JQuery UI a fim de obter uma transição muito mais polido quando esconder / mostrando seus elementos.

Answer 3

Aqui está uma simples css única solução que utiliza uma caixa de seleção:

.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..