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

Ver perfil do usuário 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.

Pedxz

Pedxz
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 2809
Pontos Ativos : 3561

Ver perfil do usuário https://pedxz.forumeiros.com

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

Ver perfil do usuário 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".
Pedxz

Pedxz
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 2809
Pontos Ativos : 3561

Ver perfil do usuário https://pedxz.forumeiros.com

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