CODEWITHSUNDEEP
htmljquery-mobile
evenodd
evenodd

Reputation: 2126

Collapsible content using radio button?

I am trying to show and hide a text field based on whether or not the user clicks a radio button. Is this possible? According to the docs, collapsible content needs a header.

Here is my code with no collapsible content:

    <fieldset data-role="controlgroup" data-mini="true">
           <input type="radio" name="radio-mini" id="radio-mini-1" value="choice-1" />
            <label for="radio-mini-1">No</label>

            <input type="radio" name="radio-mini" id="radio-mini-2" value="choice-2"  />
            <label for="radio-mini-2">Yes</label>
    </fieldset>
    <label for="textarea-a">Textarea:</label>
    <textarea name="textarea" id="textarea-a">
    </textarea>

I would like the textarea to be shown if the radio button labeled "Yes" is clicked. Any ideas?

Upvotes: 0

Views: 1417

Answers (1)

David Thomas
David Thomas

Reputation: 253416

Well, if the radio and the textarea are siblings (and you're using, and happy to be compatible with up-to-date browsers) you could use CSS:

label[for=textarea-a],
#textarea-a {
    display: none;
}

#radio-mini-2:checked ~ label[for=textarea-a],
#radio-mini-2:checked ~ #textarea-a {
    display: block;
}​

JS Fiddle demo.

In the above I removed your radio elements from the fieldset (as the textarea, and its label have to be siblings for this approach to work).

Upvotes: 2

Related Questions