修改脚本以关闭Div

Question

I've got a nice little show only one div at a time script working that I found at: Random Snippets (second demo down) that looks like this:

function showonlyone(thechosenone) {
     $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(200);
          }
          else {
               $(this).hide(600);
          }
     });
}

The only thing it doesn't do is close the div after you open it. Currently I have both divs set to display: none and would like to give the user the option to close them both when they are done looking.

Any idea's how to modify this?

Answer 1

You can have a click event that closes them when clicked:

$('.newboxes').click( function() {
    $(this).hide(600);
});

Answer 2

You have to provide a button or something to the user to close the divs. Let's assume there is a button like this inside each div:

HTML

<div class="div-class">
    <p>Box content</p>
    <button class="close">Close</button>
</div>

jQuery

$('.close').on('click', function() {
   $(this).closest('.div-class').hide();
});

Answer 3

add a condition about the visibility of the current item in the if statement:

function showonlyone(thechosenone) {
     $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone && $(this).css("display") == "none") {
               $(this).show(200);
          }
          else {
               $(this).hide(600);
          }
     });
}