jQuery Forum

I have a set of radio buttons in a collapsible panel as shown below. I want to have the panel collapse when the user clicks one of the radio buttons.

Here is the code I used. Seems like it doesnt work:


<script type="text/javascript">
var buttons = document.getElementById("radio-choice-2");
for (var i = 0; i < buttons.length; i++) {
    if (buttons[i].checked) {
    $(".selector" ).trigger( "collapse" );
   
     }
}
</script>



<div data-role="collapsible"  data-content-theme="c">
   <h3>Filter</h3>
  
  
  
  
   <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <legend>Choose a pet:</legend>
             <input type="radio" name="radio-choice-2" id="radio-choice-21" value="choice-1" checked="unchecked" />
             <label for="radio-choice-21">None</label>

             <input type="radio" name="radio-choice-2" id="radio-choice-22" value="choice-2"  />
             <label for="radio-choice-22">Dog</label>

             <input type="radio" name="radio-choice-2" id="radio-choice-23" value="choice-3"  />
             <label for="radio-choice-23">Hamster</label>

             <input type="radio" name="radio-choice-2" id="radio-choice-24" value="choice-4"  />
             <label for="radio-choice-24">Lizard</label>
    </fieldset>
</div>

I am trying to create a tabbed structure and understand you can use a navbar:

http://jquerymobile.com/demos/1.2.0/docs/toolbars/docs-navbar.html

Here is my question. Let's assume the navbar consists of 3 items. When the page loads the System will load the content for the default tab item. But is there a way that after the default tab loads, the system can load the other 2 tabs? I was thinking that this would help the user experience since the content will be loaded behind the scenes. Should the user click item 2 for example, the content will already have been loaded, thus rendering the page faster.

Thoughts?

Joe V

Have a question on the slidefade transition.