Issue with Custom accordion

Question

I am trying to highlight the selected accordion tab background, its working but the CSS of selected accordion tab doesn't change selecting any other tab

The code and CSS is as follows

   <script type="text/javascript">

        $(document).ready(function ($) {
            $('#accordion').find('.accordion-toggle').click(function () {

                //Expand or collapse this panel
                $(this).next().slideToggle('slow');
                $(this).css({ "background-color": "#191970" });

                //Hide the other panels
                $(".accordion-content").not($(this).next()).slideUp('slow');
                $(".accordion-content").not($(this)).css({ "background-color": "#E4E4E4" });

            });
        });

    </script>
   <style type="text/css">
            #accordion{width:20%; float:left; height:100%; overflow:hidden;  }
          .accordion-toggle {cursor: pointer; background:#E4E4E4; line-height:35px; font-size:1em; padding-left:0.3em; color:#0f5595;  }
          .accordion-toggle img{ padding-right:0.4em; padding-top:0.3em;}
          .accordion-content {display: none; float:none;  }
          .accordion-content.default {display: list-item; }
          .accordion-content.contact{ display: list-item;}
    </style>

According to me the problem is with below statement:

$(".accordion-content").not($(this)).css({ "background-color": "#E4E4E4" });

he html is as

         <div id="accordion">

                <h4 class="accordion-toggle"> <img src="images/link.gif" /> first element</h4>
                    <div class="accordion-content default">
                        <ul>
                            <li><a href="index.html"> Security</a></li>
                            <li><a href="index.html"> Security</a></li>
                        </ul>
                    </div>

              <h4 class="accordion-toggle"> <img src="images/link.gif" /> second element</h4>
                    <div class="accordion-content">
                    <p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
                    </div>
</div>

Js Fiddle link

Answer 1

I think I get you now, you need to reset the background colour in your jQuery:

 $(document).ready(function ($) {
        $('#accordion').find('.accordion-toggle').click(function () {
            //stop us reusing $(this) as it's not efficent
            var $this = $(this);

            //First things first, reset all the accordion's colours back to default
            $("#accordion .accordion-toggle").css('background-color', '#E4E4E4');
            //Expand or collapse this panel
            $this.next().slideToggle('fast');

            //now set only the correct one to the new colour
            $this.css( "background-color", "#191970" );

            //Hide the other panels
            $(".accordion-content").not($this.next()).slideUp('fast');
        });
    });

Updated fiddle

Answer 2

It is not a good idea to use $(this) repeatedly; Try following:

$this = $(this);

And then use your $this variable.

Also, you're binding click to (".accordion-toggle") element, so $(this) is .accordion-toggle. But then you check for a group of $(".accordion-content").not($(this)). Are those several classes on the same set of elements?