Toggle Interativo
Fórum dos Fóruns :: Atendimento e Suporte Mútuo :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript & jQuery
Página 1 de 1 • Compartilhe
Toggle Interativo
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();
});
});
Re: Toggle Interativo
Olá @zHugh,
Pelo que percebi o Senhor quer um collapse, use o seguinte código,não criado por mim:
Cordialmente,
pedxz.
Pelo que percebi o Senhor quer um collapse, use o seguinte código,
- 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.

Boas-vindas 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 editando a sua primeira postagem. |
Pedxz - Moderadeiro |
pedxz- Moderadeiro
- Inscrito dia : 13/01/2017
Mensagens : 5831
Pontos Ativos : 6937
Re: Toggle Interativo
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
Re: Toggle Interativo
Tarde de mais para mim

Tópico resolvidoMovido para "Questões resolvidas". |

Boas-vindas 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 editando a sua primeira postagem. |
Pedxz - Moderadeiro |
pedxz- Moderadeiro
- Inscrito dia : 13/01/2017
Mensagens : 5831
Pontos Ativos : 6937
Fórum dos Fóruns :: Atendimento e Suporte Mútuo :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript & jQuery
Página 1 de 1
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum