Toggle Interativo

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

Atendido / Resolvido Toggle Interativo

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

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 736
Pontos Ativos : 1190

http://superonzerpg.forumeiros.net/

Atendido / Resolvido Re: Toggle Interativo

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



Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Pedxz Moderadeiro
Pedxz

Pedxz
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 3591
Pontos Ativos : 4255

https://power-pixel.net

Atendido / Resolvido Re: Toggle Interativo

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

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 736
Pontos Ativos : 1190

http://superonzerpg.forumeiros.net/

Atendido / Resolvido Re: Toggle Interativo

Mensagem por Pedxz em 18.10.18 18:48

Tarde de mais para mim Chorando ou muito tr

Tópico resolvido


Movido para "Questões resolvidas".


Bem-vindo ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a clicando no botão resolvido para organizar o fórum.
Pedxz Moderadeiro
Pedxz

Pedxz
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 3591
Pontos Ativos : 4255

https://power-pixel.net

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum