0
<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

isherwood
  • 58,414
  • 16
  • 114
  • 157
Ron Jb
  • 77
  • 1
  • 8

1 Answers1

0

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);
});
isherwood
  • 58,414
  • 16
  • 114
  • 157
  • Thanks isherwood! exactly what i needed! one question, i tried this on my local-drive with bootstrap.min.js v3.1.1 and i move the .close button 2 div deeper inside the div.box.. due to content layouting purpose.. would it cause the function not to work? i tried it and its not working... and the div.box is also 2 div tags deep inside the div.wrapper its now div.wrapper -> div.content -> div.col10 -> div.box -> div.row -> div.col8 -> button.close – Ron Jb Mar 03 '14 at 20:04
  • You'd have to change the selectors to match your HTML. – isherwood Mar 03 '14 at 20:08
  • can you help me out with this - > http://jsfiddle.net/KeChx/9/ its the actual codes that i have.. i already matched the selectors to my HTML but still can't get things to work.. Thanks in advance Isherwood – Ron Jb Mar 03 '14 at 20:48
  • Here's a cleaner fiddle. Notice that Bootstrap JS and CSS are loaded in the External Resources sidebar section. http://jsfiddle.net/isherwood/nH6z9 Please indicate which element you want to click, and which you want to close onclick. – isherwood Mar 03 '14 at 21:30
  • http://jsfiddle.net/nH6z9/2/ Awesome! but is it possible to have the wrapper to remain if there is still another box that is inside the Show link, its a collapse.. the box under the collapse needs to be close too before the whole div.bid-option disappears. – Ron Jb Mar 03 '14 at 21:48
  • Note that I've added an ID called `box_wrapper` to enable easier selection. http://jsfiddle.net/isherwood/nH6z9/4 – isherwood Mar 03 '14 at 22:08
  • thanks Isher, your really a life saver!!! btw i have a client in USA who's looking for a php developer paid video streaming site, i'm wondering if you are interested? its quiet hard to find a good programmer that can be trusted with long project.. anyway i really really appreciate all your patience and help here.. you have a awesome day Isher, god bless you :) – Ron Jb Mar 03 '14 at 22:24
  • Thank you for the offer, but I'm employed full time and also do more side work than I probably should. I appreciate the thought, though. May Poseidon's blessings be upon you. – isherwood Mar 03 '14 at 22:26