Jquery display:none, display: inline-block

Question

I have to set an element from display: none to display: inline-block
when clicking on another element.

Jquery always detects it display: none

(function ($) {
    $(document).ready(function() {
        $("#click").click(function () {
            if($("#show").css('display','none')) {
                $('#show').css('display','inline-block');
            } else {
                $('#show').css('display','none');
            }
        });
    });
})(jQuery);

#show {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="click">
    Click
</div>
<div id="show">
    Text
</div>

Fiddle

VPK · Accepted Answer · 2014-10-21 12:59:01Z

4

The if statement is wrong,

if($("#show").css('display','none'))

You are assigning the css property to the show element in your if statement, use .is(':visible') instead.

if(!$("#show").is(':visible'))

edited Oct 21, 2014 at 12:59

answered Oct 21, 2014 at 12:51

VPK

3,0781 gold badge30 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cerbrus Over a year ago

This answer explains what's wrong instead of just giving the "fixed" code. +1

gr3g Over a year ago

Well I rather know what's wrong and what has to be replaced

BenM · Accepted Answer · 2014-10-21 12:51:31Z

1

Update your if() to use the is(':visible') function:

var displayType = ( ! $("#show").is(':visible') ) ? 'inline-block' 
                                                  : 'none';

$('#show').css('display', displayType);

jsFiddle Demo

answered Oct 21, 2014 at 12:51

BenM

53.3k26 gold badges116 silver badges172 bronze badges

4 Comments

mplungjan Over a year ago

Your fiddle is running onload - that can't be right

mplungjan Over a year ago

You have a fiddle set to run onload, that will wrap it in $(function() {} , then your code is wrapped in $(function($) {} and inside that you have $(document).ready...

BenM Over a year ago

@mplungjan I just updated the OP's Fiddle. Didn't change the options. Oh, and onload !== $(function() { }). That's a wrapper for DOMReady.

mplungjan Over a year ago

Still a waste of event handlers

Johnny5 · Accepted Answer · 2014-10-21 12:57:31Z

Like many jQuery functions, css has two different behavior, based on the parameters you pass.

If you pass just the first parameter (the css property), it returns the value of the css property.

If you pass the css property and the value, it set the value and returns the actual jQuery object.

Try this:

(function ($) {
    $(document).ready(function() {
    $("#click").click(function () {
        //Get the div in jquery object.
        var div = $("#show");
        //Determine the actual value of the display.
        var display = div.css('display');

        //Determine the desired value.
        if (display == 'none')
            display = 'inline-block';
        else
            display = 'none';

        //Change the value
        div.css('display', display);

        });
    });
})(jQuery);

Collectives™ on Stack Overflow

Jquery display:none, display: inline-block

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related