How to change jquery .toggle() to use display:table-cell?

Question

I am using jquery .toggle() to show a div on a page that has display:none on page load. However, under the default settings jquery inserts display:block, where I would want display:table-cell. How can I achieve this? My attempt so far:

<div class="mydiv" style"display:none">test</div>

.mydiv {
display:table-cell;
}

$("a#showdiv").click(function() {
    $(".mydiv").toggle();

Solution 1

Use .toggleClass() instead and use css for the styling..

html

<div class="mydiv table-hidden">test</div>

css

.mydiv {
    display:table-cell;
}
.mydiv.table-hidden{
    display:none;
}

jquery

$("a#showdiv").click(function() {
    $(".mydiv").toggleClass('table-hidden');
}

Solution 2

Use CSS for the styling @Gaby aka G. Petrioli or use the .css() method in jQuery.

HTML

<div class="mydiv">test</div>

jQuery

$("a#showdiv").click(function() {
    if($(".mydiv").css("display") == "none"){
      $(".mydiv").css("display", "table-cell");
    } else {
      $(".mydiv").css("display", "none");
    }
});

Solution 3

What you have should work already.

In jQuery, unless the style attribute of the element has display initially set to something else other than none, when the show is called, all it does is remove the style attribute for display. It doesn't set it block.

You can see for yourself in this fiddle that when the button is clicked, the display that is set in the CSS is what the element is set to.

Here's the relevant code in the jQuery source:

function showHide( elements, show ) {
    var display, elem, hidden,
        values = [],
        index = 0,
        length = elements.length;

    for ( ; index < length; index++ ) {
        elem = elements[ index ];
        if ( !elem.style ) {
            continue;
        }

        values[ index ] = data_priv.get( elem, "olddisplay" );
        display = elem.style.display;
        if ( show ) {
            // Reset the inline display of this element to learn if it is
            // being hidden by cascaded rules or not
            if ( !values[ index ] && display === "none" ) {
                elem.style.display = "";
            }

            // Set elements which have been overridden with display: none
            // in a stylesheet to whatever the default browser style is
            // for such an element
            if ( elem.style.display === "" && isHidden( elem ) ) {
                values[ index ] = data_priv.access( elem, "olddisplay", css_defaultDisplay(elem.nodeName) );
            }
        } else {

            if ( !values[ index ] ) {
                hidden = isHidden( elem );

                if ( display && display !== "none" || !hidden ) {
                    data_priv.set( elem, "olddisplay", hidden ? display : jQuery.css(elem, "display") );
                }
            }
        }
    }

    // Set the display of most of the elements in a second loop
    // to avoid the constant reflow
    for ( index = 0; index < length; index++ ) {
        elem = elements[ index ];
        if ( !elem.style ) {
            continue;
        }
        if ( !show || elem.style.display === "none" || elem.style.display === "" ) {
            elem.style.display = show ? values[ index ] || "" : "none";
        }
    }

    return elements;
}

I should note that toggling classes will usually be faster in general because there is less information to check.

Solution 4

.display-none {
    display: none;
}
div.display-table-cell {
    display: table-cell;
}

<button id="showdiv">Show/Hide</button>
<div class="mydiv display-none">test</div>
<div class="mydiv display-none">test</div>
<div class="mydiv display-none">test</div>
<div class="mydiv display-none">test</div>

$("#showdiv").click(function() {
    $(".mydiv").toggleClass('display-table-cell');
});

http://jsfiddle.net/7q27y/

If you understand CSS precedence as well, you don't technically "need" the div. on the latter:

div.display-table-cell {
    display: table-cell;
}

http://jsfiddle.net/7q27y/

Of course, this is due to it's precedence and the fact it falls after the other statement, which both would calculate as the same precedence otherwise. See:

http://jsfiddle.net/7q27y/2/

View more solutions