Unbind or remove functions?

I'm having some difficulty with the accordion UI.

I want a set of divs to be an accordion when the window is a certain size (below 1024) and just divs (above 1024)

The code that I have works if the window is greater than 1024 and then I resize to a smaller window. But if I expand the window it won't turn off the accordion.

Here's the code, what am I not getting right?

<script type="text/javascript">
var width = $(window).width();
$(document).ready(function() {
    if (width < 1024){
    $('#accordion').accordion();
    }

});
$(window).resize(function() {
var width = $(window).width();
if (width 开发者_如何转开发< 1024) {
    $('#accordion').accordion();
} if (width > 1024) {
    $('.accordion').remove();
}});    
</script>

Two things in the code you posted:

1. The method to get rid of an accordion is not .remove() but .destroy().
2. You changed from an id selector ("#accordion") to a class selector (".accordion"). It's possible for that to work--assuming the elements have both that id and that class--but not recommended; you should be consistent about the selectors within a given function/context.