dismiss divs and when all are dismissed the wrapper is auto dismiss

Question

<div class="wrapper">
  <div class="box1">
     <p>Content Here</p>
     <button type="button" class="close">Close Box1</button>
  </div>

  <div class="box2">
     <p>Content Here</p>
     <button type="button" class="close">Close Box2</button>
  </div>
  <div class="box3">

     <p>Content Here</p>
     <button type="button" class="close">Close Box3</button>
  </div>

</div>

http://jsfiddle.net/isherwood/KeChx

i tried using twitter bootstrap alert dismiss but it only close the 1st outer div tag, for example the close button is inside box1 and i want to close the outer div.wrapper.

what i'm after for is to be able to close/dismissed the box1,box2,box3 individually and once all of them are close/dismissed the div.wrapper will be automatically be dismissed too..

any ideas how can i get this?

i tried searching here but most that i found is a pop-up with a close function, which isn't what i need since these boxes doesn't need to pop-up..

Thanks in advance guys

Answer 1

You may be able to get data-dismiss working on a non-modal element, but it's just as easy to do your own jQuery function:

http://jsfiddle.net/isherwood/KeChx/6

$('.close').click(function () {
    $(this).parent('div').slideUp();
});

In this case there's no reason to dismiss the parent element once it's empty, but you certainly could like this:

$('.close').click(function () {
    $(this).parent('div').slideUp();

    if (! $('.wrapper > div') ) {
        $('.wrapper').hide();
    }
});

Here's an example of the above in action. I've set it to close the parent .wrapper if the child count gets below 2 for clarity.

http://jsfiddle.net/isherwood/KeChx/8

function closeEmptyWrapper() {
    var divCt = $('.wrapper').find('div').not(':hidden').size();

    if (divCt < 2) {
        $('.wrapper').fadeOut();
    }
}

$('.close').click(function () {
    $(this).parent('div').slideUp('', closeEmptyWrapper);
});