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

Question

I use jquery.toggle () to show a div on a page with a display: none when the page loads. However, the default parameters are jquery inserts display: block, where I would like to display: table-cell. How can i achieve this? My attempt:

<div class="mydiv" style"display:none">test</div> .mydiv { display:table-cell; } $("a#showdiv").click(function() { $(".mydiv").toggle(); 

Answer 1

Use .toggleClass() and use css to style ..

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'); } 

Answer 2

Use CSS to style @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"); } }); 

Answer 3

What you should work already.

In jQuery, if the display element's style attribute is not initially set to anything other than none when show is called, all it does is remove the style attribute for display. It does not block the block.

You can verify in this script that when you click the display , the set in CSS is what the element is set to.

Here is the corresponding 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 class switching will usually be faster at all, because there is less information to check.

Answer 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 also understand the priority of CSS, you technically don't need a div. at the last:

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

http://jsfiddle.net/7q27y/

Of course, this is due to the fact that it has priority and the fact that it falls after another operator, which in both cases will be calculated as the same priority. Cm:

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