Home/ Questions/Q 705801
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T04:05:39+00:00

<!DOCTYPE html> <html lang=en> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8> <script src=http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js type=text/javascript></script> <script type=text/javascript>

  • 0
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

   <script type="text/javascript">
     $(function(){
        $('div#menu div')
        .bind('mouseover',function(event){
            popHelp(this);
            })
         .bind('mouseout',function(event){
            clearHelp();
         })
         .toggle(
            function(event){$('#menu div a').not(this).css('opacity',1);$(event.target).css('opacity',0.4)},
            function(event){$(event.target).css('opacity',1)}
            )
        $('div.item').not('#mainPage')
        .hide()
        $('#customerManagement').click(function(event){
               $('.item').hide('slow');
               $('#customerManagementCon').toggle('slow');
               return false;
           })
        $('#userManagement').click(function(){
            $('.item').hide('slow');
            $('#userManagementCon').toggle('slow');
            return false;
           })
         $('#storageManagement').click(function(){
            $('.item').hide('slow');
            $('#storageManagementCon').toggle('slow');
            return false;
           })
         $('#searchManagement').click(function(){
            $('.item').hide('slow');
            $('#searchManagementCon').toggle('slow');
            return false;
           })  
         $('#signOff').click(function(){
            $('.item').hide('slow');
            $('#signOffCon').toggle('slow');
            return false;
           })  
     }
     );

     function popHelp(ref){
        var text;
        if(ref.id=="customerManagement")
            text="click here for customer management";
        else if(ref.id=="userManagement")
            text="click here for user management";
        else if(ref.id=="storageManagement")
            text="click here for storage management";
        else if(ref.id=="searchManagement")
            text="search management";
        else if(ref.id=="signOff")
            text="click here to sign off";
        $('#helpConsole').append('<div class="help">'+text+'<div>');
      }
     function clearHelp(){
        $('#helpConsole > div').remove();
     }

   </script>
   <style type="text/css" >
       #helpConsole
       {
           background-color:Aqua;
           margin-left:500px;
           width:300px;
           height:100px;
           outline-width:medium;
       }
   </style>
 </head>
 <body>
   <div id="menu">
   <table border="2">
       <thead>
        <tr>                              
            <th colspan="5">Welcome $Employee Name</th>
         </tr>
        </thead>
        <tbody>
           <tr>
               <td><div id="customerManagement" class="menuItem"><a>Customer Management</a></div></td>
                <td><div id="userManagement" class="menuItem"><a>User Management</a></div></td>
               <td><div id="storageManagement" class="menuItem"><a>Storage Management</a></div></td>
               <td><div id="searchManagement" class="menuItem"><a>Search Management</a></div></td>
               <td><div id="signOff" class="menuItem"><a>Sign Off</a></div></td>
            </tr>
        </tbody>
   </table>
 </div>
 <div id="helpConsole"><h3>help</h3></div>
 <div id="mainPage" class="item"><h1>Storage Service</h1></div>
 <div id="customerManagementCon"  class="item">
     <h3>Customer Management</h3>
    </div>
    <div id="userManagementCon"  class="item">
     <h3>User Management</h3>
    </div>
    <div id="storageManagementCon"  class="item">
     <h3>Storage Management</h3>
    </div>
     <div id="searchManagementCon"  class="item">
     <h3>Search Mangement</h3>
    </div>
    <div id="signOffCon"  class="item">
     <h3>Sign Off</h3>
    </div>
 <div id="menuItemCon" class="item">menuItem</div>
 </body>

The toggle function in this code is not working as expected though it shows the #menu items when clicked it doesn’t hide them always .

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are fading the <div> out but referencing the <a> on the toggle, you need to fade the <div> back in, like this:

    This: $('#menu div a').not(this)
    Needs to be: $('#menu div').not(this)

    This will bring the correct faded elements back like you want.
    Here’s an updated sample with some other tweaks to slim it down as well.

    • 0