Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery How to use .not with this
    primarykey
    data
    text
    <p>I have a ticket system. Messages are placed in a div and that div has hidden sub messages (the replies of that ticket)</p> <p><a href="http://www.gc-cdn.com/snippets/java.php" rel="nofollow">Demo</a></p> <p><a href="http://jsfiddle.net/cs87W/" rel="nofollow">jsFiddle Hosted Demo</a></p> <p>Click an Arrow - shows the thread child. Click it again it hides the thread child and the arrow goes up and down.</p> <p>I want it so that if the current thread is open, the user clicks the other arrow, the open arrow should restore back and vice versa.</p> <p><strong>jQuery</strong></p> <pre><code> $(document).ready(function(){ $('h1').click(function(){ if ($(this).next('.parent').hasClass('showMe')){ $('.parent').removeClass('showMe').hide(); $(this).find("#ticket_arrow").removeClass('up'); $(this).find("#ticket_arrow").addClass('down'); } else { $('.parent').removeClass('showMe').hide(); $(this).find("#ticket_arrow").removeClass('down'); $(this).find("#ticket_arrow").addClass('up'); $(this).next('.parent').addClass('showMe').show(); } }); }); /** Hides all sub threads on Load **/ $('.parent').hide(); </code></pre> <p><strong>HTML</strong></p> <pre><code>&lt;style type="text/css"&gt; .ticket_thread_h1 span{cursor:pointer} .down{background:url(http://www.gc-cdn.com/personalstylist/down.png) no-repeat;width:15px;height:10px;display:block} .up{background:url(http://www.gc-cdn.com/personalstylist/up.png) no-repeat;width:15px;height:10px;display:block} &lt;/style&gt; &lt;h1 id="ticket_thread_1" class="ticket_thread_h1"&gt;Thread # 1 &lt;span id="ticket_arrow" class="down"&gt;&amp;nbsp;&lt;/span&gt;&lt;/h1&gt; &lt;div class="parent"&gt; &lt;div class="sub_thread"&gt;&lt;p&gt;Thread Messages #1 1&lt;/p&gt;&lt;/div&gt; &lt;div class="sub_thread"&gt;&lt;p&gt;Thread Messages #1 2&lt;/p&gt;&lt;/div&gt; &lt;/div&gt; &lt;h1 id="ticket_thread_2" class="ticket_thread_h1"&gt;Thread # 2 &lt;span id="ticket_arrow" class="down"&gt;&amp;nbsp;&lt;/span&gt;&lt;/h1&gt; &lt;div class="parent"&gt; &lt;div class="sub_thread"&gt;&lt;p&gt;Thread Messages #2 1&lt;/p&gt;&lt;/div&gt; &lt;div class="sub_thread"&gt;&lt;p&gt;Thread Messages #2 2&lt;/p&gt;&lt;/div&gt; &lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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