Databases
StackOverflow2013
Postsdbo
POToggle between two classes in jQuery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POToggle between two classes in jQuery
    text
    copied!<p>I'm trying to modify the icons for the <a href="http://jqueryui.com/demos/sortable/#portlets" rel="noreferrer">jQuery UI portlets</a>. Rather than have a plus to minimize and a minus to expand, I wanted to switch them. </p> <p>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.</p> <p>Here's a sample HTML:</p> <pre><code>&lt;script src="scripts/jquery-1.3.2.js" type="text/javascript" &gt;&lt;/script&gt; &lt;script src="scripts/ui/ui.core.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="scripts/ui/ui.sortable.js" type="text/javascript"&gt;&lt;/script&gt; &lt;div class="column"&gt; &lt;div class="portlet"&gt; &lt;div class="portlet-header"&gt;Links&lt;/div&gt; &lt;div class="portlet-content"&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Here's what I came up with for the jQuery:</p> <pre><code>&lt;script type="text/javascript"&gt; $(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('&lt;span class="ui-icon ui-icon-minusthick"&gt;&lt;/span&gt;') .prepend('&lt;span class="ui-icon ui-icon-closethick"&gt;&lt;/span&gt;') .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(); }); &lt;/script&gt; </code></pre> <p><hr /> <strong>EDIT</strong>: Here's the original javascript from the jQuery UI demo site:</p> <pre><code>&lt;script type="text/javascript"&gt; $(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('&lt;span class="ui-icon ui-icon-plusthick"&gt;&lt;/span&gt;') .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(); }); &lt;/script&gt; </code></pre> <p>I'm not exactly sure how they were able to get the plus and minus to toggle correctly.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload