Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Fala galera...
Depois de tanto sofrer tentando e pesquisando na internet, não consegui resolver...
A nível de conhecimento, segue código para:::
1) Ao clicar, pegar o id do botão, em seguida abrir com slidetoggle e jogar no TOP tipo ancora.
2) ou seja, expandir a slidetoggle, mas POSICIONAR no id da DIV, SECTION ou etc...
CODE:
$(function () {
// $("#btn-maps").on("click", function () {
// $('html, body').animate({
// scrollTop: $("#maps").slideToggle('slow').offset().top - 135
// }, 1200, 'linear');
// });
$("#btn-maps").click(
function (event) {
event.preventDefault();
if ($("#maps").is(":visible")) {
$("#maps").slideUp(600).offset().top;
} else {
$("#maps").slideDown(600).offset().bottom;
}
}
);
});
Este código, funciona perfeitamente, adaptado de vários códigos buscados na internet, porém, não consigo com nenhum dos dois, posicionar ao CLICK o SLIDETOGGLE ao expandir deixar examente no inicio do ID;
Dicas, Sugestões como fazer, realizar, agradeço.
Obrigado.Olha so omar....,
O code faz isso, so o problema quando expande, ele nao vai para o TOP do item da slidetoggle, queria que ele posicionasse a div expandida pela sua base no topo, tipo no inicio da div quando expandida, tentei com id, mas n consegui....
Bem... Pelo que eu entendi você quer mover um elemento para outro local e isso é simples:
<div id="topo">Topo</div>
<hr />
<div>Esse é o meio</div>
<hr />
<div id="baixo">Elemento de baixo que vai para o topo</div>
<button onclick="mover();">Mover o de baixo para o topo</button>
<script>
function mover() {
var baixo = document.getElementById('baixo');
document.getElementById('topo').appendChild(baixo);
}
</script>
Sobre o efeito sanfona que acredito que seja o que realmente procura. veja esse script que desenvolvi faz algo similar ao seu objetivo, é bem simples de usar:
[https://github.com/Spell-Master/sm-web/tree/master/scripts/Accordion](https://github.com/Spell-Master/sm-web/tree/master/scripts/Accordion)
Com o arquivo CSS e JS incluso crie a seguinte situação
<div id="exemplo">
<button class="acc-button">
Primeiro
</button>
<div class="acc-container">
Elemento interno do primeiro
</div>
<button class="acc-button">
Segundo
</button>
<div class="acc-container">
Elemento interno do segundo
</div>
</div>
depois basta instanciar a classe:Isso deve ficar abaixo dos elementos acima pode até ficar no final do "body"
<script>
var objeto = new Accordion('exemplo');
</script>
Obs.: Não precisa usar jQuerya principio teu codigo faz o mesmo efeito accordion que o slideToggle do jquery faz, no que eu preciso, mas ainda peca, falha, no quesito alinhar pelo TOPO, vamos ver se consigo ser mais explicativo...
1) slidetoggle, é clicado, certo.
2) ele, automaticamente, é expandido, abre para baixo e expande o mesmo, com seu conteudo;
3) isso fica perfeito quando é feito com o position BOTTOM, normal dele,
4) mas QUANDO é feito com o position para expandir para UP, ....
5) aí que está o problema, tentei com OFFSET, ao abrir para CIMA, independente do conteudo do slidetoggle ao ser aberto, deveria a barra de rolagem subir junto e pelo OFFSET, pegar o ID da DIV, e alinhar bem no inicio a div.
ELE EXPANDE CERTO, mas tipo
Texto inicio
Texto meio
Texto fim
Ele não posiciona no texto início, fica sempre na metade, ou no texto fim, aí tu tens que subir a barra, para o texto início...
Entendeu agora...
Tentei de várias maneiras, pegar o OFFSET e jogar o ID, mas não consegui....
Fica a premissa...
Seu exemplo faz também, mas faz a mesma coisa que eu FIZ, tenho que alinhar no topo quando expande independente do tamanho da DIV pelo slidetoggle sendo aberta.
Se tiver cabeça para dar luz nisso, agradeço.
Obrigado.
Você diz um efeito tipo sanfona?
Você clica no item ele expande e e quando clica novamente ele oculta
Só que podemos ter diversos itens desses?
Tenho esse script pronto se for o caso.