Trouble switching, hide and show (jQuery)

Question

I searched everything for a script that would take care of the following issues:

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

• Close the div by clicking it.
• Close one div when you click on another.
• Close the div when the "More Information" button is clicked again.

I am wondering why the minus sign will not stay on when the div is active, and also how to restore the plus sign in all of the above scenarios.

Answer 1

Final Version: jsFiddle

I made the :active selector a subclass of .trigger , as @Christopher commented out and fixed the behavior of the .trigger X button to switch 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 active class }); 

Thus, it will remove the active class from the other X buttons and switch the current one on demand.

To close the fields when clicking .panel and .trigger , add this inside the 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'); }); 

Answer 2

Functionality :active is different from what you mean. To be able to switch the icon, first add a CSS rule like this instead of :active one:

 a.trigger.isshown{ background:#fff url(http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/24/Close-icon.png) 95% 65% no-repeat; } 

Now you can use .toggleClass('isshown'); , .removeClass('isshown'); and .addClass('isshown'); just like you toggle / hide / show div panels to change the icon.

Answer 3

http://jsfiddle.net/dwZnG/ Try this for size.

 a.trigger{ position: absolute; text-decoration: none; bottom:0; right: 0; font-size: 17px; letter-spacing:-1px; font-family: verdana, helvetica, arial, sans-serif; color:#333; padding: 20px 30px 10px 15px; font-weight: 600; background:#fff url(http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/24/Add-icon.png) 95% 65% no-repeat; display: block; } /* Change active to a class name*/ a.trigger.active { background:#fff url(http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/24/Close-icon.png) 95% 65% no-repeat; } 

Then your JS:

 $(document).ready(function() { $('.trigger').click(function(event) { event.preventDefault(); var me = $(this); var panel = me.next('.panel'); //If active is there, remove it if (me.hasClass("active")) { me.removeClass("active"); } //If it ain't...add it else { me.addClass("active"); } $('.panel').not(panel).hide(); panel.toggle("fast"); $(document).ready(function() { $('.panel').hover(function() { mouse_inside_div = true; }, function() { mouse_inside_div = false; }); $('body').mouseup(function() { if (!mouse_inside_div) $('.panel').hide(); }); }); }); });​ 

Basically what Abodi said. Once you do this, you can figure out the rest of the functionality.