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

Need help with onClick and jQuery…

  • # July 9, 2012 at 1:14 pm

    I’ve set-up a Slide Down window menu (See CodePen) with jQuery and everything is working as it should. BUT, how do I create the jQuery that will close one window when you click on another one automatically?

    Right now you have to click to open then click to close, so there can be more than one window open at a time which isn’t what I was going for. I want open window to close if you click on a new one.

    Thank you,

    # July 9, 2012 at 1:48 pm

    Here you go buddy. I added display: none; to your css for each div in the #contact-tabs-content-wrap so don’t forget that rule. I also found a way to shorten the jQuery a bit.


    # July 9, 2012 at 2:06 pm


    I had written a code pen up, but yours is much neater, @ChrisxClash.

    # July 9, 2012 at 2:11 pm

    @BenWalker, would it be alright if I saw what yours was? I love seeing the different ways people try and do things. Helps me learn. :D

    # July 9, 2012 at 2:12 pm

    GREAT JOB! Thank you!

    Looks great at CodePen… But, when I copy/paste new css/jquery in my local doc it works the same way it did before (you have to click to close window it doesn’t close when you click another window).

    I noticed my DOC TYPE is XHTML 1.0 Strict and CodePen uses HTML.

    Also, what does

    > div

    do in

    #contact-tabs-content-wrap > div { display:none;}


    Does it select all the divs within that div?

    Just trying to figure out why it doesn’t work locally…

    Thank you for your time.

    Never mind. Figured it out. I just had the original .js link in header.

    # July 9, 2012 at 2:21 pm

    Hmm, are you sure it’s loading the new changes correctly?

    Also, the > symbol in #contact-tabs-content-wrap > div { display:none; } selects div’s that are only DIRECT children of the #contact-tabs-content-wrap .

    For example if you had:

    #test > div { background: #f00; }

    Only the div with the class of test1 would get a red background, since it’s directly under the #test element. Div with class of test2 is nested two children down, so it wouldn’t change backgrounds.

    # July 9, 2012 at 2:28 pm

    I figured out why it wasn’t working locally…

    I still had the old .js link in the head.

    Thank you for the details.

    # July 9, 2012 at 3:01 pm

    @ChrisxClash — I don’t mind you perusing in the slightest. It uses the same technique as you do. Yours is cleaner though, and using the css to hide the display initially is more intelligent.

    # July 9, 2012 at 3:20 pm

    @charlie, glad you figured it out!

    @BenWalker, I actually started to go the route of using a function, and then I rewrote the code a few times. Still looks good to me!

    # September 14, 2012 at 8:31 am

    New issue.
    I forgot about this thread and started a new one by accident (sorry).

    Change “Click” to “Hover?”

    “Once the window is open there are additional links/forms in the window for users to use… Seems like the window will need to stay open so user can interact with content of windows.


    Is there such a thing as open on hover and stay open until click to close?


Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.