CODEWITHSUNDEEP
javascriptjqueryhideshow
lamberta
lamberta

Reputation: 51

Hide/Show different links

I have a script that works on one link on jsfiddle.

I have two links. Link one is "Link one" the other one is "Link two" you can see the code on jsfiddle = http://jsfiddle.net/lamberta/7qGEJ/4/

It works to show and hide but i cant make it show one and other. It shows everything.

If i press Link one I want to show ".open-container-One" And if I press Link two i just want to show "open-container-Two"

Hope you understand my issue.

jsCode:

$(document).ready(function() {
    var $div = $('.test');
    var height = $div.height();
    $div.hide().css({
        height: 0
    });

    $('a').click(function() {
        if ($div.is(':visible')) {
            $div.animate({
                height: 0
            }, {
                duration: 500,
                complete: function() {
                    $div.hide();
                }
            });
        } else {
            $div.show().animate({
                height: height
            }, {
                duration: 500
            });
        }

        return false;
    });
});​

Upvotes: 0

Views: 210

Answers (4)

JFK
JFK

Reputation: 41143

Although I like @adeneo's answer, I prefer this method using selectors rather than elements : 

$(".test").hide();
$('.list a').each(function(i) {
    $(this).on("click", function() {
        $(".test").slideUp(0).eq(i).slideDown(400, function() {
            $(".close a").on("click", function() {
                $(".test").slideUp();
            }); // on click close
        }); // after slideDown (shown div)
    }); // on click link
}); // each

The only condition is that there should be the same number of links (list items) as the number of div to be shown and in the same order.

See JSFIDDLE

Upvotes: 0

Prashant Kankhara
Prashant Kankhara

Reputation: 1588

Give class to the anchor tag, 

<a href="#" class="link1">Link 01</a>
 <a href="#" class="link2">Link 02</a>

give the appropriate class as id to the div tag as 

<div id="link1" class="test">
...
...
</div>

<div id="link2" class="test">
...
...
</div>

Do the below change in your javascript function

$('a').click(function() {

         $('div.test').hide();
        var showDivClass = $(this).attr("class");
        $("#" + showDivClass).show().animate({
                height: height
            }, {
                duration: 500
            });
        $('div.test').not("#" + showDivClass).hide().animate({
                height: 0
            }, {
                duration: 500
            });

    });

Update and test.

Upvotes: 0

adeneo
adeneo

Reputation: 318372

Get the index from the clicked anchor, in this case that would have to be the wrapping li, and then use that index to select the right one in the collection of .test elements. No need to recreate the slideUp/Down already built into jQuery.

$(function() {
    var elems = $('.test').hide();

    $('a').click(function(e) {
        e.preventDefault();
        var selEl = elems.eq($(this).closest('li').index());
        selEl.slideToggle(600);
        elems.not(selEl).slideUp(600);
    });
});​

FIDDLE

Upvotes: 4

K.P
K.P

Reputation: 66

Please provide the id to anchor tag which will be same as the class you need to show/hide. and replace the $div with the id tag

Upvotes: -1

Related Questions