Toggle Interativo

Item: Toggle Interativo
Rating: 1

por zHugh em 17.10.18 18:48

Detalhes da questão

Endereço do fórum: http://superonzerv.forumeiros.net/
Versão do fórum: phpBB3

Descrição

Boa tarde,

Estou a utilizar um JQuery a fim de me permitir a utilização de um Toggle, no entanto eu gostaria de fazê-lo interagir da seguinte forma:

Terei 6 divs distintas, cada uma nomeada com uma class diferente. Se necessário, utilizarei 6 toggle, um para cada div sem o menor problema, no entanto os seguintes eventos devem acontecer:

1) A primeira DIV sempre começará com o toggle aberto, ou seja, mostrando o conteúdo da mesma.
2) As demais DIV sempre começarão com o toggle fechado, ou seja, com seu conteúdo oculto.
3) Sempre que eu abrir toggle, aquele que estava inicialmente aberto, deverás ser fechado.

Por exemplo:

Em uma situação em que a DIV 1 esta aberta, e a DIV 2 esta fechada, ao clicar no toggle da DIV 2, a DIV 1 será fechada e a 2 aberta. Ao clicar em uma DIV 3 (fechada), esta terceira será aberta e a 2 fechada.

Algo que acontece de forma semelhante em tabelas com abas, onde ao clicar em uma nova aba, o conteúdo da anterior é substituido pelo novo.

Codigo do toggle que estou utilizando

Código:: $(document).ready(function(){ $(".poke11").click(function(){ $(".listadepokemons2").toggle(); }); });

por **Pedxz** em 18.10.18 17:38

Olá @zHugh,
Pelo que percebi o Senhor quer um collapse, use o seguinte código, ~~não criado por mim~~:

Código:: <style> .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .accordion:after { content: '+'; color: #777; font-weight: bold; float: right; margin-left: 5px; } .active:after { content: "-"; } .panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } </style> </head> <body> <button class="accordion">Seção 1</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Seção 2</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Seção 3</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <script> var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight){ panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); } </script>

Cordialmente,
pedxz.

por zHugh em 18.10.18 18:46

Olá Pedxz, não de fato eu queria um toggle mesmo (mas sim, o funcionamento dele é semelhante a um Collapse kkk). Eu inventei a pesquisar por conta própria como fazê-lo e acabei conseguindo construir o código a meu gosto, mesmo assim, agradeço <3