JQuery Accordion: how to change page's background when closing header

Question

I really cannot find the solution on other questions!

I have that accordion menu similar to this:

<div id="accordion" style="font-size:1em;">
            <h3 id="lactics" style="margin-top:50px"><a href="#">Làctics</a></h3>
            <div>
                <p><a href="#">Iogurts</a></p>
                <p><a href="#">Pastissos</a></p>
                <p><a href="#">Llet</a></p>
                <p><a href="#">Formatges</a></p>
                <p><a href="#">Altres</a></p>
            </div>
            <h3 id="embotits"><a href="#">Embotits</a></h3>
            <div>
                <p><a href="#">Pernil</a></p>
                <p><a href="#">Embotits</a></p>
                <p><a href="#">Botifarres</a></p>
            </div>
</div>

And I have that jquery code:

$(document).ready(function() {
$(function() {
    $( "#accordion" ).accordion({
        collapsible: true,
        active: true,
        autoHeight: false,
    });
})
$('#lactics').click(function() {
    $("#prods_vcts").css("background","url(images/taula_vcts_lactics.png) no-repeat");
})
$('#embotits').click(function() {
    $("#prods_vcts").css("background","url(images/taula_vcts_embotits.png) no-repeat");
});
});

The idea is that the background of the page changes when the user clicks in other header of the menu.

However, I cannot find the way to just set the background to 'none' when there is no header active (that is, all the headers are closed). Then, the background is the page standard. I've tried binds and other things, but I really cannot do it.

Any ideas?

Answer 1

You can try this

$('#lactics').click(function() {
   if($(this).parent().find("ui-state-active").length != 0){
     $("#prods_vcts").css("background","url(images/taula_vcts_lactics.png) no-repeat");
   }
   else{
       $("#prods_vcts").css("background", "none");
   }
})
$('#embotits').click(function() {
   if($(this).parent().find("ui-state-active").length != 0){
     $("#prods_vcts").css("background","url(images/taula_vcts_embotits.png) no-repeat");
   }
   else{
       $("#prods_vcts").css("background", "none");
   }
});

Answer 2

You can bind to the change event of the accordion. When all panes are collapsed, ui.newHeader will be an empty jQuery object:

$("#accordion").accordion({
    collapsible: true,
    active: true,
    autoHeight: false,
    change: function(event, ui) {
        if (!ui.newHeader.length) {
            $("#prods_vcts").css("background-image", "none");
        } else {
            $("#prods_vcts").css("background", "url(images/taula_vcts_"
                + ui.newHeader.attr("id") + ".png) no-repeat");
        }
    }
});

If you want the background image to change as soon as the accordion panes start animating, you can bind to the changestart event instead.