Turn accordion widget on and off

I am setting up different CSS for the basic three media Screen, tablet and smartphone. I have a two list I would like to leave as is for Screen but would like to have the two lists become an accordion widget in Tablet mode.

My idea was to go ahead and put everything into the widget. The size that I have set for Tablet view would turn on the jquery script and the Desktop view would turn the script off and the content would just show in normal looking 's

So if the SpryAccordion.js file looks like this: (I have some actionscript exp. So I understand if/else statements but don't know how to use them in js)

(function() { // BeginSpryComponent

if (typeof Spry == "undefined") window.Spry = {};
if (!Spry.Widget开发者_开发百科) Spry.Widget = {};

Spry.Widget.Accordion = function(element, opts) {
//all the spry code...//
};

})();

how would I wrap this to turn the widget on and off?

Or is there a better way to do this? I'm very new to jquery. My other option is to have duplicate content in a Div and the widget and turn the visibility each on/off with css.

But that just wouldn't be very elegant.

Please help.

I think I understand your question. So basically you want to be able to turn the accordion on and off correct?

One way of doing it is simply define the the Spry.Widget.Accordion inside of its own function and only call it when you want to activate the accordion.

Is that kind of what you were looking for?