Question

I’ve been looking all over for a script that will take care of the following issues:

http://jsfiddle.net/k7E9V/3/

1. Close the div when clicking outside of it.
2. Close one div when the other one is clicked.
3. Close the div when “More info” is clicked again.

I’m wondering why the minus icon won’t stay put when the div is active and also how to restore the plus icon in all the above scenarios.

Answer 1

Final version: jsFiddle

I made the :active selector a subclass of .trigger as @Christopher commented and fixed the behavior of the .trigger X button to toggle the class accordingly:

$('.trigger').click(function(event) {
    event.preventDefault();
    var panel = $(this).next('.panel');
    $('.panel').not(panel).hide();
    panel.toggle("fast");
    $('.trigger').not(this).removeClass('active'); //remove active class from other X buttons
    $(this).toggleClass('active'); //toggle the clicked button's active class
});

This way it will remove the active class from the other X buttons, and toggle the current one as requested.

To close the boxes when you click outside the .panel and .trigger, add this inside of your DOM Ready handler:

$(document).click('click', function(e) {
    if (!$('.panel').is(':visible')) return;
    var targ = $(e.target);
    //doesn't close the boxes if target is .panel/.trigger or their descendant
    if (targ.closest('.panel').length || targ.is('.panel')
       || targ.closest('.trigger').length || targ.is('.trigger')) return;
    $('.panel').hide('fast');
    $('.trigger').removeClass('active');
});