twitter bootstrap collpage with data-toggle issue

Question

I've a field which when checked toggle a text field. See demo here.

When user selects Yes, a text field is shown. When user selects No text field hides. This is fine.

Problem is, click on Yes, text field shows up now if again clicked on Yes text field hides. It should be visible until user selects No only.

How can I do that ? I can easily do this with jQuery, no issues. But since bootstrap gives ability to do this with markup only I want to go for that.

Here's markup -

<div class="control-group">
        <label class="control-label" for="inputPreviousSurname">Previous Surname</label>
        <div class="controls">
            <label class="checkbox inline">
                <input type="radio" name="previousSurname" data-toggle="collapse" data-target="#demo"> Yes
            </label>
            <label class="checkbox inline">
                <input type="radio" name="previousSurname" checked data-toggle="collapse" data-target="#demo"> No
            </label>
        </div>
        <div class="controls">
            <div id="demo" class="collapse in">  <input   type="text" /></div>
        </div>
    </div>

Answer 1

The only way I know of to do this is through jQuery (but using the bootstrap collapse function)

Otherwise bootstrap will just treat it as a toggle.

HTML

 <div class="control-group">
    <label class="control-label" for="inputPreviousSurname">Previous Surname</label>
    <div class="controls">
        <label class="checkbox inline">
            <input id="show" type="radio" name="previousSurname"> Yes
        </label>
        <label class="checkbox inline">
            <input id="hide" type="radio" name="previousSurname" checked="" > No
        </label>
    </div>
    <div class="controls">
        <div id="demo" class="collapse">  <input   type="text" /></div>
    </div>
</div>

jQuery

$(document).ready(function(){
  $('#show').click(function(){
      $('#demo').collapse('show');
  });
  $('#hide').click(function(){
      $('#demo').collapse('hide');
  });
});

http://jsfiddle.net/2E2En/3/