# Javascript Rollover Div Question



## HomeSight (Mar 1, 2006)

Hi,

I'm using a script to establish something fairly simple i think...

I've included the code for someone to review... All i'm trying to do is hide the very 1st div, after you click on one of the other links. What i end up with right now,, is the first div remains shown, even when you click on one of the links, so i end up with over-lapping text...

The idea is that i have intro text in div #0, then when they click on a picture, it's replaced with the div#1 text, and so on... on rollout of div#1 the div should go back to div#0 text...

Clear as mud 

Here's the script and file... Any help is appreciated....

Thanks,
Ryan

---------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Untitled Document


Link 2 
Link 3

This is text that should show up before any mouseover text will
Link 1 text! I've restrained the div size to 200px wide in the style declaration. Modify this to suit yourself.
Link 2 text! You can add all the usual style options, and position it to suit yourself!
Link 3 text! Use it to explain terms or further describe your linked pages, whatever!


----------



## amanxman (Mar 28, 2006)

Hey,

Have you got a URL - then I can try changing things and see it render...

*I think* you somehow need to make this

```
<a href="#" onClick="toggleDiv('div2',1)" onMouseOut="toggleDiv('div2',0)">Link 2</a>
```
also close div0 on click (as well as open div2)...

But I'm not sure 100% if you can put two functions in an onClick..i.e.


```
onClick="toggleDiv('div2',1); toggleDiv('div0',1)"
```
seperating the two functions with the semi colon should do it...

if not, have a read through this:

http://bytes.com/answers/javascript/576260-combining-two-onclick-javascript-actions

Good luck


----------



## JimmySeal (Sep 25, 2007)

Amanxman is right, you can do the show and hide in the event handler attribute.

But it might be easier to add an additional function to switch the visibility of two divs:


```
function switchDivs(fromId, toId){
    toggleDiv(fromId, 0);
    toggleDiv(toId, 1);
}
```
Then your link tags would look like this:

```
[URL=#][IMG]governMain.jpg[/IMG][/URL]
[URL=#]Link 2[/URL]
[URL=#]Link 3[/URL]
```


----------



## tomdkat (May 6, 2006)

amanxman said:


> But I'm not sure 100% if you can put two functions in an onClick..i.e.
> 
> 
> ```
> ...


Yep, you can but IMO it would be cleaner to use JimmySeal's approach by passing the ids of the DIVs to toggle into a single function that calls the functions that do the actual work. 

Peace...


----------

