Question

I am using jQuery to simply toggle a <div>. I set the item being toggled to display: inline; in my CSS so it does not show, and when the item is toggled I see in my Chrome’s Inspector the item gets set to display: block;

Is it possible to have this set to display: inline-block instead? If this isn’t clear enough I’ll provide you with my code…I just don’t happen to have it with my right now.

Answer 1

You can. but it’s not a particularly good idea. It involves tapping in to jQuery’s internal _data method, and overriding the browser’s determined default display property.

Code:

$(function() {
    $(".toggler").click(function() {
        var dom = $(".showhide");
        jQuery._data(dom[0],"olddisplay","inline-block");
        dom.toggle();
    });
});

Example: http://jsfiddle.net/bstakes/2ncW5/

I would recommend using some type of class switching, as mentioned in the comments.