Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Caesar Bell
Caesar Bell
24,877 Points
Posted by Caesar Bell
Caesar Bell
24,877 Points

Slide up, slide down using jquery

When click on my link the div slides down the way I want but it automatically springs back up. My goal is to be able to click on the link so the div can slide down and then click anywhere on the page for it to spring back up below is my code can anyone help me solve this issue. 

function aboutPanel(){
        var windowWidth = $(window).width(); 
        var aboutPanel = $('#about-us-panel'); 
        var AboutPanelTrigger = $('#about-panel-trigger'); 
        var closeAboutPanel = $('html'); 

        $(AboutPanelTrigger).click(function(e){
            $(aboutPanel).slideDown('slow', function(){
                e.preventDefault();
            });
        });

        $(closeAboutPanel).on('click', function(){
            $(aboutPanel).slideUp('slow');
        });

    };

    aboutPanel();
Chyno Deluxe
Chyno Deluxe
16,936 Points

Can you provide a snapshot of your workspace?

To get started, create your first snapshot today!

  • Launch any of your workspaces.
  • Select the snapshot menu in the upper right corner.
  • Click "Take Snapshot"
  • Visit the link and share it with someone.

3 Answers

Caesar Bell
Caesar Bell
24,877 Points
Caesar Bell
Caesar Bell
24,877 Points

Chyno Deluxe - I am not building this in my workspace. but I provided the code above to help with the question.

ducarmont
ducarmont
30,575 Points
ducarmont
ducarmont
30,575 Points

https://jsfiddle.net/4kbseno5/

This is definitely a hack of some sort, there's gotta be a better way, but at least you can move on for a bit and figure out the right way to do it. I played with it for a few mins.

The problem is both click events fire on the first click. Setting a timeout and changing a property works, but there has to be a better way.

Your e.preventDefault() is in a weird spot too.

Roberto Alicata
Roberto Alicata
Courses Plus Student 39,959 Points

In your code you need to reset the value of "is_down" to false after the slideUp() 

$(window).on("click", function(e) {
    if (is_down) {
        $('#slider').slideUp();
        is_down = false;
    }
});
ducarmont
ducarmont
30,575 Points

Yeah, good call, i kinda threw it together earlier.

I updated it, its a bit more robust, probably still room for improvement though.

https://jsfiddle.net/4kbseno5/3/

let me know what you think...

Caesar Bell
Caesar Bell
24,877 Points
Caesar Bell
Caesar Bell
24,877 Points

Thank you guys!!!! This is awesome.