title: jQuery: changing div css from display:none to display:block not working
body: <p>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).</p>
  
  <p>So I am changing the the visibility of the childDiv (<code>display: none</code> through <code>jQuery.css()</code>) when the other two options are clicked, and changing it to <code>display: block</code> when the exception option is clicked.</p>
  
  <p>The childDiv becomes hidden when I change checkbox option. However it does not display back again when I want it to be visible.</p>
  
  <p>The fiddle is here: <a href="http://jsfiddle.net/sandeepy02/jLgyp/" rel="nofollow">http://jsfiddle.net/sandeepy02/jLgyp/</a></p>
  
  <p>The code is</p>
  
  <pre><code>            &lt;div class="switch switch-three candy blue" id="reachout"&gt;
                  &lt;input name="reachout" type="radio" id="tab-41" value="1" checked="checked"/&gt;
                      &lt;label for="tab-41"&gt;Experience&lt;/label&gt;
                  &lt;input name="reachout" type="radio" id="tab-42" value="2"/&gt;
                      &lt;label for="tab-42"&gt;Contact Us&lt;/label&gt;
                  &lt;input name="reachout" type="radio" id="tab-43" value="3"/&gt;
                      &lt;label for="tab-43"&gt;Why?&lt;/label&gt;
                  &lt;div id="test1234"&gt;
                      &lt;div id="test12345"&gt;
                          Option Start
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;span class="slide-button"&gt;&lt;/span&gt;
              &lt;/div&gt;  
  </code></pre>
  
  <p>and</p>
  
  <pre><code>     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");
              }
          });
  </code></pre>
  
  <p>I even tried</p>
  
  <pre><code>            jQuery("#test12345").css('position', 'absolute');
              jQuery("#test12345").css('z-index', 3000);
  </code></pre>
  
  <p>after <code>display: block</code> but that didnt work.</p>
  
  <p>Thanks</p>