Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

change slideToggle() behaviour to display:inline-block instead of display:block?

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 ...

like image 889
iHaveacomputer Avatar asked Nov 16 '11 00:11

iHaveacomputer


People also ask

What is the difference between display block and display inline?

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.

What is display inline block?

“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).

What would be a reason to set an element to display inline block?

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.


1 Answers

A little birdie told me...

$('#my-block').slideToggle('medium', function() {     if ($(this).is(':visible'))         $(this).css('display','inline-block'); }); 
like image 176
black Avatar answered Sep 28 '22 02:09

black