z-Index / Nested DIV Issue with *Show/Hide Content w/...*

[mbz]

First off... Great script, and overall impressive site!

I just implemented the Show/Hide content with sliding effect script (Script Info: ), however am having a few minor issues with the z-Index of my nested DIV tags (below the Answer level).


ISSUE 01:

The text displays just fine in these nested DIV tags (below the Answer level), however my corresponding images do not. I believe it is due to some z-Index issue, where for some reason they are being displayed behind the Answer DIV (as apposed to above it).

I have uploaded the above script to my server for review:


Upon clicking on any of the blue buttons, the show/hide content goes into effect, showing green buttons that correspond to each blue button. The green buttons should be displaying a small graphical icon (IMG) next to each text element, however this is where the z-Index issue happens.

The graphic below illustrates what is going on:



ISSUE 02:

The "sliding effect" that is applied to the DIV tags only functions on the way up, not on the way down. I believe that this is also linked to my nested DIV layers.

Simply click on a button to see it appear immediately (with no slide effect applied), and then click on another button (to see the open menu item slide closed, with the new menu item appearing instantly).


I think one simple solution would be to get rid of the nested DIV tags, however I am new to CSS and table-less design and do not know how to accomplish this without nesting them.

Any direction is greatly appreciated... Thanks much in advance!!

Best Regards,
MIKE

[Batalf]

[Batalf]

[mbz]

[mbz]

[Batalf]

[mbz]

That did the trick... Thanks again!!

[mbz]

Batalf,

Any ideas regarding my Thu Mar 16, 2006 3:55 am post on this topic (about updating the css class name and also divs acting like spans)?

Best Regards,
MIKE

[Batalf]

[mbz]

Batalf,

Thanks for the help!! I implemented both of your solutions, however am receiving an issue yet...



After putting in the height and width for the green button divs, the images displayed within that div now do a sort-of disappearing act (and then reappear after you put your mouse on one of the blue buttons).

Any ideas on this?

Also, regarding the new blue color function clickButton(), i am calling it via onmouseover and then using your other new code onmouseout. It works well, however it loses highlight even when the menu is folded out for a particular item upon mouseing over a new blue button (when both should be lit at that point - the button for the open menu and the onmouseover button). I tried to instead call this clickButton() function through onclick event handler, however it would not work (maybe I am doing something wrong?)... I will continue to play around with this item to see if I can get it working right.

Thanks again!!,
MIKE

[Batalf]

[mbz]

Batalf,

Beautiful!! Works perfectly...



Thanks,
MIKE

[Batalf]

Thank you!

I'm glad we figured it out

[mbz]

[Batalf]