How to onclick-trigger a non-native jQuery plugin's action?

Question

I've installed a 3rd-party jQuery plugin (it's an accordion). It displays on my page, and works as expected.

I want to trigger one of the plugin's actions (open a particular slide) when I click on an image on my page.

I can't seem to get the code &/or syntax for doing that right.

The plugin I've installed is "EasyAccordion" (http://www.madeincima.eu/blog/jquery-plugin-easy-accordion/). It's .js source is posted here: http://pastebin.com/55JB4pr2.

I'm using the plugin on a Drupal7 page.

I don't think that the specific plugin, or the fact that it's been used in Drupal, is relevant to the proper jQuery usage.

jQuery's bundled with Drupal. I init the plugin on my page with:

    ( function ($) {
        Drupal.behaviors.myEasyAccordion = {
            attach: function(context,settings) {
                $('#accordion1',context).easyAccordion({
                    autoStart:     false,
                    ...
                });
            }
        };
    })(jQuery);

In my markup, I have

    ...
    <div id="accordion1">
     ... EASYACCORDION MARKUP ...
    </div>
    ...

Again, with this init & markup, the accordion appears/works as expected.

On the same page, in another I've added an image-link, i.e.,

    ...
    <div id="myImg">
        <a><img src="myimg.png" /></a>
    </div>
    <div id="accordion1">
     ...  EASYACCORDION MARKUP ...
    </div>
    ...

I want to click on the image in the "myImg" div, and have the EasyAccordion snap to a specific open 'pane'. The activation of a particular pane is addressed, I think, by the

    line #127                jQuery.fn.activateSlide = function() {

function, as seen at the pastebin-link I provided above.

Iiuc, I need to add code to the init function above, to tie the image-click to an action execution in the EasyAccordion.

My question is -- how?

I think I need to fire off (e.g., for slide #3),

    jQuery(this).activateSlide(3);

adding some variation of,

    $('#myImg').click(function () {
      ...
    });

to the init, attaching it to the EasyAccordion init's function(). Something like?

    ( function ($) {
        Drupal.behaviors.myEasyAccordion = {
            attach: function(context,settings) {
                $('#accordion1',context).easyAccordion({
                    autoStart:     false,
                    ...
                });
 ---->          $('#myImg',context).easyAccordion({ ...
 ---->          ?????????
 ---->          });
            }
        };
    })(jQuery);

So far the right syntax has eluded me. At least, I can't get the click-on-image to actually cause the specified item to 'activate' in the EasyAccordion.

These two posts,

http://stackoverflow.com/questions/5492258/easyacordion-jump-to-desired-slidenum-jquery-plugin
http://stackoverflow.com/questions/6243870/easyaccordion-jquery-plugin-callbacks

I think are close. But I'm still not getting the syntax to crowbar into my Drupal.behaviors... stanza right.

Any guidance?

Answer 1

This works.

Adding a targetable class to each slide, so that markup's:

    ...
    <div id="myImg">
        <a><img src="myimg.png" /></a>
    </div>
    <div id="accordion1">
    <dt class="slide_1" >
         ...
    <dt class="slide_2" >
         ...
    </div>
    ...

then, in the init,

    ( function ($) {
        Drupal.behaviors.myEasyAccordion = {
            attach: function(context,settings) {
                $('#accordion1',context).easyAccordion({
                    autoStart:     false,
                    ...
                });
                $('#myImg',context).click(function() {
                    $("dt.slide_1").activateSlide();
                });
            }
        };
    })(jQuery);

Now, a click on the img in the #myImg div opens the target slide ... here, 'slide_1', as intended.