Estou tentando adaptar este script, que achei nesta excelente resposta do SOen, para que quando houver um click no link, as divs
irem se alternando.
Na página existem várias divs, e cada uma irá aparecer quando acontecer o click no link respectivo, e esta div
aparecerá no lugar da que estava antes (que irá desaparecer).
Exatamente como está no script abaixo, exceto pelo fato de que a div
onde está o primeiro link não desaparece quando a segunda aparece (fica acima). Preciso que ela desapareça quando a segunda div
é chamada.
Já adaptei o HTML para o jeito que preciso, ou seja, para que o link que remete a cada div apareça na anterior, e assim sucessivamente (é para um formulário). Também mudei a função que chama a div (com um efeito de rapidez) .slideDown('fast')
... É possível ver o exemplo verificável abaixo, clicando em "Executar trecho de código". Valeu desde já!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu_about">
<a class="link" href="#about" data-link="first">
Chama primeira div
</a> •
</div>
<div id="pages_about" class="textContainer_about">
<div class="textWord_about" data-link="first">
<p>Primeira div<br>
<a class="link" href="#about" data-link="second">link para a segunda div</a></p>
</div>
<div class="textWord_about" data-link="second">
<p>Segunda div<br>
<a class="link" href="#about" data-link="third">link para a terceira div</a></p>
</div>
<div class="textWord_about" data-link="third">
<p>Terceira div<br>
<a class="link" href="#about" data-link="fourth">link para a quarta div</a></p>
</div>
<div class="textWord_about" data-link="fourth">
<p>Quarta div<br>
<a class="link" href="#about" data-link="fifth">link para a quinta div</a></p>
</div>
<div class="textWord_about" data-link="fifth">
<p>Quinta div</p>
</div>
</div>
<script type="text/javascript">
$('.textWord_about').hide();
$('.link').click(function() {
$('.textWord_about').hide();
$('.textWord_about[data-link=' + $(this).data('link') + ']').slideDown('fast')
});
</script>