Databases
StackOverflow2013
Postsdbo
POjQuery toggle open/close symbols
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery toggle open/close symbols
    text
    copied!<p>How can I get the open/close (i.e., up/down arrows) to work independently in the following code? Now, they operate in tandem which is misleading. When I 'open' Product A it should then display the up or close arrow which it does but so does Product B which hasn't been 'opened' yet.</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;style type="text/css"&gt; .productDetails { display: none; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;table border="1"&gt; &lt;tr&gt; &lt;td&gt;&lt;a href="#" class="expandProductDetails"&gt;Product A &lt;span&gt;&amp;darr;&lt;/span&gt;&lt;span style="display: none;"&gt;&amp;uarr;&lt;/span&gt;&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="productDetails"&gt; &lt;td&gt;&lt;strong&gt;Product Philosophy&lt;/strong&gt; Aliquam eu velit nibh. In eleifend convallis ante, sit amet semper arcu lobortis vitae.&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;a href="#" class="expandProductDetails"&gt;Product B &lt;span&gt;&amp;darr;&lt;/span&gt;&lt;span style="display: none;"&gt;&amp;uarr;&lt;/span&gt;&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="productDetails"&gt; &lt;td&gt;&lt;strong&gt;Product Philosophy&lt;/strong&gt; Nunc ac nisi vel leo iaculis feugiat. Quisque blandit tempor vestibulum.&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;script&gt; $('.expandProductDetails').click(function() { $(".expandProductDetails span").toggle(); $(this).closest("tr").next().slideToggle("slow"); }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Working (somewhat) example: <a href="http://jsfiddle.net/stulk/mqjuR/" rel="nofollow">http://jsfiddle.net/stulk/mqjuR/</a></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