Question

I have a ticket system. Messages are placed in a div and that div has hidden sub messages (the replies of that ticket)

Demo

jsFiddle Hosted Demo

Click an Arrow – shows the thread child. Click it again it hides the thread child and the arrow goes up and down.

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.

jQuery

    $(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();

HTML

<style type="text/css">
.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}
</style>
<h1 id="ticket_thread_1" class="ticket_thread_h1">Thread # 1 <span id="ticket_arrow" class="down">&nbsp;</span></h1>
<div class="parent">
    <div class="sub_thread"><p>Thread Messages #1 1</p></div>
    <div class="sub_thread"><p>Thread Messages #1 2</p></div>
</div>
<h1 id="ticket_thread_2" class="ticket_thread_h1">Thread # 2 <span id="ticket_arrow" class="down">&nbsp;</span></h1>
<div class="parent">
    <div class="sub_thread"><p>Thread Messages #2 1</p></div>
    <div class="sub_thread"><p>Thread Messages #2 2</p></div>
</div>

Answer 1

Add the following code :

$("h1").find('.up').each(function(){$(this).removeClass('up').addClass('down');});

after $(this).find("#ticket_arrow").removeClass('down'); in else part, so code must be :

$('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');
                $("h1").find('.up').each(function(){$(this).removeClass('up').addClass('down');});
                $(this).find("#ticket_arrow").addClass('up');
                $(this).next('.parent').addClass('showMe').show();
            }
        });

that’s work for me.

Edit: BTW, why you have a multiple elements with same ID ?