Foro de elhacker.net

Hola buenas, estoy teniendo problemas con el estilo css para mostrar y ocultar input text cuando se checkea un checkbox.

Tengo cuatro <li>, el primero y tercero son los checkboxes y el segundo y cuarto los input text. Necesito que esten alineados horizontalmente, pero que no se mueva nada al aparecer los input text los checkboxes no deben moverse y los input aparezcan a la derecha.

<ul>
    <li style="margin-top: 9px;">
        <input type="checkbox" id="price1" value="">
        <label for="price1"><span></span>Se Vende</label>
    </li>
    <li class="price-1" style="display: none;">
        <input type="text" placeholder="Precio de Venta" name="price[sale]" /> <span class="unit unit-2">&euro;</span>
 
    </li>
    <li class="test">
        <input type="checkbox" id="price2" value="">
        <label for="price2"><span></span>Se Alquila</label>
    </li>
    <li class="price-2" style="display: none;">
        <input type="text" placeholder="Precio de Alquiler" name="price[rent]" /> <span class="unit unit-2">&euro;</span>
 
    </li>
</ul>

Alomejor tengo que cambiar la estructura o es simplemente arreglando el css.

Aquí un link a fiddle: http://jsfiddle.net/nazu61p7/

Gracias!

<div id='type'>
 
    <div class='item'>
        <input type='checkbox' id='price1' value=''>
        <label for='price1'>Se Vende</label>
        <div class='input hide'>
            <input type='text' placeholder='Precio de Venta' name='price["sale"]'>
            <span>&euro;</span>
        </div>
    </div>
 
    <div class='item'>
        <input type='checkbox' id='price2' value=''>
        <label for='price2'>Se alquila</label>
        <div class='input hide'>
            <input type='text' placeholder='Precio de Alquiler' name='price["rent"]'>
            <span>&euro;</span>
        </div>
    </div>
 
</div>

#type {
    max-width: 50%;
    border: 1px solid #eee;
}
 
    #type > .item {
        display: block;
        margin: 5px 0px;
        padding: 9px 0px;
    }
 
    #type > .item > .input { display: inline-block; }
    #type > .item > .hide { visibility: hidden; }
 
    #type > .item > .input > input[type='text'] {
        padding: 0.8em 1em;
        font-size: 0.85em;
        border: 1px solid #eee;
        color: #a3a3a3;
        background: white;
        outline: none;
        width: 50%;
        -webkit-appearance: none;
    }

$('#type :checkbox').change(function(){
    $(this).parent('.item').find('.input').toggleClass('hide', (!$(this).is(':checked')));
});

No te recomendaría usar listas para estas cosas y menos de la manera de la que lo estas haciendo. El código JS como ves se puede reducir muchísimo empleando toggleClass().

Demo
http://jsfiddle.net/drvy/md23r0jk/1/

PD: No uses estilos dentro del HTML, es feo y poco organizado.

Saludos

Gracias por la ayuda y los consejos. Tengo que seguir estudiando mucho.

Una duda más, si quiero que haya la misma separación entre el label del checkbox y el div input, ¿cual sería la mejor manera? float left y margin-right pero no queda bien, estoy buscando una mejor manera... Lo facil para mi seria darle a cada .input un margen-left pero para hacerlo como me has enseñado