Treehouse: Grow your CSS skills. Land your dream job.

jQuery Toggle

  • # July 22, 2011 at 2:08 pm

    Forgive me as I brutally suck at jQuery. Above I have linked to a description of what I’d like. Basically when one anchor tag is clicked, it fades to that option and hides the other.
    I need .slider1 to be visible by default.

    # July 22, 2011 at 5:05 pm

    Hi Christopher
    Here you have a version that will work as specified

    # July 22, 2011 at 5:08 pm

    @Latibro Great, Thank You!

    Is there not a way to keep the markup as is in the first version for it to work?

    # July 22, 2011 at 5:24 pm

    You might, but I added a div around the two img in order to place them above each other, or else they would not fade in/out above each other. Because they are both visible in the markup when they are in the face progress, and you would see the 2 images fading and when first when they are done fading the now visible image would move the the correct location.
    You could ofcourse add the same absolute position to both images or something else, but here my knowleage of CSS lacks. Maybe you have some ideas of solving the problem you self?

    # July 22, 2011 at 5:28 pm

    And off cause the jQuery code could be made nicer with a function with the almost identical code. But this would do the job, then I leave you with making it pretty :-)

    # July 22, 2011 at 5:33 pm

    I appreciate you taking the time out to do that. I’ll try to dabble into it although my jQuery is terrible. The initial markup is essential at this point.

    # July 22, 2011 at 6:57 pm



    $("a.slider").click(function() {
    $(".slider2").fadeIn("slow", "linear");
    $(".slider1").fadeOut("slow", "linear");
    $("a.fader").click(function () {
    $(".slider1").fadeIn("slow", "linear");
    $(".slider2").fadeOut("slow", "linear");
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.