Jump to content
marcelocardoso

click com slidetoggle e ANCORA no TOP do id

Recommended Posts

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.

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

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 jQuery

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By WitherZx
      estou cursando na Rocketseat, e um dos exercícios de la é fazer um sisteminha de conversão de notas, de numérico para alfabético, eu fiz o exercício de duas formas, uma deu certo (com if's), porem quando tentei usar switch, deu erro, sempre caia em 'default', como posso resolver? ps: eu não quero ver a solução do vídeo pq lá provavelmente vai ensinar com if's, e isso eu já sei.
       
      function ConverteNota(nota) {     nota = Number(nota)     let notaA = (nota >= 9 && nota <= 10);     let notaB = (nota >= 8 && nota < 9);     let notaC = (nota >= 7 && nota < 8);     let notaD = (nota >= 6 && nota < 7);     let notaF = (nota < 6 && nota >= 0);       switch (nota) {         case notaA:             console.log('Nota A');             break;           case notaB:             console.log('Nota B');             break;           case notaC:             console.log('Nota C');             break;           case notaD:             console.log('Nota D');             break;           case notaF:             console.log('nota F');             break;           default:             console.log('insira uma nota valida!')             break;     }; };   ConverteNota(10);
    • By Sapinn
      Pessoa de novo eu aqui kk. Acho que essa pergunta é simples mas eu não sei como fazer, já pesquisei em vários cantos mas só achei a resposta em Jquery e eu queria fazer em Javascript puro. Basicamente eu gostaria de transferir dados de uma tabela para um form eu já consegui fazer mas só funciona em um td e eu gostaria nos outros não funcionam. 
      <!DOCTYPE html> <html lang="pt-br"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title> </head> <body>     <table border="1px">         <tr>             <td>Nome</td>             <td>Endereço</td>             <td>Telefone</td>             <td>Adicionar</td>         </tr>         <tr>             <td id="nome_cliente" value="Sapien">Sapinn</td>             <td id="endereco_cliente" value="Rua 01">Rua 01</td>             <td id="tel_cliente" value="(88) 9 9999-9999">(88)9 9999-9999</td>             <td><button onclick="adicionar()">Adicionar</button></td>         </tr>         <tr>             <td id="nome_cliente" value="Sapien">Supremo</td>             <td id="endereco_cliente" value="Rua 01">Rua 05</td>             <td id="tel_cliente" value="(88) 9 9999-9999">(88)9 0000-0000</td>             <td><button onclick="adicionar()">Adicionar</button></td>         </tr>     </table><br><br>     Nome:<input type="text" name="nome" id="nome">     Telefone: <input type="text" name="telefone" id="telefone">     Endereço: <input type="text" name="endereco" id="endereco">     <script>         function adicionar(){                         let nome_cliente = document.getElementById("nome_cliente").innerHTML;             let endereco_cliente = document.getElementById("endereco_cliente").innerHTML;             let tel_cliente = document.getElementById("tel_cliente").innerHTML;             document.getElementById('nome').value = nome_cliente;             document.getElementById('telefone').value = tel_cliente;             document.getElementById('endereco').value = endereco_cliente;             console.log(nome_cliente, endereco_cliente, tel_cliente)                      }     </script> </body> </html>  
    • By Sapinn
      Fala galera tudo beleza? Então alguém sabe como adicionar e remover campos de texto com js. Tipo teria um botão com um + "mais" para adicionar novos campos e junto a estes campos teria um ícone com um lixeira para remover, toda vez que fosse clicado nesse ícone o campo seria removido, apenas aquele campo. Encontrei um código para adicionar um campo mas a parte de remover ta dando dor de cabeça
      <!DOCTYPE html> <html lang="pt-br"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Pagina</title>     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"> </head> <body>     <form id="myForm">         <div id="lines"></div>         <button type="button" onclick="addInput('lines')">+</button>         <input type="submit" value="Enviar">       </form>             <script>           var formLine = 1;                 function addInput(divName) {                 var newdiv = document.createElement('div');                 newdiv.innerHTML += '<input type="text" name="produto" id='+formLine+'>';                 newdiv.innerHTML += ' <i class="bi bi-trash-fill"></i>';                 document.getElementById(divName).appendChild(newdiv);                 formLine++;             }         addInput('lines');       </script> </body> </html>  
    • By henriquers
      Bom Dia a todos !
       
      Gostaria de saber se tem algum modo de executar um evento em um option do select por exemplo: Um select com vários produtos aparecendo apenas o código do produto e a descrição de cada um, e quando passa o mouse sobre um deles no select inicia um evento que carrega uma imagem do produto ao lado do select sem precisar clikar no produto para aparecer a imagem.
      Eu consegui fazer colocando um onchange no select, mas gostaria um que não precise clicar no produto para aparecer a imagem, carregando a imagem quando passa o mouse nas opções do select.
       
       
      Desde já agraço a ajuda.
    • By Rizer
      Galera, estamos buscando um profissional para atuar como Desenvolvedor PHP Junior/Pleno na Rizer. Está interessado?
       
      Empresa: Rizer (www.rizer.com.br)
      Vaga: Desenvolvedor PHP Pleno
      Carga horária: 40h semanais (seg a --- / 9h-18h)
      Local de trabalho: Edf. Cosmopolitan, Paralela - Salvador/BA
       
      Buscamos um profissional que não tenha potencial somente para exercer com excelência a posição de Desenvolvedor PHP, mas também para - num futuro próximo - liderar times na sua área de expertise. Para tornar isso possível, iremos imergi-lo no mercado e no mundo de empresas de tecnologia e startups, apresentando ainda mais sobre o funcionamento de empresas como a nossa (não tão tradicionais assim) e sobre as metodologias que utilizamos para atingir nossos resultados.
       
      A Rizer cresce exponencialmente a cada dia e gostamos de fazer todos crescerem junto conosco. Por isso, além de uma excelente política de reconhecimento e promoção (algumas vezes meteórica) de funcionários, possuímos também um programa de Vesting para oferecer quotas da sociedade da empresa para membros do nosso time que se destacam.
       
      Pré-requisitos:
      Conhecimento sólido em PHP (2+ anos de experiência);
      Integração via APIs rest;
      Framework Laravel;
      Banco de dados relacional (mysql);
      Utilização de metodologias ágeis (Scrum);
      Git / gitflow.
      Phpunit;
      Boas práticas e design pattern;;
      CSS, HTML e JavaScript
       
      Interessados deverão preencher o seguinte formulário:
       
      http://bit.ly/rizer1
       
      e fazer o upload do currículo com nome “Desenvolvedor PHP Pleno - SEU NOME”
      Você se considera uma excelente pessoa e um ótimo profissional? Curtiu a vaga? Então vem trabalhar com a gente, vem!
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.