In my code I'm using a link button called updateLogButton which shows/hides a div. Because I use a link button everytime its clicked focus is moved to the beginning of the page. How can I stop this default behaviour?

Jquery snippet:

$('#updateLogText').hide();

$('#updateLogButton').click(function() {

    if ($('#updateLogText').is(':visible')){

        //hide div if content is visible
        $('#updateLogText').fadeOut();

    }else{

        $('#updateLogText').fadeIn();       
    }

});

HTML code:

<tr>
    <td><a href="#"  id="updateLogButton">Update Log</a></td>
</tr>
<tr>
    <td colspan="3" >
        <div id="updateLogText" style="width:100%;">
            <?php echo $data['updates']; ?>
        </div>

    </td>
</tr>

EDIT: example of what i mean: /

In my code I'm using a link button called updateLogButton which shows/hides a div. Because I use a link button everytime its clicked focus is moved to the beginning of the page. How can I stop this default behaviour?

Jquery snippet:

$('#updateLogText').hide();

$('#updateLogButton').click(function() {

    if ($('#updateLogText').is(':visible')){

        //hide div if content is visible
        $('#updateLogText').fadeOut();

    }else{

        $('#updateLogText').fadeIn();       
    }

});

HTML code:

<tr>
    <td><a href="#"  id="updateLogButton">Update Log</a></td>
</tr>
<tr>
    <td colspan="3" >
        <div id="updateLogText" style="width:100%;">
            <?php echo $data['updates']; ?>
        </div>

    </td>
</tr>

EDIT: example of what i mean: http://jsfiddle/cF4Bb/7/

• javascript
• jquery

Share Improve this question Follow edited Oct 9, 2012 at 8:33 greenpool asked Oct 9, 2012 at 8:07 greenpoolgreenpool 56155 gold badges1717 silver badges3333 bronze badges 5

• One way to achieve that is to remove href from a tag. – Riz Commented Oct 9, 2012 at 8:09
• @Dev that pletely removes the a functionality (hover colors etc.) in some browsers, so I guess that's not an option. – Deep Frozen Commented Oct 9, 2012 at 8:13
• @Rune: If you don't want redirection, there shouldn't be any issue. – Riz Commented Oct 9, 2012 at 8:15
• @Dev: removing the href tag doesn't give me the 'visual pointer' for the link button. – greenpool Commented Oct 9, 2012 at 8:32
• 1 @greenpool: You can get that by CSS: cursor:pointer; – Riz Commented Oct 9, 2012 at 8:36

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

To prevent the default action when the link is clicked you can return false from the click handler or call event.preventDefault where event is the event object passed to the click handler.

$('#updateLogText').hide();

$('#updateLogButton').click(function(event) {

    if ($('#updateLogText').is(':visible')){

        //hide div if content is visible
        $('#updateLogText').fadeOut();

    }else{

        $('#updateLogText').fadeIn();       
    }
    event.preventDefault();
    //or return false;
});

Add return false

$('#updateLogButton').click(function() {

    if ($('#updateLogText').is(':visible')){

        //hide div if content is visible
        $('#updateLogText').fadeOut();

    }else{

        $('#updateLogText').fadeIn();       
    }

     return false;
});

You can also try changing your href to:

<a href="javascript:void(0);" id="updateLogButton">Update Log</a>

Return false from the one click event

$('#updateLogText').hide();

$('#updateLogButton').click(function() {

    if ($('#updateLogText').is(':visible')){

       //hide div if content is visible
        $('#updateLogText').fadeOut();

    }else{

        $('#updateLogText').fadeIn();       
    }
    return false;
});

Remove the href="#" from

<td><a **href="#"** id="updateLogButton">Update Log</a></td>

to

<td><a id="updateLogButton">Update Log</a></td>

note that this may remove the 'hyperlink' like text; which you can re-apply using css.

[EDIT: ADDED] Alternatively you can use LinkButton instead as follows:

<asp:LinkButton id="btnLink" Text="Update Log" **onclick**="javascript:ShowHide(); return false;"/>

You will have to write your own javascript function. **Note: can't remember on top of my head whether it onclick or onclientclick but you get the idea.