Custom JavaScript

Before adding any custom JavaScript, it's recommended to give the accordion that you want to target a custom class. This can be set in the Custom Class field, in the accordion's Appearance sidebar panel.

Note: The custom class name you specify in the Custom Class field doesn't need to include the dot, only the name of the class. For example, you need to enter my-accordion , not .my-accordion .

After you assigned a custom class to the accordion, you can use it in the Custom JavaScript field, to target that specific accordion.

The next chapter offers a presentation of the accordion's JavaScript API, which allows you to programatically control the accordion. Using this API requires some programming knowledge and familiarity with jQuery.

JavaScript API

Methods

The public methods below allow you to manipulate the accordion using external controls. There are two ways of calling a public method.

The first way is by calling the accordionSlider plugin and passing the name of the method and additional arguments:

$( '.my-accordion' ).accordionSlider( 'openPanel', 3 );

The first argument represents the name of the method and the second argument represents the value which will be applied. Please note that some methods don't have a second argument. For example:

$( '.my-accordion' ).accordionSlider( 'nextPanel' );

The second way is by getting a reference to the AccordionSlider instance and calling the method on the instance:

// get a reference to the AccordionSlider instance
var accordion = $( '.my-accordion' ).data( 'accordionSlider' );

console.log( accordion.getTotalPanels() );

accordion.gotoPage( 2 );

This way of calling a public method is mandatory when you use public methods that return data:getPanelAt , getCurrentIndex , getTotalPanels , getVisiblePanels , getTotalPages andgetCurrentPage , but it can be used with all the other public methods as well.

Here is the list of available methods:

MethodDescription
getPanelAt( index ) Gets all the data of the panel at the specified index. Returns an object that contains all the data specified for that panel.
getCurrentIndex() Gets the index of the current panel.
getTotalPanels() Gets the total number of panels.
nextPanel() Opens the next panel.
previousPanel() Opens the previous panel.
openPanel( index ) Opens the panel at the specified index.
closePanels() Closes all the panels.
getVisiblePanels() Gets the number of visible panels.
getTotalPages() Gets the number of pages.
getCurrentPage() Gets the index of the page currently displayed.
gotoPage( index ) Scrolls to the specified page.
nextPage() Goes to the next page.
previousPage() Goes to the previous page.
on( eventType, callback ) Adds an event listener to the accordion. More details about the use of this method will be presented in the 'Callbacks' chapter.
off( eventType ) Removes an event listener from the accordion.
destroy() Destroys an accordion by removing all the visual elements and functionality added by the plugin. Basically, it leaves the accordion in the state it was before the plugin was instantiated.
update() This is called by the plugin automatically when a property is changed. You can call this manually in order to refresh the accordion after changing its HTML, like removing or adding panels.
removePanels() Removes all the panels.
resize() This is called by the plugin automatically, when the browser window is resized. You can also call it manually if you find it necessary to have the accordion resize itself.

Callbacks

Callbacks (or events) are used to detect when certain actions take place. The callbacks can be added when the accordion is instantiated, or at a later time.

Examples:

$( '.my-accordion' ).on( 'panelOpen', function( event ) {
    console.log( event.index );
})

As you can notice, the callback functions have an event parameter which contains some information about that event.

The list of available events:

CallbackDescription
init Triggered after the accordion was created.
update Triggered when the 'update' method is called, either automatically or manually.
accordionMouseOver Triggered when the mouse pointer moves over the accordion.
accordionMouseOut Triggered when the mouse pointer leaves the accordion.
panelClick Triggered when a panel is clicked. Returned data:
  • index: the index of the clicked panel
panelMouseOver Triggered when the mouse pointer moves over a panel. Returned data:
  • index: the index of the panel over which the mouse pointer has moved
panelMouseOut Triggered when the mouse pointer leaves a panel. Returned data:
  • index: the index of panel from which the mouse pointer has moved away
panelOpen Triggered when a panel is opened. Returned data:
  • index: the index of the opened panel
  • previousIndex: the index of the previously opened panel
panelsClose Triggered when the panels are closed. Returned data:
  • previousIndex: the index of the previously opened panel
pageScroll Triggered when the accordion scrolls to another page. Returned data:
  • index: the index of the current page
panelOpenComplete Triggered when the opening of a panel is completed. Returned data:
  • index: the index of the opened panel
panelsCloseComplete Triggered when the closing of the panels is completed. Returned data:
  • previousIndex: the index of the previously opened panel
pageScrollComplete Triggered when the scroll to a page is completed. Returned data:
  • index: the index of the current page
breakpointReach Triggered when a breakpoint is reached. Returned data:
  • size: the specified size that was reached
  • settings: the settings specified for the current size
videoPlay Triggered when a video starts playing.
videoPause Triggered when a video is paused.
videoEnd Triggered when a video ends.

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk