Toggle between hiding/displaying Ivs from links

Question

I’m trying to adapt this script, which I found in this excellent reply from Soen, so that when there is a click on the link, the divs alternate.

On the page there are several Ivs, and each one will appear when the respective link is clicked, and this div will appear in the place you were before (which will disappear).

Exactly as it is in the script below, except for the fact that the div where is the first link does not disappear when the second appears (is above). I need it to disappear when the second div is called.

I have already adapted the HTML to the way I need it, that is, so that the link that refers to each div appears in the previous one, and so on (it is for a form). I also changed the function that calls the div (with a speed effect) .slideDown('fast')... You can see the checkable example below by clicking on "Execute code snippet". Thanks!

<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">
        &nbsp;&nbsp; Chama primeira div
    </a> &#8226;
    </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>

Answer 1

This first link can also be hidden if you use $('.textWord_about, #menu_about').hide();. In your HTML this div only has ID, that’s why I used #menu_about.

jsFiddle: http://jsfiddle.net/s88j5nhx/

Note: In your answer you added a class to that first div, I used the ID I already had, but you could also use the same class for everyone and do like this:

$('.textWord_about').not(':first').hide();

jsFIddle: http://jsfiddle.net/s88j5nhx/1/

Answer 2

You also have the option to user this script:

$("#btn_grafico").hide();
$("#Div").click(function(){
    $("#a_links").toggle();
});