How can I show or hide div with radio button and jQuery, and process on page load?

I am using the below code to show or hide a div with jQuery. It works fine on the first visit, but if a person hits the back button and visits the page while the "ShowIt" radio button is selected, it will be hidden, because it's hidden by default. How can i make it show if the ShowIt radio is selected when the page loads? Thank you!

	$(document).ready(function(){
		$('#myDiv').hide();
	    $('input[type="radio"]').click(function(){
	        if($(this).attr("value")=="HideIt"){
	            $('#myDiv').hide('fast');
	        }
	        if($(this).attr("value")=="ShowIt"){
	            $('#myDiv').show('fast');
	        }	
	    });
	});

Open in new window

earwig75Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Julian HansenConnect With a Mentor Commented:
Another option
if ($('input:checked').val() == 'ShowIt') {
  $('#myDiv').show('fast');
}

Open in new window

Here is the complete code - I am assuming you have given your radio's a name attribute to group them - I have used that in the code to target the click as well
<script>
$(function() {
  if ($('input:checked').val() == 'ShowIt') {
    $('#myDiv').show('fast');
  }
  
  $('input[name="toggle"]').click(function() {
  if ($(this).val() == 'ShowIt') {
    $('#myDiv').show();
  }
  else {
    $('#myDiv').hide();
  }
  });
});
</script>

Open in new window

Working sample here

EDIT:
HTML used for above sample
    <input type="radio" name="toggle" value="ShowIt" /> Show <input type="radio" name="toggle" value="HideIt" /> Hide <br/>
    <div id="myDiv" style="display: none" >This is my div</div>

Open in new window

0
 
zephyr_hex (Megan)DeveloperCommented:
You can look for the checked status of the radio and show the div if it's checked:

if ($('#ShowIt').is(':checked')) {
  $('#myDiv').show();
}

Open in new window


Here is a Fiddle Demo.
0
 
earwig75Author Commented:
Ignore my last comment, this works perfectly, thank you.
0
 
Julian HansenCommented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.