jQuery: changing div css from display:none to display:block not working

Question

I am changing the content of a div based on the checkbox value. the value of the div is simple text for all but one checkbox option. In the exception case, the value of div is another div (lets say childDiv).

So I am changing the the visibility of the childDiv (display: none through jQuery.css()) when the other two options are clicked, and changing it to display: block when the exception option is clicked.

The childDiv becomes hidden when I change checkbox option. However it does not display back again when I want it to be visible.

The fiddle is here: http://jsfiddle.net/sandeepy02/jLgyp/

The code is

            <div class="switch switch-three candy blue" id="reachout">
                <input name="reachout" type="radio" id="tab-41" value="1" checked="checked"/>
                    <label for="tab-41">Experience</label>
                <input name="reachout" type="radio" id="tab-42" value="2"/>
                    <label for="tab-42">Contact Us</label>
                <input name="reachout" type="radio" id="tab-43" value="3"/>
                    <label for="tab-43">Why?</label>
                <div id="test1234">
                    <div id="test12345">
                        Option Start
                    </div>
                </div>
                <span class="slide-button"></span>
            </div>

and

     jQuery("input[name='reachout']",jQuery('#reachout')).change(
        function(e)
        {                   
            if(jQuery(this).val()=="1") 
            {
                jQuery("#test1234").html("");
                jQuery("#test12345").css("display","block");
            }
            if(jQuery(this).val()=="2") 
            {
                jQuery("#test1234").html("Option 2");
                jQuery("#test12345").css("display","none");
            }
            if(jQuery(this).val()=="3") 
            {
                jQuery("#test1234").html("Option 3");
                jQuery("#test12345").css("display","none");
            }
        });

I even tried

            jQuery("#test12345").css('position', 'absolute');
            jQuery("#test12345").css('z-index', 3000);

after display: block but that didnt work.

Thanks

can you try to show() also the div? Perhaps this will work, since original div is hidden with display:no. Something like: jQuery("#test12345").css("display","block").show(); — andrew
– andrew, Commented Apr 3, 2013 at 5:53
On a side note, to make your code more concise, you can try using case/switch instead of multiple if statements ;) — Terry
– Terry, Commented Apr 3, 2013 at 5:59

Musa · Accepted Answer · 2013-04-03 05:55:49Z

5

You are overwriting the div when you set is parent 's html, so you're trying to show a div thats not there.

answered Apr 3, 2013 at 5:55

Musa

97.9k17 gold badges123 silver badges144 bronze badges

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

Comments

Jai · Accepted Answer · 2013-04-03 06:05:58Z

See what is your problem:

This jQuery("#test1234") is the parent of jQuery("#test12345") and what you are doing is overwritten the html of it with these lines of code:

jQuery("#test1234").html("");
jQuery("#test1234").html("Option 2");
jQuery("#test1234").html("Option 3");

See before this script's execution the HTML was like this:

           <div id="test1234">
                <div id="test12345">
                    Option Start
                </div>
            </div>

Now when your scripts gets executed then it looks like this:

by this jQuery("#test1234").html(""); output is like:

           <div id="test1234">

            </div>

by this jQuery("#test1234").html("Option 2"); output is like:

           <div id="test1234">
                Option 2
            </div>

and by this jQuery("#test1234").html("Option 2"); output is like:

           <div id="test1234">
                Option 3
            </div>

So you are doing display : block an element which is not present in the dom after script execution.

William Buttlicker · Accepted Answer · 2013-04-03 05:57:50Z

Just one change in jquery!!

jQuery("input[name='reachout']",jQuery('#reachout')).change(
                function(e)
                {                   
                    if(jQuery(this).val()=="1") 
                    {
            --> change in this line         jQuery("#test1234").html("Option Start");
                        jQuery("#test12345").css('position', 'absolute');
                        jQuery("#test12345").css("display","block");
                        jQuery("#test12345").css('z-index', 3000);
                    }
                    if(jQuery(this).val()=="2") 
                    {
                        jQuery("#test1234").html("Option 2");
                        jQuery("#test12345").hide();
                    }
                    if(jQuery(this).val()=="3") 
                    {
                        jQuery("#test1234").html("Option 3");
                        jQuery("#test12345").hide();
                    }
                });

user1517108 · Accepted Answer · 2013-04-03 05:58:53Z

Based on Andrew's comment, I decided to put the divs seperate instead of parent-child.

Thereafter it works fine as I desire.

The change in code is:

<div class="switch switch-three candy blue" id="reachout">
                        <input name="reachout" type="radio" id="tab-41" value="1" checked="checked"/>
                            <label for="tab-41">Experience</label>
                        <input name="reachout" type="radio" id="tab-42" value="2"/>
                            <label for="tab-42">Contact Us</label>
                        <input name="reachout" type="radio" id="tab-43" value="3"/>
                            <label for="tab-43">Why?</label>
                        <div id="test1234">
                        </div>
                            <div id="test12345">
                                Option Start
                            </div>
                        <span class="slide-button"></span>
                    </div>

and

         jQuery("input[name='reachout']",jQuery('#reachout')).change(
            function(e)
            {                   
                if(jQuery(this).val()=="1") 
                {
                    jQuery("#test1234").hide();
                    jQuery("#test12345").show();
                }
                if(jQuery(this).val()=="2") 
                {
                    jQuery("#test1234").html("Option 2");
                    jQuery("#test1234").show();
                    jQuery("#test12345").hide();
                }
                if(jQuery(this).val()=="3") 
                {
                    jQuery("#test1234").html("Option 3");
                    jQuery("#test1234").show();
                    jQuery("#test12345").hide();
                }
            });

John · Accepted Answer · 2013-04-03 06:01:43Z

0

Is your Id correct ?

jQuery("#test1234").html("");
jQuery("#test12345").css("display","block")

answered Apr 3, 2013 at 6:01

John

5391 gold badge4 silver badges15 bronze badges

1 Comment

user1517108 Over a year ago

yup ...I have pasted html too

Hunter Zhao · Accepted Answer · 2013-04-03 06:10:08Z

0

Just use like below

// xxx is your div id
$('#xxx').hide();
$('#xxx').show();

It'll work fine.

answered Apr 3, 2013 at 6:10

Hunter Zhao

4,6692 gold badges29 silver badges39 bronze badges

Comments

Sam Deering · Accepted Answer · 2013-04-03 06:15:08Z

I have reconfigured your code with some suggestions it should work now.

http://jsfiddle.net/jquery4u/nPMvV/

(function ($) {

    $("input[name='reachout']").on('change', function (e) {
        var checkVal = $(this).val();
        console.log(checkVal);

        //cache elements which are used often
        var $test1234 = $("#test1234"),
            $test12345 = $("#test12345");

        //use a switch statement instead of long winded if else
        switch (checkVal) {
            case "1":
                $test1234.html("Option 1");
                $test12345.show();
                break;
            case "2":
                $test1234.html("Option 2");
                $test12345.hide();
                break;
            case "3":
                $test1234.html("Option 2");
                $test12345.hide();
                break;

        }
    });
})(jQuery);

Collectives™ on Stack Overflow

jQuery: changing div css from display:none to display:block not working

7 Answers 7

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related