click com slidetoggle e ANCORA no TOP do id

[marcelocardoso 6]

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.

 

[Omar~ 87]

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.

[marcelocardoso 6]

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

[Omar~ 87]

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

 

[marcelocardoso 6]

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.