help please

Discussion in 'JavaScript' started by common2, Jul 9, 2009.

  1. #1
    Hi all,

    i am stuggling with javascript and wondered if someone could help me...

    i have this code in my head section of my page and i want to show and hide other links with the click of one link...

    <script language="javascript" type="text/javascript">
    function showHide(shID) {
      if (document.getElementById(shID)) {
        if (document.getElementById(shID+'-show').style.display != 'none') {
            document.getElementById(shID+'-show').style.display = 'none';
            document.getElementById(shID).style.display = 'block';
           }
        else {
            document.getElementById(shID+'-show').style.display = 'none';
            document.getElementById(shID).style.display = 'none';
           }
         }
    }
    </script>
    HTML:
    this is in the body:

    <a href="#" id="Appliances-show" class="showLink" onclick="showHide('Appliances');return true;"><li>Appliances</li></a>
    									<div id="Appliances" class="more">
                                        						    &#8195;<a class="two" href="products.php?products=appliances_major">Major</a><br/>
    								    &#8195;<a class="two" href="products.php?products=appliances_small">Small</a></div>	
    HTML:
    this works differently in internet explorer and in firefox. I want it to work that when I click on the link "Appliances" it should show/hide the other two links, in firefox that works once, it show the links and hide it,but then nothing happens, in internet explorer it shows the other two links,but takes the aplliances link away...

    Can someone please help me?
     
    common2, Jul 9, 2009 IP
  2. Logic Ali

    Logic Ali Well-Known Member

    Messages:
    170
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    108
    #2
    
    <head>
    <script  type="text/javascript">
    function showHide(shID) 
    {
     var elem = document.getElementById(shID);
    
     if( elem )
      elem.style.display = elem.style.display == 'none' ? 'block' : 'none';     
     
     return false;   
    }
    </script>
    
    
    </head>
    <body>
    <a href="#" id="Appliances-show" class="showLink" onclick="return showHide('Appliances')"><li>Appliances</li></a>
    <div id="Appliances" class="more">
     <a class="two" href="products.php?products=appliances_major">Major</a>
     <br/>
     <a class="two" href="products.php?products=appliances_small">Small</a>
     </div>
     
    
    </body>
    </html>
    Code (markup):
     
    Logic Ali, Jul 9, 2009 IP