避免隐藏的元素占用空间/无法使visible：true最初显示为：css样式中没有

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>

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 coz i've made div second display none & 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 understand your question right , you want to pass the ids of other DOM elemnts , this case divs. To select other DIVS you will need to add class to those DIVS.

<div class = 'someclass1' id ='one'></div>

and on your onclick event pass

$('.someclass1').attr('id');

Answer 2

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