Question

I am working on a website that requires a btn that removes the entire middle section when clicked to reveal a nice 100% background image. I have set up a standard HTML btn with an id of show-background and I also a div with an id of content-area. My jQuery code looks like this:

$("a#show-background").click(function () {
    $("div#content-area").fadeOut("slow");
});

$("a#show-background").click(function () {
    $("div#content-area").fadeIn("slow");
});

This isn’t working right. I wonder if anyone can put me on the right lines? Many thanks in advance!

Answer 1

You say that your code uses a button. Since I can’t see your html I’ll assume you’re using either an input tag or a button tag and not an anchor tag. In any case try changing your selector to this.

$("#show-background")

Also as Emil Ivanov mentioned your calls are canceling each other out. A way around this is to do the following. Assuming that what it is you’re hiding is to be shown initially…

$("#show-background").click(function () {
  if ($("#content-area").hasClass("bg_hidden")){
    $("#content-area")
      .removeClass("bg_hidden")
      .stop()
      .fadeIn("slow");

    $("#show-background").text("Hide Me Text");
  }
  else{
    $("#content-area")
      .addClass("bg_hidden")
      .stop()
      .fadeOut("slow");

    $("#show-background").text("Show Me Text");
  }
});