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

I am new to Jquery , first i tried my best to resolve it myself — user3237190, Jan 27 '14 at 10:18
whats the problem? Are there any errors generated? What exactly isn't working? [Have you debugged the Javascript](http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code)? — Liam, Jan 27 '14 at 10:24
the elements of accordian which were clicked first they also keep the selected element color — user3237190, Jan 27 '14 at 10:42
want only the selected/expanded accordian element to be highlighted only — user3237190, Jan 27 '14 at 10:43

score 1 · Answer 1 · answered Jan 27 '14 at 10:24

1

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?

answered Jan 27 '14 at 10:24

Eternal1

5,447
3
30
45

want only the selected/expanded accordian element to be highlighted only – user3237190 Jan 27 '14 at 11:02

score 0 · Accepted Answer · answered Jan 27 '14 at 11:02

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

good lesson taught , I hope by this I will post less questions , thanks Liam — user3237190, Jan 27 '14 at 11:04
Nothing wrong with posting questions so long as they are well explained :) Glad it helps. — Liam, Jan 27 '14 at 11:06

Issue with Custom accordion

2 Answers2