How to remove initialization of jQuery plugin from only one element of a set?

Is there is a way to remove plugin from elements using different selector than the one which was used to add them? For example, in mobile version of responsive theme footer menus are collapsed by swCollapsePanel plugin. I need newsletter to not be collapsed, so I have tried to remove plugin from it

window.StateManager.removePlugin('.footer--column.column--newsletter .column--headline', 'swCollapsePanel');

but that doesn’t work because state manager searches plugins by original selector, which was ‘.footer–column .column–headline’, but if I will use original selector I will remove collapsing from all footer menus.

One way of solving this is to remove ‘.column–headline’ class, but then I will have to duplicate all styles for that headline, is there another way to remove plugin from that element?

 You can edit .tpl+less this way: {block name="frontend\_index\_footer\_column\_newsletter\_headline"} 
{s name="sFooterNewsletterHead"}{/s}

 {block name="frontend\_index\_footer\_column\_newsletter\_content"} 
style="display: block;"\> 

{s name="sFooterNewsletter"}{/s}

 {block name="frontend\_index\_footer\_column\_newsletter\_form"} <form class="newsletter--form" action="%7Burl%20controller='newsletter'%7D" method="post">
                <input type="hidden" value="1" name="subscribeToNewsletter">

                {block name="frontend_index_footer_column_newsletter_form_field"}
                    <input type="email" name="newsletter" class="newsletter--field" placeholder="{s name=" indexfooternewslettervalue>
                    {if {config name="newsletterCaptcha"} !== "nocaptcha"}
                        <input type="hidden" name="redirect">

                {block name="frontend_index_footer_column_newsletter_form_submit"}
                    <button type="submit" class="newsletter--button btn">
                        <i class="icon--mail"></i> <span class="button--text">{s name='IndexFooterNewsletterSubmit'}{/s}</span>
            </form> {/block} 

Style **display: block;** should be transfer to footer.less of your template


 .column--content { **display: none;** &.is--active { display: block; } }

Or you can do the same with js, but I think better to do the same via template+styles.

1 Like

Thanks for the reply, I have already styled it in similar way to be displayed by default, the problem is that it doesn’t look like a part of menu but is still folded by javascript. For now I have blocked that with display: block!important but it would be nice if I could unlink javascript plugin from it.