wordpress jquery missing : after property id

Question

I am trying to make a simple accorion menu using jQuery together with Wordpress.

<script type="text/javascript" language="javascript">

var $j = jQuery.noConflict();


$j("#leftmenupane p.leftmenu_head").click(function(
{
    $j(this).css({'background-image' : 'url(down.png)'}).next("div.leftmenu_body").slideToggle(300).siblings("div.leftmenu_body").slideUp("slow");
    $j(this).siblings().css({'background-image' : 'url(left.png)'});
});

</script>

<div id="leftmenupane" class="leftmenu_list">
  <p class="leftmenu_head">Header-1</p>
    <div class="leftmenu_body">
        <a href="#">Link-1</a>
        <a href="#">Link-2</a>
        <a href="#">Link-3</a>
        <a href="#">Link-4</a>
    </div>
  <p class="leftmenu_head">Header-2</p>
    <div class="leftmenu_body">
        <a href="#">Link-1</a>
        <a href="#">Link-2</a>
        <a href="#">Link-3</a>
    </div>
  <p class="leftmenu_head">Header-3</p>
    <div class="leftmenu_body">
        <a href="#">Link-1</a>
   </div>
</div>

It is actually a sample form some tutorial. But I cannot get it to work. I sense some stupid error here but I am unable to find it. All I get is a " missing: after property id" error in Firebug on line "$j(this).css({'background-image' : 'url(down. ... ".

Please help.

Answer 1

try changing the colon to a comma & get rid of ur swirly brackets, like so:

$j(this).css('background-image', 'url(down.png)');
$j(this).siblings().css('background-image', 'url(left.png)');

Answer 2

Just out of curiosity, try changing the $j = jQuery.noConflict(); to j = jQuery.noConflict();

I only say this because they error you're seeing usually comes up when a variable is not available at compile time. I'm wondering if defining $j almost negates the no conflict or something. Just give it a try.

Answer 3

I changed the code to:

var $j = jQuery.noConflict();

$j(function() {

 $j("#leftmenupane p.leftmenu_head").click(function()
 {
  $j(this).css('background-image' , 'url(down.png)').next("div.leftmenu_body").slideToggle(300).siblings("div.leftmenu_body").slideUp("slow");
  $j(this).siblings().css( 'background-image' , 'url(left.png)');
 });

});

and it is now working correctly. Thank you guys anyway, as you pushed me into right direction :)