Refresh part of page using jQuery on window resize

Question

Apologies if this is a duplicate, I have searched and searched and can't figure this out.

I am using a plugin to create an accessible accordion. However, the client requirement is that it's only an accordion on small screens. This isn't a native feature of the plugin, so with my (very) limited skills I'm trying to make it happen.

This is what I've come up with:

  $(function () {
if (matchMedia) {
    var mq = window.matchMedia("(max-width: 500px)");
    mq.addListener(WidthChange);
    WidthChange(mq);
}
function WidthChange(mq) {
    if (mq.matches) {
        $('.js-accordion').accordion();
     }
     else {
        $('.js-accordion').removeClass('accordion');
     }
}(window.jQuery)
});

This works fine when the window resizes down; the "accordion" class is added, which calls the plugin. However, when the window resizes back up, although the class is removed, all of the HTML, ARIA, etc that the plugin adds are still there, so it doesn't convert back until the page is refreshed. I don't want to refresh the whole page, just the accordion. I tried .load and it stops the whole thing working.

Most answers to this type of question seem to involve Ajax and refreshing a piece of content from the server; I just want to refresh part of the HTML.

Pardon my ignorance, I'm sure there's an easy solution (or maybe a better way of doing it), but I am still tearing my hair out after a day of working on this. Thanks in advance!

It should just revert to the default markup. The script adds a button, some ARIA, etc, to make it work as an accordion. At the moment although I'm removing the .accordion class on a larger screen size, the DOM elements created by the script remain until a refresh. I want just the accordion element to refresh, not the whole page. A whole-page refresh works, but isn't ideal for obvious reasons. — plousia
– plousia, Commented Aug 13, 2018 at 13:52

synz · Accepted Answer · 2018-08-12 07:09:37Z

1

You can try doing something like below

JAVASCRIPT

$(document).ready(function(){

    /* Trigger 1st change, maybe the window already below 500 */
    WidthChange();

    /* when window on resize */
    $(window).resize(function(){
        WidthChange();
    });

    function WidthChange() {

        $("#accordion").accordion();
        if($(window).width() > 500){
            $("#accordion").accordion("destroy");
        }else{
            $("#accordion").accordion();
        } 
    }
});

JSFiddle example : https://jsfiddle.net/synz/8szpf1or/

answered Aug 12, 2018 at 7:09

synz

5933 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Refresh part of page using jQuery on window resize

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related