Grow your CSS skills. Land your dream job.

Which of these 3 is best practice?

  • # June 12, 2013 at 7:30 pm

    Here is the scenario…

    I’m initially hiding an element(s) in css using **display: none**. I then use jQuery to make the element(s) visible by using **.show()**. By default the .show() method will make elements **display: block**. I need the elements to be **display: inline-block**. As a result I came up with the following methods to .show() inline-block elements. I prefer the first method, but I’m wondering if there’s best practice for doing this?

    **Method 1 (Preferred)**

    $.fn.showInBlock = function () {
    return this.css(‘display’, ‘inline-block’);
    };

    In action…

    $(‘#element’).showInBlock(0);

    **Method 2**

    var showInBlock = function (){
    $(this).css(‘display’, ‘inline-block’);
    };

    **Method 3**

    function showInBlock() {
    $(this).css(‘display’, ‘inline-block’);
    }

    Any suggestions are welcome…Thank You.

    # June 12, 2013 at 8:06 pm

    You could do something like this: http://codepen.io/ggilmore/pen/a51ff3b8bd05a974c8b834f63f90e346

    Utilizing `visibility: hidden;`. I prefer avoiding manipulating CSS directly from jQuery. Instead, I prefer toggling class names.

    # June 13, 2013 at 5:33 pm

    Cool… Thanks for the input!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".