Switch between hiding / displaying divs from links

Navigation
2

I'm trying to adapt this script , which I found in this excellent #, so that when the link is clicked, divs will alternate.

On the page there are several divs, and each one will appear when you click the respective link, and this div will appear instead of the one it was before (it will disappear).

Exactly as it is in the script below, except that the div where the first link is does not disappear when the second one appears (it 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's for a form). I also changed the function that calls the div (with a quick effect) .slideDown('fast') ... You can see the verifiable example below by clicking on "Run snippet of code". Thanks in advance! 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="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>
    
asked by anonymous 27.05.2015 / 04:58

2 answers

1
___ erkimt ___ Switch between hiding / displaying divs from links ______ qstntxt ___

I'm trying to adapt this script , which I found in this excellent #, so that when the link is clicked, $('.textWord_about, #menu_about').hide(); will alternate.

On the page there are several divs, and each one will appear when you click the respective link, and this #menu_about will appear instead of the one it was before (it will disappear).

Exactly as it is in the script below, except that the div where the first link is does not disappear when the second one appears (it is above). I need it to disappear when the second %code% 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's for a form). I also changed the function that calls the div (with a quick effect) %code% ... You can see the verifiable example below by clicking on "Run snippet of code". Thanks in advance! 

$('.textWord_about').not(':first').hide();
    
______ ___ azszpr66128

This first link can also be hidden if you use %code% . In your HTML this div has only ID, hence it used %code% .

jsFiddle link

Note: In your answer you added a class to this first %code% , I used the ID already had, but you could also use the same class for all and to do so: 

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

jsFiddle link

    
______ azszpr66151 ___

You also have the option to use this script:

%pre%     
___
27.05.2015 / 06:48
0

You also have the option to use this script: 

$("#btn_grafico").hide();
$("#Div").click(function(){
    $("#a_links").toggle();
});
    
27.05.2015 / 13:49
Display link content rel="" in html page? Extend findAll with custom filters