Question

I have created a menu. It’s pretty basic but I got a problem which i haven’t figured out so far.

When page loads. All links are hidden in menu tab. When user clicks the tab links show up . But when user clicks any link tab collapsed again. So every time user has to click the tab to click any link.

I want the links to be shown untill the user clicks the tab.

Please check my code below. Please help, it’s been two days now i am dealing with this.

<a id="doc_test" >
    <img src="../../images/menu_icons/documents_button.png" border="0"  />
</a>
<br />
<div id="docSubLink_test" style="padding-left:10px;display: none;">
    <a class=""  id="d1" href="#" >apple</a><br />
    <a class=""   id="d2" href="#" >grapes</a><br />
    <a class=""   id="d3" href="#" >orange</a><br />
    <a class=""   id="d4" href="#" >peach</a><br />
</div>

Javascript:

if($('#docSubLink_test').is(':visible')) {
   $('#doc_test').click(function(){
       alert('1');
       //$('docSubLink_test').css("display","inline");  
       $('#docSubLink_test').slideUp(500);
       //$('docSubLink_test').slideUp('medium'); 
   });
}

if($('#docSubLink_test').is(':hidden')) {
   $('#doc_test').click(function(){
       //alert('1');
       //$('docSubLink_test').css("display","inline");  
       $('#docSubLink_test').show(500);
       //$('docSubLink_test').slideUp('medium'); 
   });
}

//Link to other page
$('#d1').click(function(){  
    $.get('http://www.abc.com/products/doc_test.php?orange',function(data){         
        $('body').html(data); 
    }); 
});
$('#d2').click(function(){          
    $.get('http://www.abc.com/products/doc_test.php?apple',function(data){
        $('body').html(data); 
    }); 
});
$('#d3').click(function(){  
    $.get('http://www.abc.com/products/doc_test.php?peach',function(data){
        $('body').html(data); 
    });
});
$('#d4').click(function(){  
    $.get('http://www.abc.com/products/doc_test.php?grapes',function(data){
        $('body').html(data); 
    }); 
});

Answer 1

I have already fixed that one. As I was refreshing the body with ajax result. so everytime i was clicking any link it refreshes the whole body containing menu itself. so menu collapses.
Right answer was given by Gaby aka G. Petrioli in comments