Menu
I'm trying to modify the icons for the jQuery UI portlets. Rather than have a plus to minimize and a minus to expand, I wanted to switch them.
I've only had limited success with it where the first time to click the minus it flips to a plus, but the plus never flips to a minus. Any help on this would be much appreciated.
Here's a sample HTML:
<script src="scripts/jquery-1.3.2.js" type="text/javascript" ></script> <script src="scripts/ui/ui.core.js" type="text/javascript"></script> <script src="scripts/ui/ui.sortable.js" type="text/javascript"></script> <div class="column"> <div class="portlet"> <div class="portlet-header">Links</div> <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div> </div> </div> Here's what I came up with for the jQuery:
<script type="text/javascript"> $(function() { $(".column").sortable({ connectWith: '.column' }); $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all") .find(".portlet-header") .addClass("ui-widget-header ui-corner-all") .prepend('<span class="ui-icon ui-icon-minusthick"></span>') .prepend('<span class="ui-icon ui-icon-closethick"></span>') .end() .find(".portlet-content"); $(".portlet-header .ui-icon-minusthick").click(function() { $(this).removeClass("ui-icon-minusthick"); $(this).addClass("ui-icon-plusthick"); $(this).parents(".portlet:first").find(".portlet-content").toggle(); }); $(".portlet-header .ui-icon-plusthick").click(function() { $(this).removeClass("ui-icon-plusthick"); $(this).addClass("ui-icon-minusthick"); $(this).parents(".portlet:first").find(".portlet-content").toggle(); }); $(".portlet-header .ui-icon-closethick").click(function() { $(this).parents(".portlet:first").toggle(); }); $(".column").disableSelection(); }); </script> <script type="text/javascript"> $(function() { $(".column").sortable({ connectWith: '.column' }); $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all") .find(".portlet-header") .addClass("ui-widget-header ui-corner-all") .prepend('<span class="ui-icon ui-icon-plusthick"></span>') .end() .find(".portlet-content"); $(".portlet-header .ui-icon").click(function() { $(this).toggleClass("ui-icon-minusthick"); $(this).parents(".portlet:first").find(".portlet-content").toggle(); }); $(".column").disableSelection(); }); </script> I'm not exactly sure how they were able to get the plus and minus to toggle correctly.
683
JavaScript Toggle Class Multiple Elements You can also toggle class on multiple element at once. For this target multiple elements and use the toggle() method. To toggle a class on multiple elements select those elements and apply the toggle method on each element to handle their corresponding class.
The toggleClass() method toggles between adding and removing one or more class names from the selected elements. This method checks each element for the specified class names. The class names are added if missing, and removed if already set - This creates a toggle effect.
Answer. Yes, you can toggle multiple classes using a single . toggleClass() call. To do so, you can separate the class names with spaces.
To replace a class with another class, you can remove the old class using jQuery's . removeClass() method and then add the new class using jQuery's . addClass() method.
How about
$(YOUR_ELEMENT).live("EVENT_NAME", function() { $(".portlet-header").toggleClass("ui-icon-plus").toggleClass("ui-icon-minus"); }); Even more shorter
$(YOUR_ELEMENT).live("EVENT_NAME", function() { $(".portlet-header").toggleClass("ui-icon-plus ui-icon-minus"); }); EDIT
As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().
jQuery API reference
145
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
