How to disable jQuery accordion conditionally

Question

I want to enable and disable or better to add and remove jQuery accordion on my menu conditionally, is it possible to add or remove this on screen rotate or screen-size change ? I tried it but It does not seems to be working, The accordion is remaining for change in screen-size .

jQuery( document ).ready( function(){
    apply_accordion();
    jQuery(window).on("orientationchange",function(){
        apply_accordion();
    });
} );
function apply_accordion(){
    if (jQuery(window).width() < 540) {
        jQuery('.footer-area').accordion({
            icons: { "header": "icon-large ui-icon-carat-1-s", "activeHeader": "icon-large ui-icon-caret-1-n" },
            active: false,
            autoHeight: false,
            navigation: true,
            collapsible: true,
        });
    } else {
        //jQuery( '.footer-area' ).accordion( "disable" );
        //jQuery( '.footer-area' ).accordion( "destroy" );
        // jQuery( '.footer-area' ).accordion( "refresh" );
        jQuery( '.footer-area' ).accordion( "destroy" ).accordion();
    }
}

update

if else part will be,

} else {
    jQuery( '.footer-area' ).accordion( "destroy" );
    jQuery('.footer-area').accordion('option', 'active', 0);
}

when I starts with moving from portrait to landscape, it is working, but the reverse is not working , means when I am moving from landscape to portrait it is not working . And also gives error in console cannot call methods on accordion prior to initialization; attempted to call method 'destroy'

New jsfield

I would like to remove and add accordion with screen size.

Note:

jQuery version 1.11.4

check Techbreak's answer https://jsfiddle.net/voytfj2q/20/ it seems to be working but if you will check console it will generate " Uncaught Error: cannot call methods on accordion prior to initialization; attempted to call method 'destroy'" . and in actual implementation it does not work when I am moving from landscape to portrait.

And I have also posted an workaround, for now in my implementation it is working for me, but I know this is only a workaround.

Here is another fiddle if you will increase and decrease the screen-size slowly you can notice the issue.

Screenshot of issue, you can notice for few of them the accordion is disabled for increase in size and for some it is not disabled.

refer to this http://stackoverflow.com/questions/23996726/will-window-resize-fire-on-orientation-change I believe you are ending up triggering both events. — ScanQR, Dec 01 '16 at 05:29
@TechBreak please look at my updated code, I have tried few thngs and now it is only on screensize change, but still not working. can you please suggest something ? — Prafulla Kumar Sahu, Dec 02 '16 at 07:27
I have fixed your issue, please refer to following answer. Please accept if really fixes your issue :) — ScanQR, Dec 02 '16 at 07:44
@PrafullaKumarSahu: instead of `try...catch` you can fix the initialization error,: `var isInstance = (typeof $(element).data("ui-accordion") != "undefined");` then, `if (isInstance)` you can destroy, else you can initialize or refresh it. Did you tried this already? — deblocker, Dec 14 '16 at 08:04
@deblocker here jsfiddle.net/Lgx4es86/2 you can see the problem, if you will increase and decrease the size of the screen "slowly" you will be able to see the problem https://jsfiddle.net/Lgx4es86/5/ — Prafulla Kumar Sahu, Dec 14 '16 at 10:19
please check the update in question, I have added a screenshot. — Prafulla Kumar Sahu, Dec 14 '16 at 10:27
@PrafullaKumarSahu: 2 issues solved here: https://jsfiddle.net/Lgx4es86/6/ — deblocker, Dec 14 '16 at 10:51
@deblocker you should post it as an answer, that will be great, but please add some explanation and compare it with my workaround, as the work around functioning more smoothly than you some how !! I would like to understand why it is a better solution. — Prafulla Kumar Sahu, Dec 14 '16 at 11:24

ScanQR · Answer 1 · 2016-12-02T13:24:23.400

7

You need to activate the accordian to expand when the size is big enough to expand the content or screen rotated completely as follows,

jQuery(document).ready(function() {

  jQuery(window).on("resize", function() {
      if (jQuery(window).width() < 540) {

          jQuery('.footer-area').accordion({
              active: false, collapsible:true, active:true
          });
      } else {
          //reactivate the accordian so that it can be expanded again
          jQuery('.footer-area').accordion('option', 'active', 0);
      }
   });

Working fiddle for your example : https://jsfiddle.net/voytfj2q/18/ });

edited Dec 02 '16 at 13:24

answered Dec 02 '16 at 07:44

ScanQR

3,542
1
10
27

Thank you for your quick reply TechBreak, but that too not fixing my problem, I added mobile jquery and tested it again. :( – Prafulla Kumar Sahu Dec 02 '16 at 07:53
i have attached working fiddle already check with that what you are missing which is not triggering the event. – ScanQR Dec 02 '16 at 07:59
if you are talking about that alert, in my case also I was getting that but that does not disabled accordion, problem is not that the code is not executing it is about it is not doing the job. – Prafulla Kumar Sahu Dec 02 '16 at 08:40
Even I test with `jQuery(window).resize` :( – Prafulla Kumar Sahu Dec 02 '16 at 08:40
sorry about that, actually that is sidebar-area while typing here, I have committed a mistake here, but in my code it is `footer-area` and not working. – Prafulla Kumar Sahu Dec 02 '16 at 09:33
@PrafullaKumarSahu always provide correct and full code. Can not guess and suggest. – ScanQR Dec 02 '16 at 09:51
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/129609/discussion-between-prafulla-kumar-sahu-and-techbreak). – Prafulla Kumar Sahu Dec 02 '16 at 09:54
Have you find any other possible things that can be done on this ? As in last 3/4 days I have not got any improvement to this ? Another issue with it, when first time I am going to a small screen from a large screen( ie. landscape to portrait ) the accordion is not working. – Prafulla Kumar Sahu Dec 07 '16 at 06:54
With https://jsfiddle.net/voytfj2q/20/ it is not keeping the css of earlier state, but here the issue is when I starts with moving from portrait to landscape, it is working, but the reverse is not working , means when I am moving from landscape to portrait it is not working . – Prafulla Kumar Sahu Dec 07 '16 at 07:05
Your code will also gives error "cannot call methods on accordion prior to initialization; attempted to call method 'option'" in console, so even you should not use it . – Prafulla Kumar Sahu Dec 08 '16 at 11:27
Added an work around which is not an edit to your post that is why not updated your answer, still trying to get a correct solution, if I will get a solution which will be an update to your solution, I will definitely update your answer. – Prafulla Kumar Sahu Dec 12 '16 at 07:53

deblocker · Accepted Answer · 2016-12-14T12:14:54.553

OK. Actually, you have solved the issue with many different instances of the accordion, which wasn't in evidence from your original post, so the wrong selector .footer-area used here:

      jQuery('.footer-area').accordion({
          active: false, collapsible:true, active:true
      });

has been adjusted.

Issue #1:

As you need to create and destroy the widget based on the page size, we need to check for the existence of every widget instance before calling any method of the accordion, otherwise we will raise the infamous error: ...cannot call methods on *some-widget* prior to initialization.

This issue is solved by checking for the existence of the data which has been appended to the element at widget instance creation:

var isInstance1 = (typeof jQuery('#footer-widget-area-1 .footer-area').data("ui-accordion") != "undefined");

Issue #2:

When you are switching back to the unstyled menu, the page height will increase and the page will show the vertical scrollbar, which is resulting in a different page width. The page is resized again and your check for window.width will behave unstable.

This is the reason why you need to check for jQuery('body').width() + scrollbar_width(). Simply take the provided function to get the scrollbar width as-is, and include it in your snippet lbrary.

Fiddle: https://jsfiddle.net/Lgx4es86/6/

/* Calculates scrollbar width in pixels */
function scrollbar_width() {
    if( jQuery('body').height() > jQuery(window).height()) {

        /* Modified from: http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php */
        var calculation_content = jQuery('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>');
        jQuery('body').append( calculation_content );
        var width_one = jQuery('div', calculation_content).innerWidth();
        calculation_content.css('overflow-y', 'scroll');
        var width_two = jQuery('div', calculation_content).innerWidth();
        jQuery(calculation_content).remove();
        return ( width_one - width_two );
    }
    return 0;
}

jQuery( document ).ready( function(){
    apply_accordion();
    jQuery(window).resize(function() {
        apply_accordion();
    });
} );
function apply_accordion(){
  var ww = jQuery('body').width() + scrollbar_width();
    if (ww < 540) {
        jQuery('#footer-widget-area-1 .footer-area').accordion({
                active: false, collapsible:true
            });
        jQuery('#footer-widget-area-2 .footer-area').accordion({
                active: false, collapsible:true
            });
        jQuery('#footer-widget-area-3 .footer-area').accordion({
                active: false, collapsible:true
            });
        jQuery('#footer-widget-area-5 .footer-area').accordion({
                active: false, collapsible:true
            });
        jQuery('#footer-widget-area-6 .footer-area').accordion({
                active: false, collapsible:true
            });
        } else {
            var isInstance1 = (typeof jQuery('#footer-widget-area-1 .footer-area').data("ui-accordion") != "undefined");
            if (isInstance1) {
                jQuery('#footer-widget-area-1 .footer-area').accordion('option', 'active', 0);
                jQuery('#footer-widget-area-1 .footer-area').accordion("destroy");
            }
            var isInstance2 = (typeof jQuery('#footer-widget-area-2 .footer-area').data("ui-accordion") != "undefined");
            if (isInstance2) {
                jQuery('#footer-widget-area-2 .footer-area').accordion('option', 'active', 0);
                jQuery('#footer-widget-area-2 .footer-area').accordion("destroy");
            }
            var isInstance3 = (typeof jQuery('#footer-widget-area-3 .footer-area').data("ui-accordion") != "undefined");
            if (isInstance3) {
                jQuery('#footer-widget-area-3 .footer-area').accordion('option', 'active', 0);
                jQuery('#footer-widget-area-3 .footer-area').accordion("destroy");
            }
            var isInstance5 = (typeof jQuery('#footer-widget-area-5 .footer-area').data("ui-accordion") != "undefined");
            if (isInstance5) {
                jQuery('#footer-widget-area-5 .footer-area').accordion('option', 'active', 0);
                jQuery('#footer-widget-area-5 .footer-area').accordion("destroy");
            }
            var isInstance6 = (typeof jQuery('#footer-widget-area-6 .footer-area').data("ui-accordion") != "undefined");
            if (isInstance6) {
                jQuery('#footer-widget-area-6 .footer-area').accordion('option', 'active', 0);
                jQuery('#footer-widget-area-6 .footer-area').accordion("destroy");
            }
        // var isInstance = (typeof jQuery('.footer-area').data("ui-accordion") != "undefined");
        // if (isInstance){
        //  jQuery('.footer-area').accordion('option', 'active', 0);
        //  jQuery('.footer-area').accordion( "destroy" );
        // }
    }
}

Your workaround:

You are applying and removing the accordion styles, but not destroying the widget instances, so data event handlers are still there. You would need at least to move the jQuery('.footer-area').accordion part in another place to execute it just only one time. Moreover, beside this, the page width issue isn't solved by your workaround.

Scrollbar width function: credit Alex Mansfield (http://alexmansfield.com/javascript/css-jquery-screen-widths-scrollbars)

toto · Answer 3 · 2016-12-15T00:32:39.813

0

        var myAccordion = null;
        jQuery(document).ready(function () {
            createAccordion(true);
            jQuery(window).bind("resize", function (event) {

                updateAccordion();
            });
        });
        function createAccordion(value){
        try{


           $(".footer-area").accordion({
                    icons: {"header": "icon-large ui-icon-carat-1-s", "activeHeader": "icon-large ui-icon-caret-1-n"},
                    active: 0,
                   // heightStyle: "fill",

                    collapsible: value
                });


             }catch(e){
        alert(e);
        }   
        }

        function updateAccordion() {

      try{
       var w = jQuery(window).width();
           if (w < 540){
           $(".footer-area").accordion("option", "collapsible", false);


           }else{

            $(".footer-area").accordion("option", "collapsible", true);
           }


      }catch(e){

      alert(e);
      }


            }

edited Dec 15 '16 at 00:32

answered Dec 10 '16 at 16:41

toto

1,122
2
13
26

Thank you for your kind reply, the first one I have already tried and that did not worked for me, the second one, I will definitely try, when I will return to home, away from my system now, also I would like to apologizes for so late reply. – Prafulla Kumar Sahu Dec 11 '16 at 09:38
The second one is not working too, Second one causing the div to be disappeared for mobile and when returning to landscape it is keeping the accordion, which is what I want to remove, For landscape, I am trying to display this as normal html and for portrait, I want it to use accordion. – Prafulla Kumar Sahu Dec 12 '16 at 05:22
Hello toto, I tried your updated code but still it does not worked for me, you can check here https://jsfiddle.net/voytfj2q/21/ and https://jsfiddle.net/voytfj2q/22/ – Prafulla Kumar Sahu Dec 13 '16 at 06:04
what version of jquery you are using? – toto Dec 13 '16 at 10:37
Hi, i updated jsfiddle code and from my side work. please check. https://jsfiddle.net/voytfj2q/69/ – toto Dec 13 '16 at 10:44
in your fiddle, if you have noticed the menu is remaining in open condition for all screen-size, but it should work only for protrait( small screen ) what my question ask for and when the screen changes to landscape ( bigger screen ), the accordion should disappear / destroyed and the menu should display as normal menu and again for small screen it should display as accordion menu. – Prafulla Kumar Sahu Dec 13 '16 at 12:36
my jquery version is 1.11.4. – Prafulla Kumar Sahu Dec 13 '16 at 12:37
check https://jsfiddle.net/voytfj2q/20/ it seems to be working but if you will check console it will generate " Uncaught Error: cannot call methods on accordion prior to initialization; attempted to call method 'destroy'" . and in actual implementation it does not work when I am moving from landscape to portrait. – Prafulla Kumar Sahu Dec 13 '16 at 12:40
hello, this link not is the code that i modified. is this: http://jsfiddle.net/voytfj2q/69/ – toto Dec 13 '16 at 19:18
hello toto, I have seen your fiddle, but the link I have provided seems like working having error, but your version is not working totally, if you change the screen size for your version and the link I have provided you can notice the link I have provided seems to be working, but when you look into console it has errors and in actual implementation it is not working . – Prafulla Kumar Sahu Dec 14 '16 at 03:11
perhaps, I was unable to make you understand my problem clearly, but please look at this https://jsfiddle.net/voytfj2q/78/ your code and result, change the screen and see the result, you will notice even in small screen the accordion is unfolded and having a console error. – Prafulla Kumar Sahu Dec 15 '16 at 06:46

Prafulla Kumar Sahu · Answer 4 · 2016-12-12T07:50:56.467

A work around will be removing and adding the classes and attributes when ever the screen size is changing. I am posting this workaround but would like to have an correct solution to it.

jQuery(document).ready(function() {

  jQuery(window).on("resize", function() {
      if (jQuery(window).width() < 540) {

          jQuery('.footer-area').accordion({
              active: false, collapsible:true, active:true
          });

          jQuery('.footer-area h2').append('<span class="ui-accordion-header-icon ui-icon ui-icon-carat-1-s"></span>');
          jQuery('.footer-area div').css('display', 'none');
          jQuery('.footer-area div').addClass('ui-widget-content');
          jQuery('.footer-area div').addClass('ui-accordion-content');
          jQuery('.footer-area h2').addClass('ui-accordion-header');
          jQuery('.footer-area h2').addClass('ui-accordion-icons');

      } else {
          jQuery('.footer-area h2 .ui-accordion-header-icon').remove();
          jQuery('.footer-area div').removeAttr('style');
          jQuery('.footer-area div').removeClass('ui-widget-content');
          jQuery('.footer-area div').removeClass('ui-accordion-content');
          jQuery('.footer-area h2').removeClass('ui-accordion-header');
          jQuery('.footer-area h2').removeClass('ui-accordion-icons');
      }
   });

Yaser · Answer 5 · 2016-12-13T09:54:00.287

0

There an option using pure css in which you can use media quires to show or hide them accordingly based on screen size:

Let's say you have ui-accordion-header class on your accordion headers when it's rendered.

Now you can put this in your style sheet:

@media screen and (min-width: 0) and (max-width: 1024px) {
  .ui-accordion-header { display: block; }  /* show it on small screens */
}

@media screen and (min-width: 0) and (max-width: 400px) {
  .ui-accordion-header { display: none; }   /* hide it elsewhere */
}

Or:

@media all and (orientation:portrait) {
  .ui-accordion-header { display: none; }
}

@media all and (orientation:landscape) {
  .ui-accordion-header { display: block; }
}

And you don't need to write any js code. Check the code here.

edited Dec 13 '16 at 09:54

answered Dec 13 '16 at 00:14

Yaser

5,285
1
13
26

I tried your code , both of them and none of them worked for me, still I am thankful to you for your effort . – Prafulla Kumar Sahu Dec 13 '16 at 05:59
do you have a fiddle or plunkr? @PrafullaKumarSahu – Yaser Dec 13 '16 at 09:24
yes, the question itself contains one link if you have noticed https://jsfiddle.net/voytfj2q/20/ – Prafulla Kumar Sahu Dec 13 '16 at 09:38
I've put a working code there based on id selectors but you get the idea @PrafullaKumarSahu – Yaser Dec 13 '16 at 09:54
check https://jsfiddle.net/voytfj2q/20/ it seems to be working but if you will check console it will generate " Uncaught Error: cannot call methods on accordion prior to initialization; attempted to call method 'destroy'" . and in actual implementation it does not work when I am moving from landscape to portrait. – Prafulla Kumar Sahu Dec 13 '16 at 12:40

How to disable jQuery accordion conditionally

5 Answers5