Как я могу скрыть div jquery, когда другие переключаются открыто

Question

Я создаю формат для публикации вещей в фид пользователя, и есть три варианта: текст, изображение и ссылка. У всех есть div, который использует jquery для всплытия. Я не могу понять, как скрыть другие div, когда один открыт, а другой щелкнут. Jsfiddle ясно показывает это.

Заранее благодарим за все, что вы могли бы порекомендовать.

http://jsfiddle.net/NFTFw/252/

$('input[name=text]').click(function() { 
    $('#textpost').slideToggle($(this).is(':checked')); 
    }); 
$('input[name=link]').click(function() { 
    $('#linkpost').slideToggle($(this).is(':checked')); 
    }); 
$('input[name=image]').click(function() { 
    $('#imagepost').slideToggle($(this).is(':checked')); 
    }); 

Answer 1

Добавление функциональности «радио» к флажкам и делает ее более динамичной, используя имя входа для выбора элемента для слайда.

$('input[type="checkbox"]').on('change', function() { 
    $('#' + this.name + 'post').slideToggle(this.checked) 
           .siblings('div') 
           .slideUp(); 
    $(this).siblings('input').prop('checked', false); 
}); 

FIDDLE

Answer 2

Использование кода вы можете написать функцию, которая обновляет все три дивы, чтобы отобразить правильный.

, например:

function toggle(idList) { 
    for(i=0;i<idList.length;i++){ 
    $(idList[i]).slideToggle($(this).is(':checked')); 
} 
} 

и

 var ids = [ 'name-link', 'name-image', 'name-text' ]; 
    $('input[name=text]').click(function() { 
toggle(ids); 
}); 
    $('input[name=link]').click(function() { 
toggle(ids); 
}); 
    $('input[name=image]').click(function() { 
    toggle(ids); 
}); 

Это будет работать, если у вас уже есть логика, чтобы сделать флажков себя как радио-кнопки.