Question

<style type="text/css">
#second{
 display:none;
}
</style>

On mouse event I want to pass id’s of div which is not related to current element from where I am calling the function.

<div id="first">
     ....
     ....
</div>
<div id="second">
     ....
     ....
</div>

<input type="image" src="..." id="notrelated"
 onClick="f('first','second')"
 />

JavaScript

<script type="text/javascript" language="javascript">
function f(first,second){
document.getElementById(first).style.display='none';
document.getElementById(second).style.visibility='visible';
}
</script>

The above function thus helps in hiding and make the div visible which is based on mouse event on image.

I followed these above steps,after making visibility ‘visible’ it wont show because I’ve made div second display none and I tried making the following changes which results in second div occupying space which I don’t prefer:

<style type="text/css">
#second{
visibility:hidden;
}
</style>

Answer 1

If I got your question, you just want to pass your div ids in the function. So you can easily pass it in any function.

Like

<input type="image" src="..." id="notrelated" onClick="Toggle('first','second')" />

and your js function will work

function Toggle(first,second){
   document.getElementById(first).style.visibility='hidden'
   document.getElementById(second).style.visibility='visible'
}

But If you want that only passing these id you want to toggle these, then you should change your function to like

function Toggle(first,second){
   var firstDiv = document.getElementById(first);
   var secondDiv = document.getElementById(second);
   firstDiv.style.visibility= firstDiv.style.visibility == 'hidden'?'visible':'hidden';
   secondDiv.style.visibility= firstDiv.style.visibility == 'hidden'?'visible':'hidden';
}

You can check this DEMO