JQuery: Hiding Other Toggles/Arrows When Click on new Header

Question

I have created a table simple table sorter. I am now trying add arrows onto the table. When a user clicks on the header, it first sorts lowest to highest. Clicks again, it is highest to lowest. I have it where when they hit onto a header, the toggle arrow will show up for that heading. I have it to where they can toggle back to fourth, that is currently working. But... If they click onto another header, I need the other toggle arrows from other headers (other than the one click) is hidden. Code is below....

Style

<style>
    .active_arrow #arrow_down{
        display: none;      
    }
    .A {
        display: inline;        
    }
    .B {
        display: none;
    }
</style>

HTML

<table id="current_year" class="tablesorter" >
    <thead>
        <tr>
            <th>County <img src="images/sort_arrow_down.png" id="arrow_up" style="width:16px; height:16px; " /><img src="images/sort_arrow_up.png" id="arrow_down" style="width:16px; height:16px; display:none;" /></th>
            <th>Percent of eFiles Returned <img src="images/sort_arrow_down.png" id="arrow_up" style="width:16px; height:16px; " /><img src="images/sort_arrow_up.png" id="arrow_down" style="width:16px; height:16px; display:none; " /></th> 
            <th>Number of eFiles Returned <img  src="images/sort_arrow_down.png" id="arrow_up" style="width:16px; height:16px; " /><img src="images/sort_arrow_up.png" id="arrow_down" style="width:16px; height:16px; display:none;" /></th>
            <th>Total Number of Accounts Returned <img src="images/sort_arrow_down.png" id="arrow_up" style="width:16px; height:16px; " /><img src="images/sort_arrow_up.png" id="arrow_down" style="width:16px; height:16px; display:none;" /></th>
        </tr>
    </thead>
</table>

JQUERY

<script>
    //Hiding ALL Arrows     
    $('#current_year img').hide();  

    // Click Function   
    $('#current_year th').click(function(){
        // Once click, hide any other arrows showing in headers
        //$('#current_year img').not($(this)).hide();

        // Toggle between images
        $('img',this).toggle();

        //Toggle between classes
        $(this).toggleClass("active_arrow");

        //REST OF CODE BELOW IS THE TABLE SORTER, SORTING TABLE FOR EACH HEADER'S VALUES FROM HIGHEST TO LOWEST OR VICE VERSA 
        var table = $(this).parents('table').eq(0)
        var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
        this.asc = !this.asc
        if (!this.asc){
            rows = rows.reverse()
        }
        for (var i = 0; i < rows.length; i++){table.append(rows[i])}
    })
    function comparer(index) {
        return function(a, b) {
            var valA = getCellValue(a, index).replace('%', ''), valB = getCellValue(b, index).replace('%', '')
            return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
        }
    }
    function getCellValue(row, index){ return $(row).children('td').eq(index).text() }      
</script>

I try to add the following code in order to hide the other header's arrows upon click into jquery (it is also commented out above). In theory the not suppose to mean that if its not the one being clicked, hide all other images, but I may be incorrect.:

$('#current_year img').not($(this)).hide();

I try adding the code... It kinda works for a moment when I am click on that one header. However, if I go to another header and come back. It will then show the two arrows images, and will not toggle correctly at all.

I feel that I am so close to the solution but cannot seem to put my finger on it. If they go to another header, hide the other headers arrows. Please help. What am I missing?

Answer 1

Well, I think i kinda figured it out. This is how I got it to work. If there is anything better out there, please do share. I am always looking for ways to improving my code.

HTML

     <table id="current_year">
         <tr>
            <th id="cur_header" >Data One<img src="images/sort_arrow_down.png" class="first_arrow" id="arrow_up" style="width:16px; height:16px; " /><img  src="images/sort_arrow_up.png" id="arrow_down" style="width:16px; height:16px; display:none;" /></th>
            <th  id="cur_header" >Data Two <img src="images/sort_arrow_down.png" id="arrow_up" style="width:16px; height:16px; " /><img src="images/sort_arrow_up.png" id="arrow_down" style="width:16px; height:16px; display:none; " /></th> 
            <th  id="cur_header" >Data Three <img  src="images/sort_arrow_down.png" id="arrow_up" style="width:16px; height:16px; " /><img src="images/sort_arrow_up.png" id="arrow_down" style="width:16px; height:16px; display:none;" /></th>
            <th  id="cur_header" >Data Four <img src="images/sort_arrow_down.png" id="arrow_up" style="width:16px; height:16px; " /><img  src="images/sort_arrow_up.png" id="arrow_down" style="width:16px; height:16px; display:none;" /></th>
         </tr>
     </table>

JQuery

        $('#current_year img').hide();
        $('#current_year .first_arrow').show();         

        $('#current_year th').click(function(){ 
            $('#current_year img').not($(this)).hide();
            $('img',this).show();
            $('#arrow_down', this).hide();
            $('#arrow_up', this).show();
            $(this).click(function(){
                $('img',this).toggle();
            });                         

            var table = $(this).parents('table').eq(0)
            var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
            this.asc = !this.asc
            if (!this.asc){
                rows = rows.reverse()
            }
            for (var i = 0; i < rows.length; i++){table.append(rows[i])}
        })
        function comparer(index) {
            return function(a, b) {
                var valA = getCellValue(a, index).replace(/[%,]/g, ''), valB = getCellValue(b, index).replace(/[%,]/g, '')                  
                return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
            }
        }
        function getCellValue(row, index){ return $(row).children('td').eq(index).text() }