Estou tentando adaptar este script, que achei nesta excelente resposta do SOenresposta 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>