Toggle Interativo

2 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Toggle Interativo

Mensagem por zHugh 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();
    });
});
zHugh

zHugh
Membro

Membro desde : 30/03/2010
Mensagens : 751
Pontos : 1215

http://superonzerpg.forumeiros.net/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Toggle Interativo

Mensagem por tikky 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.

tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Tópico resolvido Re: Toggle Interativo

Mensagem por zHugh 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
zHugh

zHugh
Membro

Membro desde : 30/03/2010
Mensagens : 751
Pontos : 1215

http://superonzerpg.forumeiros.net/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Toggle Interativo

Mensagem por tikky 18.10.18 18:48

Tarde de mais para mim Chorando ou muito tr

Tópico resolvido


Movido para "Questões resolvidas".
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9049

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos