triângulos pequenos dobráveis: como posso criar seções recolhíveis em uma página web?
-
13-09-2019 - |
Pergunta
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?
Solução
Ah, eu acho que você quer dizer que você quer ter seções recolhíveis no formulário.
Em resumo:
- 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
- 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.
- 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 ).
Outras dicas
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:
- O segundo grupo de campos de entrada são inicialmente escondido usando um pouco de css em linha.
- 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.
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..