Where to put "return false" in this code (provided)

Question

Initially i was looking for an answer to a show/hide page jumping issue. Having found an answer here: http://stackoverflow.com/questions/2024342/link-with-href-scrolls-page-to-top-when-used-with-jquery-slidetoggle, I need to understand where to put "return false" in the following code:

toggleDetail : function(obj) {
    $(obj).parent().parent().next().toggleClass('hide');
    $(obj).text() == 'Show' ? $(obj).text('Hide') : $(obj).text('Show');
},

and here's my call to the show/hide. The 'href="javascript:void(0);"' worked in stopping the page jumping, do i still need the 'return false'?

<a href="javascript:void(0);" onclick="VSASearch.toggleDetail(this)">Show</a>

i tried adding 'return false' to the end of each $(obj) line before the semi-colon, but that was not it.

Thank you for your assistance.

Answer 1

you want to return false from the onclick hander

<a onclick="VSASearch.toggleDetail(this); return false">Show</a>

Better yet, use unobtrusive javascript and assign event handler in the $() function:

<a id="show">Show</a>

....

$(function() {
 ....
 $("#show").click = function() {
     VSASearch.toggleDetail(this);
     return false;
 }

Answer 2

You just need to return false on the onclick handler. If onclick returns false, then the postback/page reload will be stopped.

<a href="#" onclick="VSASearch.toggleDetail(this);return false;" />

Or you can return the result of your functions as follows:

toggleDetail : function(obj) {
    $(obj).parent().parent().next().toggleClass('hide');
    $(obj).text() == 'Show' ? $(obj).text('Hide') : $(obj).text('Show');
    return false;
},

with

<a href="#" onclick="return VSASearch.toggleDetail(this);" />

Answer 3

toggleDetail : function(obj) {
    $(obj).parent().parent().next().toggleClass('hide');
    $(obj).text() == 'Show' ? $(obj).text('Hide') : $(obj).text('Show');
    return false;
},