Question

I’m still new at jQuery and struggling. Finally, I can get jQuery to toggle show/hide when the button is clicked. What I’m still struggling with now is how to get show/hide to match up with the state of the button on page load. The value is coming from the database using php. So I don’t know what it will be. I’d really appreciate some help!

Basically, if the button with id of ‘specify’ is checked, the text in the div shows; if the ‘open’ button is checked, the text is hidden. I set up the css so the specify class for the div makes it hidden. Should I have done that?

Here is the code:

HTML

<input type="radio" name="volneed" id="open" class="required" value="open to all"
 <? if($thisvolneed=='open'){echo 'checked="checked"';} ?> />
<label for="open"> Open to all </label>

<input type="radio" name="volneed" id="specify"  class="required" value="specify"
<? if($thisvolneed=='specify'){echo 'checked="checked"';} ?> /> 
<label for="specify"> Specify types of volunteers needed </label>

<div class="specify"><p>Some info...</p></div>

CSS:

.specify{display:none;}

jQuery:

$(document).ready(function() {          
    $("#specify").change(function(evt) {
    evt.preventDefault();
    $(".specify").show();
    });

    $("#open").change(function(evt) {
    evt.preventDefault();
    $(".specify").hide();
    });
});

Answer 1

I think creating a class to hide the <div> is a fairly standard way to approach the problem. Well done! Instead of using the show or hide function on the <div>, it is just as easy to use addClass or removeClass when using the CSS approach. Also, the initial state of the <div> can be shown by using PHP to apply the class if necessary on page load.

<div <? if($thisvolneed=='specify'){echo 'class="specify"';} ?>><p>Some info...</p></div>