PDA

View Full Version : Mouse Over in Javascript expand collapse menu


nitika123
Sep 14, 2009, 11:37 PM
Hi All,

I am new to javascript. I am using the below javascript for expand collpase menu. When user clicks to expand the menu, -image appears and when clicks to collapse the menu,+ image appears. I want to use the sme script for mouse hover. How can I.



<script type="text/javascript">
document.getElementById('personal_details').style. display='none';
document.getElementById('income_details').style.di splay='none';
document.getElementById('return_details').style.di splay='none';
document.getElementById('filing_details').style.di splay='none';

function switchMenu(id)
{
obj=document.getElementById(id);
col=document.getElementById("x" + id);

if (obj.style.display=='none')
{
obj.style.display='block';
col.innerHTML="<img src='/it_media/v4/n/images/minus2.gif'/>";
}
else
{
obj.style.display='none';
col.innerHTML="<img src='/it_media/v4/n/images/plus2.gif'/>";
}
}

</script>

sharepointer
Dec 9, 2010, 04:17 AM
paste the below script in your page header

<SCRIPT type=text/JavaScript langauge="JavaScript">
function doMenu(item) {
obj=document.getElementById(item);
col=document.getElementById("x" +item);
if (obj.style.display=="none") {
obj.style.display="block";
col.innerHTML="<img src='//images/Minus.gif'/>";
}
else {
obj.style.display="none";
col.innerHTML="<img src='//images/Plus.gif'/>";
}
}
</SCRIPT>

apply below code in form

<a id="xmain14" href="javascript:doMenu('main14');" > <img src='//images/Plus.gif'/></a>

create content using DIV's like below.

<DIV style="DISPLAY: none" id=main14> your content </DIV>