Как переместить выбранную радиокнопку в левую сторону

Question

То, что я пытаюсь достичь, заключается в том, что когда кто-то нажимает на переключатель, кнопка перемещается влево, спрятав другой переключатель, тем самым создавая складной эффект.

Я пробовал это с помощью свойства css float: left и его перемещения, но может видеть только прямоугольник. Вот мой код

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; 
    } 

}); 

Вот код в codepen http://codepen.io/flyingboy007/pen/ojoVWe

Answer 1

Изменить селектор Div в вашем CSS для этого:

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

И изменить JavaScript для этого:

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

Вам нужно скрыть DIV Обертывания непроверенных элементов радио. Тогда вам не нужно беспокоиться о ярлыках, потому что они также находятся внутри родительского div.

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; 
    } 

}); 

Кроме того, если вы не хотите, чтобы выбранный DIV, чтобы заполнить весь элемент, то вам нужно установить определенные ширины на них.