JQuery show() method resets “li” entries to display:block

jquery

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.

Best Solution

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.

Related Question