CODEWITHSUNDEEP
jquery
tyler_lisa
tyler_lisa

Reputation: 425

need to show then hide a link using jquery

I have a bit of text which says (show map steps) which when clicked slides down a a div with info on interacting with a map. I'd like to change the text to say "hide map steps" after the div slides down which when clicked will sldie everything back up.

It mostly works. I have "hide map steps" set to display: none but you can't use it as a link to slide everything back up.

Here's the code I am using:

$(".stepsLink").click(function () {
$(".stepsLink").hide();
$(".stepsUpLink").show();
if ($(".steps").is(":hidden")) {
  $(".steps").slideDown("fast", "linear");
} else {
  $(".steps").slideUp("fast", "linear");
}
});

The stepsUpLink shows itself but isn't clickable to slide the div back up.

Here's my jsfiddle link: http://jsfiddle.net/ltdesign/5b6XS/

Any help? Thank you!

Upvotes: 1

Views: 103

Answers (4)

Memolition
Memolition

Reputation: 494

$(document).ready(function(){
    $(".stepsLink").click(function () {
        if ($(".steps").is(":hidden")) {   
            $(".steps").slideDown("fast", "linear", function(){
              $(".stepsLink").html('hide map steps <i class="icon-caret-down"></i>');
            });
        } else {
            $(".steps").slideUp("fast", "linear", function(){
                $(".stepsLink").html('show map steps <i class="icon-caret-down"></i>');
            });
        }                 
      });
});

Working demo

Upvotes: 0

Shawn
Shawn

Reputation: 2406

@jqueryrocks has a good approach, just needs one little tweak. Move your show hide into the condition so that the labels will appear correctly once clicked.

$(".stepsLink, .stepsUpLink").click(function () {

    if ($(".steps").is(":hidden")) {
        $(".stepsLink").hide();
        $(".stepsUpLink").show();
        $(".steps").slideDown("fast", "linear");
    } else {
        $(".stepsUpLink").hide();
        $(".stepsLink").show();
        $(".steps").slideUp("fast", "linear");
    }
  });

Upvotes: 0

Traveling Tech Guy
Traveling Tech Guy

Reputation: 27849

You only have the click event on the stepsLink span, not on the stepsUpLink one - it does not handle click.

Upvotes: 0

user571545
user571545

Reputation:

Change your first line to this:
$(".stepsLink, .stepsUpLink").click(function () {

Upvotes: 2

Related Questions