Question

I have a ticket system on my site. There are several divs which show the original ticket and then sub hidden divs nested between these divs which show the customer and staff interaction. I want to open one div, and close the others and then if they open the other div this and all other divs close showing the one they clicked open.

jQuery(document).ready(function () {
    // ****** Click the ticket DIV
    $(".ticket_thread_7").click(function () {

        // Slide the SUB DIVs associated with this ticket
        $(".ticket_threads_7").slideDown("slow");

        // Turn the arrow from DOWN.png to UP.png
        $('.ticket_arrow_7').attr("src", "http://cdn.com/assets/imgs/up.png");

    // ****** If they have click the arrow again    
    }, function () {

        // .. close this ticket
        $(".ticket_threads_7").slideDown("slow");

        // .. also return the image back to normal
        $('.ticket_arrow_7').attr("src", "http://cdn.com/assets/imgs/up.png");

        return false;
    });
});

The HTML

<div class="ticket_thread_7">
    <p>I want to return my order <img src="http://cdn.com/assets/imgs/up.png" class="ticket_arrow_7"></p>
    <div class="ticket_threads_7" style="display:none">

        <div class="staff_7_1"><p>We cannot accept a return on this item.</p></div>
        <div class="cus_7_2"><p>Why not.</p></div>
        <div class="staff_7_3"><p>Please visit cdn.com/returnterms to see our policy, apologies.</p></div>

    </div>
</div>

This current solution works fine. As you can imagine though. This is a dynamic PHP driven site so we have many tickets on the site. I want to know in jQuery can I use a command to get all other DIV Element Ids on the page and hide them.

So can I do something like this:

// Hide all other current open threads and reset their arrows
$(".ticket_threads_7*!=7").slideDown("slow");
$('.ticket_arrow_'*!=7).attr("src", "http://cdn.com/assets/imgs/up.png");

So when they click the arrow, ALL other threads, will close if open and the arrows will be reset and this one will open.

Answer 1

Class is not designed to point to something unique, you should do something like this :

<div class="ticket_thread" id="ticket_thread_7">
   <p>...<img class="arrow" /></p>
   <div class="details">
      ...
   </div>
</div>

Then, it will be easy to do what you want :

$(".ticket_thread").not(this).find('.details').slideDown("slow");
$(".ticket_thread").not(this).find('.arrow').attr("src", "http://cdn.com/assets/imgs/up.png");

Also, please consider using classes and CSS sprites to design the arrow.