Menu
my target slideToggle() div needs to be display:inline-block instead of display:block when it's open. Is there a way to change the jquery behavior here?
Edit:
i'm using jQuery 1.7.0 at the moment. Also, the <div> is initially at display:none and should expand to display:inline-block after a click on a link; but apparently the default state for slideToggle() in this situation is display:block ...
889
Also, with display: inline-block , the top and bottom margins/paddings are respected, but with display: inline they are not. Compared to display: block , the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.
“display: inline-block” Property: This property is used to display an element as an inline-level block container. The element itself is formatted as an inline element, but it can apply height and width values. It is placed as an inline element (on the same line as adjacent content).
An inline-block elements will respect a width . People used to¹ build column layout systems with inline-block , because it basically can do what floats could do here, except without the need to worry about clearing the float², allowing people to take advantage of wrapping which happens a bit more elegantly than float.
A little birdie told me...
$('#my-block').slideToggle('medium', function() { if ($(this).is(':visible')) $(this).css('display','inline-block'); }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
