Why does show() only work for a split second?

Question

I am trying to have the list items appear on click. When I use the hide() method they start off hidden, but when I add the show() method, it only works for about aa millisecond. Not sure if it is because it always defaults back to the original setting? I basically just want to click the main list <a> in this case Main List and have the other two appear

 $(function() { $('.sublist').hide(); $(".mainlist").on('click', function() { $('.sublist').show(); }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <ul> <li> <a href="" class="mainlist">Main List</a> <li> <a href="" class="sublist">Sublist One</a> </li> <li> <a href="" class="sublist">Sublist Two</a> </li> </li> </ul> 

Answer 1

When you click the link the Whole page refreshes. This Means that your code runs Again:

$('.sublist').hide();

What you should do is prevent default behavior like this:

$(".mainlist").on('click', function(event) {
      $('.sublist').show();
      event.preventDefault();
    });

Answer 2

The problem is that your page is getting reloaded when you click those a elements, because of the href="" on them. So the divs start out hidden, then clicking shows them, but then the page refreshes and they're back to being hidden again (since that's their default state on a freshly-loaded page, thanks to the hide call in your page-ready callback).

If you don't want those links to be followed, prevent the default action when they're clicked via preventDefault (or return false ) in a jQuery handler:

$(function() {
  $('.sublist').hide();
    $(".mainlist").on('click', function(e) {
      e.preventDefault();
      $('.sublist').show(); 
    }); 
})

Live Example:

 $(function() { $('.sublist').hide(); $(".mainlist").on('click', function(e) { e.preventDefault(); $('.sublist').show(); }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <ul> <li> <a href="" class="mainlist">Main List</a> <li> <a href="" class="sublist">Sublist One</a> </li> <li> <a href="" class="sublist">Sublist Two</a> </li> </li> </ul> 

Alternately, there's a hack you can use: href="javascript:;" , but it's preferable to make the links meaningful, and then use script to provide that meaning.

---

Separately: You can't have an li directly inside another li like that, you need another ul (or ol ) in there. See those links for details.

Answer 3

There are two issues:

First, you have li elements nested directly inside li elements - if you want a "sub-list", you need to wrap the sub-items inside a ul (see modified code below).

Second, the link is being followed, which is causing the page to refresh. If ALL you want to have happen is the sublist items to show, then you should use event.preventDefault on the event (see modified code below).

 // no-conflict safe document ready jQuery(function($) { $('.sublist').hide(); // click event accepts one argument for the "event" $(".mainlist").on('click', function(e) { // prevent the default "click" action (which is to load the url the link points to) e.preventDefault(); $('.sublist').show(); }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li> <a href="" class="mainlist">Main List</a> <!-- nested li elements need to be wrapped inside a ul --> <ul> <li> <a href="" class="sublist">Sublist One</a> </li> <li> <a href="" class="sublist">Sublist Two</a> </li> </ul> </li> </ul> 

Answer 4

Since you are using anchor a tag, and there is an empty href attribute, the default behavior should be to redirect the page on anchor click. The fix to this is to either use href="javascript:void(0)" or event.preventDefault() within the click callback

 $(function() { $('.sublist').hide() $(".mainlist").on('click', function(e) { /* here, prevents redirection */ if (e) { e.preventDefault() } $('.sublist').show() }) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li> <a href="javascript:void(0)" class="mainlist">Main List</a> <li> <a href="" class="sublist">Sublist One</a> </li> <li> <a href="" class="sublist">Sublist Two</a> </li> </li> </ul> 

Answer 5

This part of your code :

$(".mainlist").on('click', function() {
  $('.sublist').show(); 
});

Is telling to show the list only during the click event.

Why not using the fadeIn() effects function instead ?

  $( "#appears" ).hide(); $( "#clickme" ).click(function() { $( "#appears" ).fadeIn( "slow", function() { }); }); 

 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <div id="clickme"> Click here </div> <div id="appears"> <ul> <li>I'm a list</li> </ul> </div> </body> </html>