jQuery show() method resets "li" entries to display:block

Question

I have a relatively simple page that has a couple of LI entries that I want to be able to show on click. The idea is to simulate PowerPoints logic where groups of elements appear when you click on the page.

In the "click()" handler for the parent "div" element I have:

$(function() {
    var currentReveal;
    var currentGroup = 1;

    currentReveal = $("[class*=Revealed]").hide().length;
    $("div").click(function() {
    if (currentReveal != 0) {
        var revealedElements = $("[class*=Revealed]").filter("[revealgroup='" +
                                 currentGroup + "']");
        $(revealedElements).show("normal");
        currentGroup += 1;
        currentReveal -= revealedElements.length;
    }
});

The HTML that this is acting on is:

    <div class="Body">
    <ul>

    <li>Lorem Ipsus</li>
    <ul>
        <li class="RevealedList" revealgroup="1" >Lorem Ipsus:</li>
        <ul class="Revealed" revealgroup="1">
            <li>Lorem Ipsus.</li>
            <li>Lorem Ipsus.</li>
        </ul>
        <li class="RevealedList" revealgroup="1">Lorem Ipsus</li>
     </ul>
     </div>

Unfortunately when the show() command finishes executing, the "li" entry has a style of "display:block" and not a style of "display:list-item" (verified with firebug and IE). I know I can trivially work around this problem (by updating the code to fix the style after the "show()" method has completed), but I'd like to know what I'm doing wrong.

Answer 1

When you do .hide(), your li elements get display:hide, so .show() sets them to display:block because the previous display property value has been lost. So you have two alternatives:

• Remove Revealed-like classes from the li and put them in the ul or other container element that is able to get display set to block or
• Instead of .show(), try using something like .css({display:'list-item'})

I'd probably go with the second one.

If you want to achieve a .show("normal")-like effect, you can do something like

// assume the following var
var yourstuff = $(/* the stuff you're hiding */);

// instead of just calling .hide(), store width and height first
yourstuff.each(function() {
  $(this).data('orig_w',$(this).width())
         .data('orig_h',$(this).height())
}).hide()

// then, instead of resetting 'display', animate the stuff
yourstuff.css({display:'list-item', overflow: 'hidden', width:0, height: 0;})
  .animate({width: yourstuff.data('orig_w'), height: yourstuff.data('orig_h')},
     "normal", //speed
     "linear", //easing
     function() { // in the end, reset 'overflow' to show the bullet
       yourstuff.css('overflow', 'none');
     })

I hope the above snippet to be enough to give you an idea of what to do.

Answer 2

I realize this a few years old, but I encountered this today:

jQuery .show() and .hide() do restore the proper display-property of the <li> element, but only when not animating it.

I.e., just calling .hide() and .show() will restore to list-item.

But calling .show(250) will restore to block.