Forum Moderators: open

Message Too Old, No Replies

Question: Open/Close Divs Horizontally

         

cutiehippo

6:42 pm on May 20, 2010 (gmt 0)

10+ Year Member



Hi everyone. I'm new and I just subscribed

It's been 5 years or so since I last touched HTML/CSS and I've never written JS so kind of at the deep end of the pool for me...

have been trying for 2 days to use the code that I found here <snipped url>

I need to get 6 divs, all of different colours, to open and shut.
Each div contains text and images that appear only when open.
Only one div should be open at a time, ie. if I click on another one the opened one should close by itself.

Is this impossible?

Ideally I should also be able to open a div by clicking anywhere on it, but since I don't know how to do that, right now, I have a symbol on each div that you click on to open it.

I got an OK result when I tried modifying the code from the site I linked above. However not exactly what I was aiming for, and I have no idea what to modify or add.

<snipped screenshots>

problem is that there is no way to view divs except in the order they are in, ie. you have to close the div #5 before you can see #4 even if #4 is also open

Any and all help would be immensely appreciated! Thanks in advance

ps, have to add also that I have already searched this site and tried 2 codes from one of them but they were not what I was looking for

[edited by: whoisgregg at 9:43 pm (utc) on May 20, 2010]
[edit reason] Whoops, no URLs please. See TOS [webmasterworld.com] :) [/edit]

TheMadScientist

9:36 pm on May 20, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Well to get the divs to open and close when clicked you should be able to put an onClick="functionYouWantToRunHere()" on them. EG: <div id="div_1" onClick="functionYouWantToRunHere('div_1')">Stuff Here</div>

As far as the animation goes, personally I like jQuery for that type of stuff, but quite a few people like Prototype or YUI, so you might look into those.

The w3schools site has some good 'intro' information and tutorials you can play around with to get your head wrapped around what's going on and needs to happen, so I'd recommend it as a fairly good starting point.

This is the start of their jQuery Tutorial [w3schools.com]

BTW: Welcome to WebmasterWorld!