Question

I am new to JQuery but I’ve started by making a list creator essentially. I have an empty list and an input field and a link for the user to add elements to the list. When I add something, I would like it to be hidden at first and then show up dynamically using JQuery. Currently, it adds it to the list but it sets the display: block instead of display:list-item or nothing at all. Am I doing something wrong?

So here is some code

$('a#addstep').click(function() {     if ( $('#step').val().length > 0 ) {         $('<li />')             .text($('#step').val())             .hide()             .appendTo('ol#instructions')             .show('normal');     } }); 

Here is some HTML

<ol id='instructions'></ol> <input type='text' id='step' size='60' /> <a href='#' id='addstep'>Add</a> 

Answer 1

I’m not exactly sure why your adding the extra calls to show/hide. When you add an item it will show it. Please explain further as to why you need to do the show/hide.

If you absolutely have to.

$('a#addstep').click(function() {         if ( $('#step').val().length > 0 ) {                 $('<li />')                     .text($('#step').val())                     .hide()                     .appendTo('ol#instructions')                     .show('normal', function() {             $(this).css('display', 'list-item')         });         } });