Question

I have made some menus which have items that expand when the user clicks on them. Whenever the menu item is expanded, the headline of the item is supposed to change style using .css()

Since the menus are styled differently, there is an if statement within the script, that checks whether the user clicked a menu2 or a menu3 item to apply the appropriate style when it expands.

EDIT: The problem is that the styling changes do not apply as they should.

I replaced $this to $(this) as Sushanth suggested, but the problem persists, check the example (updated)

Code:

<script type='text/javascript'>
$(window).load(function(){
$(document).ready(function() {

    $(".toggle-trigger").click(function() {
        $(this).parent().nextAll('.toggle-wrap').first().slideToggle('slow','swing'); 


      if( $(this).is("menu2 .headline a")) {
            $(this).toggle(
                function(){
                $(this).parent().css("background-color","rgba(0, 0, 0, 0.1)",'border', 'solid 2px #009e0f');
                $(this).css("color","#009e0f");
                },
                function(){
                $(this).parent().css("background-color","#009e0f","border",'solid 2px #009e0f');
                $(this).css("color","#ffffff");
                }
            );
        }

        else if( $(this).is("#menu3 .headline a")) {
            $(this).toggle(
                function(){
                $(this).parent().css("background-color","rgba(0, 0, 0, 0.1)",'border', 'solid 2px #f7b50c');
                $(this).css("color","#f7b50c");
                },
                function(){
                $(this).parent().css("background-color","#009e0f","border",'solid 2px #f7b50c');
                $(this).css("color","#ffffff");
                }
            );
        }



    });
});

});

Answer 1

$this

supposed to be // In the if statements if( $this.is("menu2 .headline a"))

$(this)

Or cache var $this = $(this)

UPDATE

I see two more problem with the code …

• Missing # sign in this line if( $(this).is("#menu2 .headline a"))
  Second problem is in the way you are assigning the CSS properties..

  .css(“background-color”,”#009e0f”,”border”,’solid 2px #f7b50c’)

You have multiple properties .. So the properties are supposed to be in the form of a map with key:value pairs..

.css({
       "background-color": "#009e0f",
       "border": 'solid 2px #f7b50c'
 });

Check Fiddle

No need to encase your code in both $(window).load() and DOM Ready handler.. One is sufficient.
Also there seems to be a problem with the toggling

UPDATE

Optimized without using toggle

$(document).ready(function() {
    $(".toggle-trigger").click(function() {
        // cache the div next to anchor
        var $div = $(this).parent().nextAll('.toggle-wrap').first();
        $div.slideToggle('slow', 'swing');
        // cache $(this)
        var $this = $(this);
        var background = '';
        var color = '';
        // Checking id the div has no class called hidden
        if (!$div.hasClass('hidden')) {
            // then add the class to the div
            $div.addClass('hidden');
            background = "rgba(0, 0, 0, 0.1)";
            // closest ancestor of the link cliked is menu2
            if ($this.closest('#menu2').length) {
                color = "#009e0f";
            }
            // closest ancestor of the link cliked is menu2
            else if ($this.closest('#menu3').length) {
                color = "#f7b50c";
            }
        }
        // if the div has a class hidden then 
        else {
            // Remove the hidden class
            $div.removeClass('hidden');
            color = "#ffffff";
            if ($this.closest('#menu2').length) {
                background = "#009e0f";
            }
            else if ($this.closest('#menu3').length) {
                background = "#f7b50c";
            }
        }
        // set the background  and color based on conditions
        $this.parent().css("background-color" , background );
        $this.css("color" , color);
    });
});​

Updated Fiddle