JQuery slideToggle display type

Question

I'm using a jQuery slideToggle to show a hidden table row but it sets the display style to block and I need to to display table-row. any ideas how i could accomplish this?

thanks in advance

Fourscore

Answer 1

I figured out a solution to this problem - check if the display has been set to block (if the element has been toggled to be shown) and if so set to desired display type.

$('a.btn').on('click', function() {
    $('div.myDiv').slideToggle(200, function() {
        if ($(this).css('display') == 'block') $(this).css('display', 'table-row'); // enter desired display type
    });
});

Howse

note the question, he asked how to set the inline style to table-row , not inline-block -1 – Engler

@Engler Note my code- the commented section that says "enter desired display type". That's pretty weak to downvote the only working solution to this question. – Howse

was weak to download mine which satisfied the question...anyway upvoted you – Engler

@Engler Thanks, I appreciate it. The reason I downvoted yours was because I actually tried it. The problem with your answer is that slidetoggle() shows AND hides, but with your modification, it can't hide. – Howse

Answer 2

inorganik's solution is almost working. But you also need to set the step callback to change block to table-row.

        $('row-selector-here').slideToggle({
            duration: 'fast',
            step: function() {
                if ($(this).css('display') == 'block') {
                    $(this).css('display', 'table-row');
                }
            },
            complete: function() {
                if ($(this).css('display') == 'block') {
                    $(this).css('display', 'table-row');
                }
            }
        });

Ossifrage

This also works for when setting display to flex rather than table-row. I also had to add another if clause to detect when it sets it to none, and sets it to '' so external css could apply without being overridden (jquery messes with the element's css directly in the html, which overrides css anywhere, unless !important is used, which I didn't want to use). – Ernestineernesto

Answer 3

You can use the callback to change this

$('#tableRowId').slideToggle( function(){
   $(this).css('display', 'table-row');
});

Engler

The issue with this is that it sets the display style to table-row every time, when half the time you really want it to be hidden. – Rodrickrodrigez

Same problem, had to downvote it. slideToggle() shows and hides, this makes it so it can't hide. Check my answer below – Howse

Answer 4

This is a known bug (also here). with jQuery slideToggle. There isn't any way to use slideToggle and have it properly preserve the display style. You can apply the display style with a callback when the animation completes, but that may not achieve the effect you desire.

Sofar

It's worth noting that the bug report says using simply .toggle() works as expected. – Araujo

Answer 5

just add this code to callback function

$(this).css('display','');

Necessitate