如何将选定的单选按钮移到左侧

Question

What i am trying to achieve is that when someone clicks a radio button the button moves to the left by hiding other radio button thereby creating a foldable like effect.

I tried this with css float:left property and its moving but can see a rectangle only. Here is my code

Html

<form>
  <group class="inline-radio">
    <div>
      <input id="opt1" type="radio" name="title">
      <label>opt1</label>
    </div>
    <div>
      <input id="opt2" type="radio" name="title">
      <label>opt2</label>
    </div>
    <div>
      <input id="opt3" type="radio" name="title">
      <label>opt3</label>
    </div>
    <div>
      <input id="opt4" type="radio" name="title">
      <label>opt4</label>
    </div>
    <div>
      <input id="opt5" type="radio" name="title">
      <label>others</label>
    </div>
  </group>

</form>

javascript

//for toggling  
var hid = false;

$("group.inline-radio").click(function() {
  if (hid == false) {

    $('group.inline-radio').find('input[type="radio"]').not(':checked').hide().siblings('label').hide();

    hid = true;
    return;
  } else {
    $('group.inline-radio').find('input[type="radio"]').not(':checked').show().siblings('label').show();

    hid = false;
  }

});

Here is the code in codepen http://codepen.io/flyingboy007/pen/ojoVWe

Answer 1

Change the div selector in your css to this:

div {
position: relative;
width: 20%;
float:left;
}

And change your javascript to this:

var hid = false;

$("group.inline-radio").click(function() {
  if (hid == false) {

    $('group.inline-radio').find('input[type="radio"]').not(':checked').parent().hide();

    hid = true;
    return;
  } else {
     $('group.inline-radio').find('input[type="radio"]').not(':checked').parent().show();

     hid = false;
   }

});

Codepen: http://codepen.io/anon/pen/ojpNVq

Answer 2

You need to hide the div wrapping the unchecked radio elements. Then you don't have to worry about the labels because they are inside the parent div as well.

http://codepen.io/anon/pen/LpeYod

var hid = false;

$("group.inline-radio").click(function() {
  if (hid == false) {

    $('group.inline-radio').find('input[type="radio"]').not(':checked').parent().hide();

    hid = true;
    return;
  } else {
    $('group.inline-radio').find('input[type="radio"]').not(':checked').parent().show();

    hid = false;
  }

});

Also, unless you want the selected div to fill the entire element then you need set specific widths on them.