asked on

How to Toggle from one menu bar to another onclick

I have a menu bar containing two sets of menus: public and premium.

When users click on public (<td width="50%" background="images/bg_pub_access.gif"><a href="/public/XXX"><img src="images/button_pub_access_na.gif" width="296" height="52" border="0"></a></td>), I want the premium menu to disappear and the public menu to display.

When users click on premium (<td width="50%" background="images/bg_button_prem_services.gif"><a href="/premium/XXX"><img src="images/button_prem_services_na.gif" border="0"></a></td>), I want the public menu to disappear and the premium menu to display.

Thanks,

<!-- premium menu begin -->
 
<table width="950" border="0" cellpadding="0" cellspacing="0" class="Text_Main">
  <tr>
    <td width="100%" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="50%" background="images/bg_pub_access.gif"><a href="/public/XXX"><img src="images/button_pub_access_na.gif" width="296" height="52" border="0"></a></td>
        <td width="14"><img src="images/border_top_2.gif" width="14" height="52"></td>
        <td width="50%" background="images/bg_button_prem_services.gif"><img src="images/button_prem_services_a.gif" border="0"></td>
 
        <td width="9"><img src="images/button_prem_services_a_end.gif" width="9" height="52"></td>
      </tr>
    </table>
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td class="TopActive_PR"><center>
              Hot Box
            </center></td>
            <td class="TopTab_PR"><center>
 
              <a href="index_1.html">Newsletter</a>
            </center></td>
            <td class="TopTab_PR"><center>
              <a href="index.html">QQQ Trader</a>
            </center></td>
            <td class="TopTab_PR"><center>
              <a href="index_3.html">Tutorial</a>
 
            </center></td>
            <td class="TopTab_PR"><center>
              <a href="index.html">Member Services</a>
            </center></td>
          </tr>
        </table>
 
 
<!-- premium menu end -->
 
 
<!-- public menu begin -->
 
<table width="950" border="0" cellpadding="0" cellspacing="0" class="Text_Main">
  <tr>
    <td width="100%" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="50%" background="images/bg_pub_access.gif"><img src="images/button_pub_access_a.gif" width="296" height="52" border="0"></td>
        <td width="14"><img src="images/border_top_1.gif" width="14" height="52"></td>
        <td width="50%" background="images/bg_button_prem_services.gif"><a href="/premium/XXX"><img src="images/button_prem_services_na.gif" border="0"></a></td>
 
        <td width="9"><img src="images/button_prem_services_na_end.gif" width="9" height="52"></td>
      </tr>
    </table>
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td class="TopActive"><center>
              Welcome
            </center></td>
            <td class="TopTab"><center>
 
                <a href="index_1.html">Weekly Report</a>
            </center></td>
            <td class="TopTab"><center>
                <a href="index.html">Our Philosophy</a>
            </center></td>
            <td class="TopTab"><center>
                <a href="index_3.html">Our Services</a>
 
            </center></td>
            <td class="TopTab"><center>
                <a href="index.html">Become a Member</a>
            </center></td>
          </tr>
        </table>
        
        <!-- public menu end -->

Open in new window

hielo

The code below would work, but you need to position:
id='premiumMenu' and id='publicMenu' on the elements that you wish to hide. I cannot tell from what you posted because its graphic based and I don't have access to them.

<!-- premium menu begin -->
 <script type="text/javascript"><!--
 function hide(el)
 {
 	document.getElementById(el).style.display="none";
 }
 function show(el)
 {
 	document.getElementById(el).style.display="";
 }
 //--></script>
<table width="950" border="0" cellpadding="0" cellspacing="0" class="Text_Main">
  <tr>
    <td width="100%" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td id="publicMenu"  onclick="hide('premiumMenu');" width="50%" background="images/bg_pub_access.gif"><a href="/public/XXX"><img src="images/button_pub_access_na.gif" width="296" height="52" border="0"></a></td>
        <td width="14"><img src="images/border_top_2.gif" width="14" height="52"></td>
        <td width="50%" background="images/bg_button_prem_services.gif"><img src="images/button_prem_services_a.gif" border="0"></td>
 
        <td width="9"><img src="images/button_prem_services_a_end.gif" width="9" height="52"></td>
      </tr>
    </table>
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td class="TopActive_PR"><center>
              Hot Box
            </center></td>
            <td class="TopTab_PR"><center>
 
              <a href="index_1.html">Newsletter</a>
            </center></td>
            <td class="TopTab_PR"><center>
              <a href="index.html">QQQ Trader</a>
            </center></td>
            <td class="TopTab_PR"><center>
              <a href="index_3.html">Tutorial</a>
 
            </center></td>
            <td class="TopTab_PR"><center>
              <a href="index.html">Member Services</a>
            </center></td>
          </tr>
        </table>
 
 
<!-- premium menu end -->
 
 
<!-- public menu begin -->
 
<table width="950" border="0" cellpadding="0" cellspacing="0" class="Text_Main">
  <tr>
    <td width="100%" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="50%" background="images/bg_pub_access.gif"><img src="images/button_pub_access_a.gif" width="296" height="52" border="0"></td>
        <td width="14"><img src="images/border_top_1.gif" width="14" height="52"></td>
        <td width="50%" id="premiumMenu" onclick="hide('publicMenu');" background="images/bg_button_prem_services.gif"><a href="/premium/XXX"><img src="images/button_prem_services_na.gif" border="0"></a></td>
 
        <td width="9"><img src="images/button_prem_services_na_end.gif" width="9" height="52"></td>
      </tr>
    </table>
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td class="TopActive"><center>
              Welcome
            </center></td>
            <td class="TopTab"><center>
 
                <a href="index_1.html">Weekly Report</a>
            </center></td>
            <td class="TopTab"><center>
                <a href="index.html">Our Philosophy</a>
            </center></td>
            <td class="TopTab"><center>
                <a href="index_3.html">Our Services</a>
 
            </center></td>
            <td class="TopTab"><center>
                <a href="index.html">Become a Member</a>
            </center></td>
          </tr>
        </table>
        
        <!-- public menu end -->

Open in new window

fippif

ASKER

Thx for you guidance. It seems I would need something like this (please see attached code)
But the page is refreshed every time I click on each of the links. So I can see each element disappear, but it reappears immediately. Please advise.

<html>
  <head>
    <title>WebForm3</title>
    <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
    <meta name="CODE_LANGUAGE" Content="C#">
    <meta name=vs_defaultClientScript content="JavaScript">
    <meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
    <script type="text/javascript"><!--
function toggle(el1,el2)
 {
		document.getElementById(el1).style.display="";
        document.getElementById(el2).style.display="none";        
 }
 
 
 //--></script>
 
  </head>
  <body MS_POSITIONING="GridLayout">
	
    <form id="Form1" method="post" runat="server">
    <table id="TABLE1"><tr><td>
    <a href=""  onclick="toggle('TABLE1','TABLE2')">TABLE-1</a>
    </td></tr></table>
    <br>
    <table><tr><td>
    <a href="" id="TABLE2" onclick="toggle('TABLE2','TABLE1')">TABLE-2</a><br>
    </td></tr></table>
        
 
     </form>
	
  </body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial