如果复选框是复选框，则显示div但隐藏先前打开的div

Question

<input type="checkbox" data-related-item="title1">
<span class="caption">Title</span>
<div class="hidden">
<h2>Title</h2>
<input type="text" id="title1">
<span class="caption">Lorem</span>
</div>
<hr>
<input type="checkbox" data-related-item="title2" checked>
<span class="caption">Title</span>
<div class="hidden">
<h2>Title</h2>
<input type="text" id="title2">
<span class="caption">Lorem</span>
</div>

Javascript

function evaluate(){
var item = $(this);
var relatedItem = $("#" + item.attr("data-related-item")).parent();

if(item.is(":checked")){
    relatedItem.fadeIn();
}else{
    relatedItem.fadeOut();   
}
}
$('input[type="checkbox"]').click(evaluate).each(evaluate);

This was about this post: if check box is checked display div

I would like to ask how do I use this code but every time you click another checkbox it hides the previous div and opens a new one. Just showing one div/content at a time instead of showing both open. Thanks.

DEMO: http://jsfiddle.net/zgrRd/5/

Answer 1

You must use change instead of click function and inside evaluate function, add the following line at the start

$('input[type="checkbox"]').not($(this)).prop('checked',false).trigger('change');

Watch here fiddle

Answer 2

If I understand you correctly, you want only one <div> open at a time, which should correlate to a checkbox. I interpret this, that you also only checkbox checked at a time, so all other checkboxes wold need to be unchecked.

Solution 1: Use radio buttons

Solution 2: Uncheck all checkboxes and re-check the current one.

The solution for showing the <div> s is based on solution 2. Just hide all <div> s first and then show your related <div> . Give all your <div> sa certain class (eg class="toggling" ) or name to be used as a selector for closing all.

$('input[type="checkbox"]').on("click", function() {
    var item = $(this);
    var relatedItem = $("#" + item.attr("data-related-item")).parent();
    $('.toggling').fadeOut(); //hide all
    relatedItem.FadeIn(); //show the current one
});