Trigger Custom Dropdown w/ jQuery

Question

Ultimately, I want to toggle a select dropdown when an image is clicked. I want to utilize the "open/close" function, which is defined in the custom jQuery library, but can't figure out how to access the "open" function.

Question: How do I access the "open" or "close" function defined in a custom jQuery library? (More details below - please note, I have zero experience using jQuery Prototypes, which is a big part of this problem - I'm not even sure if I can access the object properly.)

Any help/suggestions or guidance is appreciated

---

I am using the Codrops Simple Effects for Dropdowns article for reference.

Specifically, I am referencing Demo #4 in my example/question.

---

The example uses a custom jQuery library for styling/animating dropdowns:

• This is the code repo (SimpleDropDownEffects)
• Here is the raw code (jquery.dropdown.js)

---

It's fairly simple:

1. First you lay out your HTML "select" (dropdown) markup

   <select id="cd-dropdown" class="cd-select">
       <option value="-1" selected>Choose an animal</option>
       <option value="1" class="icon-monkey">Monkey</option>
       <option value="2" class="icon-bear">Bear</option>
       <option value="3" class="icon-squirrel">Squirrel</option>
       <option value="4" class="icon-elephant">Elephant</option>
   </select>
   

2. (After including all necessary project files) You can call your plugin function

   $( '#cd-dropdown' ).dropdown();
   

3. The function then transforms our "select" markup into the following structure

   <div class="cd-dropdown">
       <span>Choose an animal</span>
       <input type="hidden" name="cd-dropdown">
       <ul>
           <li data-value="1"><span class="icon-monkey">Monkey</span></li>
           <li data-value="2"><span class="icon-bear">Bear</span></li>
           <li data-value="3"><span class="icon-squirrel">Squirrel</span></li>
           <li data-value="4"><span class="icon-elephant">Elephant</span></li>
       </ul>
   </div>
   

4. Then the function responds to the click event as specified on their documentation:

When clicking on the first span, we will apply the class “cd-active” to its parent, the division with the class “cd-dropdown”. When selecting an option, the respective span will get inserted into the first one.

---

Next, the jquery.dropdown.js file contains all of the definitions, which is built using the "prototype" method - which as I mention before, I have zero experience using. I won't include the whole file (since there is a link) but I will include the two functions I am trying to access and where I THINK it is being initialized.

The Open Function

open : function() {
        var self = this;
        this.dd.toggleClass( 'cd-active' );
        this.listopts.css( 'height', ( this.optsCount + 1 ) * ( this.size.height + this.options.gutter ) );
        this.opts.each( function( i ) {

            $( this ).css( {
                opacity : 1,
                top : self.options.rotated ? self.size.height + self.options.gutter : ( i + 1 ) * ( self.size.height + self.options.gutter ),
                left : self.options.random ? Math.floor( Math.random() * 11 - 5 ) : 0,
                width : self.size.width,
                marginLeft : 0,
                transform : self.options.random ?
                    'rotate(' + Math.floor( Math.random() * 11 - 5 ) + 'deg)' :
                    self.options.rotated ?
                        self.options.rotated === 'right' ?
                            'rotate(-' + ( i * 5 ) + 'deg)' :
                            'rotate(' + ( i * 5 ) + 'deg)'
                        : 'none',
                transitionDelay : self.options.delay && Modernizr.csstransitions ? self.options.slidingIn ? ( i * self.options.delay ) + 'ms' : ( ( self.optsCount - 1 - i ) * self.options.delay ) + 'ms' : 0
            } );

        } );
        this.opened = true;

    },

The Close Function

close : function() {

        var self = this;
        this.dd.toggleClass( 'cd-active' );
        if( this.options.delay && Modernizr.csstransitions ) {
            this.opts.each( function( i ) {
                $( this ).css( { 'transition-delay' : self.options.slidingIn ? ( ( self.optsCount - 1 - i ) * self.options.delay ) + 'ms' : ( i * self.options.delay ) + 'ms' } );
            } );
        }
        this._positionOpts( true );
        this.opened = false;

    }

Calling it All

$.fn.dropdown = function( options ) {
    var instance = $.data( this, 'dropdown' );
    if ( typeof options === 'string' ) {
        var args = Array.prototype.slice.call( arguments, 1 );
        this.each(function() {
            instance[ options ].apply( instance, args );
        });
    }
    else {
        this.each(function() {
            instance ? instance._init() : instance = $.data( this, 'dropdown', new $.DropDown( options, this ) );
        });
    }
    return instance;
};

Setting up the Function - Initial Definition

( function( $, window, undefined ) {

'use strict';

$.DropDown = function( options, element ) {
    this.$el = $( element );
    this._init( options );
};

// the options
$.DropDown.defaults = {
    speed : 300,
    easing : 'ease',
    gutter : 0,
    // initial stack effect
    stack : true,
    // delay between each option animation
    delay : 0,
    // random angle and positions for the options
    random : false,
    // rotated [right||left||false] : the options will be rotated to thr right side or left side.
    // make sure to tune the transform origin in the stylesheet
    rotated : false,
    // effect to slide in the options. value is the margin to start with
    slidingIn : false,
    onOptionSelect : function(opt) { return false; }
};

$.DropDown.prototype = {

    _init : function( options ) {

        // options
        this.options = $.extend( true, {}, $.DropDown.defaults, options );
        this._layout();
        this._initEvents();

    },

Hopefully, this makes sense to someone and they can help me out.

---

Conclusion

In summary, I want to click on an image on the page, which will trigger the same function/effects that is/are executed when the dropdown itself is clicked.

I'm not sure if I am asking the right question so I will ask both:

1. How can I access the function object defined in the prototype?
2. How can I execute the dropdown open function when clicking on another element? (*Note - This won't function like a normal dropdown, which I know is difficult, if not impossible to force open. I'm thinking I should be able to just execute the same function that is being executed when the dropdown is clicked.)

Thanks for your patience and help with this matter.

Answer 1

after various testing I came up with this:

$.extend(
  $.DropDown.prototype, {
    open: function() {
      // YOUR CODE HERE
      alert('YYY');
    }
  }
);

you can try it on your browser's console directly on the component's website (DEMO 4) you linked in your question:

http://tympanus.net/Development/SimpleDropDownEffects/index4.html

Prototype method "open" is extended, when you click the dropdown you get the alert. You can easely extend the "close" method in the same way.

Hope this helps.

EDIT:

to trigger the dropdown via javascript, you can simply do this:

$('.cd-dropdown span').mousedown();