Two Actions with one "OnClick" Javascript Command (Hide one, show another)

**penelopebeach** · 10-13-2012, 05:36 AM

Hi there! I'm an amateur who's been struggling with this for several hours: I'm trying to update a portfolio page and am having trouble figuring out how to infuse two actions into a single Javascript command. When the user clicks on an image pointing to "biztext," I want to get the existing "vidtext" to disappear and "biztext" to appear in its place. I can get either the appear or disappear commands to work on their own, but I don't know how to join them at "onclick" to get both to happen at once.

{The page is set up with three sections. The first appears on the page when it first uploads. If a user clicks on buttons for the other two sections, the javascript should take away the first section and display the one the user clicked. I think the way I've arranged this, it should work as long as I can make one "onclick" command create more than a single action.}

Code that performs "appear" action for "biztext":

Code:

<a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('bizblack','','../images/subhead images/Work Buttons/workbutton-biz-green.png',1)" onClick="document.getElementById('biztext').style.display='block';"><img src="../images/subhead images/Work Buttons/workbutton-biz-black.png" width="200" height="26" id="bizblack" /></a>

Code that should make "vidtext" disappear:

Code:

onClick="document.getElementById('vidtext').style.display='none';"

------------
Full set of Javascript commands used in this part of the document:

Code:

<a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('bizblack','','../images/subhead images/Work Buttons/workbutton-biz-green.png',1)" onClick="document.getElementById('vidtext').style.display='none';"><img src="../images/subhead images/Work Buttons/workbutton-biz-black.png" width="200" height="26" id="bizblack" /></a>&nbsp;&nbsp;&nbsp;&nbsp;
  
  <img src="../images/subhead images/Work Buttons/workbutton-vid-green.png" width="194" height="26" id="vidblack" />
  
  <a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('printblack','','../images/subhead images/Work Buttons/workbutton-print-green.png',1)" onClick="document.getElementById('printtext').style.display='block';" onClick="document.getElementById('vidtext').style.display='none';"><img src="../images/subhead images/Work Buttons/workbutton-print-black.png" width="112" height="26" id="printblack" /></a>

---------

Thanks for your help! Much appreciated.

**keyboard** · 10-13-2012, 05:51 AM

Try

Code:

<a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('bizblack','','../images/subhead images/Work Buttons/workbutton-biz-green.png',1)" onClick="document.getElementById('biztext').style.display='block';document.getElementById('vidtext').style.display='none';"><img src="../images/subhead images/Work Buttons/workbutton-biz-black.png" width="200" height="26" id="bizblack" /></a>

**penelopebeach** · 10-13-2012, 06:26 AM

Thanks for your suggestion. I couldn't get that to work either. The other sections will appear, but the first section will not disappear. Any other thoughts on how to do it? Thanks!

**molendijk** · 10-13-2012, 08:01 PM

Yet keyboard's suggestion is right. There must be something in your swap function that spoils things. Take a look at this, without the swap and the images. It works:

Code:

<a href="javascript: void(0)" onclick="document.getElementById('biztext').style.display='block';document.getElementById('vidtext').style.display='none'; return false">hide vidtext and show biztext</a><br>
<div id="biztext" style="display: none">biztext</div>
<div id="vidtext" style="display: block">vidtext</div>

Arie Molendijk.