Automatically collapsing a Collapsible Block

Question

I checked around the site a bit and didn't find a complete answer to this but how do I collapse a collapsible block automatically though an if statement. This is part of the if statement I have at the moment.

$(document).ready(function() {

    $("#testRun").click(function(){

    alert("start");
    var output = "";

    var num1 = "";
    var num2 = "";
    var num3 = "";
    var num4 = "";
    var num5 = "";
    var countnum4 = 0;
    var countnum5 = 0;

    if($('#radio1').is(':checked'))
    {
        num1 = "First Number ";
        $('#blockId').trigger('collapse');
    }
    else if($('#radio2').is(':checked'))
    {
        num1 = "Second Number";
    }
    else if($('#radio3').is(':checked'))
    {
        num1 = "Third";
    }
    else if($('#radio4').is(':checked'))
    {
        num1 = "Fourth";
    }
    else if($('#radio5').is(':checked'))
    {
        num1 = "Fifth";
    }
    else if($('#radio6').is(':checked'))
    {
        num1 = "Sixth";
    }
    else
        num1 = "No numbers selected"//If else for num1 selection


    output = "Your order has been sent. Here are the details of what you ordered"
            + "<br />Number 1: " + num1
            + "<br />Number 2: " + num2
            + "<br />Number 3: " + num3
            + "<br />Number 4: " + num4
            + "<br />Number 5: " + num5;

    $('#show').html(output);

});
});

I need this to work so once the person taps the radio button they want the block collapses and a new one opens up. I know it would probably have something to do with an Event Listener but I just don't know how to implement it. Edit: I have added in most of the code I am using at the moment to make it easier to understand what I am trying to do. Below is the corresponding collapsible block

<div data-role="collapsible-set" id="blockId">
        <div data-role="collapsible" data-collapsed="false" >
          <h3>Numbers</h3>
          <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
              <legend>Option</legend>
              <input type="radio" name="radio" id="radio1" value="" />
              <label for="radio1">First Number</label>
              <input type="radio" name="radio" id="radio2" value="" />
              <label for="radio2">Second Number</label>
              <input type="radio" name="radio" id="radio3" value="" />
              <label for="radio3">Third Number</label>
              <input type="radio" name="radio" id="radio4" value="" />
              <label for="radio4">Fourth Number</label>
              <input type="radio" name="radio" id="radio5" value="" />
              <label for="radio5">Fifth Number</label>
              <input type="radio" name="radio" id="radio6" value="" />
              <label for="radio6">Sixth Number</label>
            </fieldset>
          </div>
        </div>
      </div> 

Any help would be appreciated.

Answer 1

This is a handler for the load event. Inside we define a change handler for #radio. Inside it I have used the code you have shared with us. Note, that $(this) is the radio element, as it is used inside the radio element's change handler. Also note that num1 needs to exist at this point.

$(function() {
    $('#radio1').change(function() {
        if($(this).is(':checked')) {
            num1 = "First Number";
            $('#blockID').trigger('collapse');
        }
    });
});