Forums

charlie

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,
CM

ChrisxClash

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.

link: http://codepen.io/chrisxclash/pen/22/2

BenWalker

[REDACTED]

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

ChrisxClash

@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

charlie

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.
CM

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

ChrisxClash

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:

<div id="test">
	 <div class="test1">
	 	 <div class="test2">
	 	 </div>
	 </div>
</div>

#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.

charlie

I figured out why it wasn't working locally...

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

Thank you for the details.

BenWalker

@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.

http://codepen.io/pen/10010/4

ChrisxClash

@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!

charlie

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

Change "Click" to "Hover?"

http://codepen.io/anon/pen/azAcr

But... "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.

Humm...

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

Thanks!"

http://css-tricks.com/forums/discussion/19491/change-click-to-hover#Item_6

treehouse : what would you like to learn today?

Forums

Need help with onClick and jQuery...