# Using "javascript:void(0);" onClick=

**URL:** https://forum.kirupa.com/t/using-javascript-void-0-onclick/264414
**Category:** web dev
**Created:** [June 25, 2008, 10:02pm UTC](https://forum.kirupa.com/t/using-javascript-void-0-onclick/264414 "2008-06-25T22:02:03Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![somnamblst](https://avatars.discourse-cdn.com/v4/letter/s/a4c791/32.png) [@somnamblst](https://forum.kirupa.com/u/somnamblst)
#### Post date: [June 25, 2008, 10:02pm UTC](https://forum.kirupa.com/t/using-javascript-void-0-onclick/264414/1 "2008-06-25T22:02:03Z")

</div>

I am currently using \<a class=“toggle” href="#one"\> etc to show & hide \<li\>s

The page scrolls downward for each “tab” click. I was told I could do away with the jumpiness by using “javascript:void(0);” but I cannot figure out what to do with “#one”

I used this demo called jQuery Hide Alll Except One (like tabs)

[http://enure.net/dev/hide-all-except-one/](http://enure.net/dev/hide-all-except-one/)

The function is

```auto
jQuery.noConflict();
jQuery(document).ready(function() {
    var hash = window.location.hash;
    
    (!hash) ?  
        hideAllExcept('#' + jQuery('#toggleThis > div:first').attr('id')) 
            : hideAllExcept(window.location.hash);

    jQuery('a.toggle').click(function() {
        var href = jQuery(this).attr('href');
        hideAllExcept(href);
    });
});

function hideAllExcept(el) {
    jQuery('#toggleThis div').addClass('hide');
    jQuery(el).removeClass('hide');

    jQuery('a.toggle').removeClass('active');
    jQuery('a[href="' + el + '"]').addClass('active');
    
}

```

---

<div class="post-metadata">

### Author: ![ramie](https://avatars.discourse-cdn.com/v4/letter/r/edb3f5/32.png) [@ramie](https://forum.kirupa.com/u/ramie)
#### Post date: [June 26, 2008, 6:38am UTC](https://forum.kirupa.com/t/using-javascript-void-0-onclick/264414/2 "2008-06-26T06:38:40Z")

</div>

Return false from the click event rather than a void from the href (it’s the same thing) that will prevent the jumpiness this and leaves the href within your link intact, i.e

```auto

    jQuery('a.toggle').click(function() {
        var href = jQuery(this).attr('href');
        hideAllExcept(href);
        **[COLOR=Red]return false;[/COLOR]**
    });

```

```auto

<a class="toggle" href="#one">link</a>

```

---

<div class="post-metadata">

### Author: ![somnamblst](https://avatars.discourse-cdn.com/v4/letter/s/a4c791/32.png) [@somnamblst](https://forum.kirupa.com/u/somnamblst)
#### Post date: [June 26, 2008, 2:41pm UTC](https://forum.kirupa.com/t/using-javascript-void-0-onclick/264414/3 "2008-06-26T14:41:11Z")

</div>

Thank you! I think I should let the creator of this jQuery demo know.

[http://enure.net/dev/hide-all-except-one/](http://enure.net/dev/hide-all-except-one/)

In the real world of pages with multiple scripts there were 2 problems. The hidden \<li\>s show stacked below before snapping into place and the HREF advancing the scrollbars onClick.
