The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

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…


    **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:

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

    # June 13, 2013 at 5:33 pm

    This reply has been reported for inappropriate content.

    Cool… Thanks for the input!

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed