Question

I want write jquery code that will show form inputs after a checkbox is checked. This is how I have formated the form inputs. What is the best way of doing this?

    echo '<li class="checkbox_item">'. form_label('Number of bedrooms','bedrooms'). form_checkbox('bedrooms','yes'). form_error('bedrooms').'</li>';
    echo '<li class="input_item" id=no_rooms>'. form_label('Number of bedrooms','bedrooms'). form_input('bedrooms'). form_error('bedrooms').'</li>';

    echo '<li class="checkbox_item">'. form_label('Number of bathfooms','bathrooms'). form_checkbox('bathrooms'). form_error('bathrooms').'</li>';
    echo '<li class="input_item">'. form_label('Number of bathfooms','bathrooms'). form_input('bathrooms'). form_error('bathrooms').'</li>';

Answer 1

You could do:

//hide all inputs
$('.input_item').hide()

//when a checkbox is ticked, hide/unihde next li 
$('.checkbox_item input').click(function(){
    $(this).closest('li').next('.input_item').toggle($(this).is(':checked'));
});

working fiddle http://jsfiddle.net/ttyx8/1/

EDIT (i added a selector to next so that the code is better)