Allows you to use a JSON file or JSON string as a source for the accordion's content. The path of the JSON file or the JSON string must be passed to the 'JSONSource' property.


    JSONSource: 'path/to/file.json',
    width: 960, 
    height: 400

In the accordion's HTML code, you will only need to create the main container DIV. The rest will be created automatically, based on the JSON data.

<div id="example-json" class="accordion-slider"></div>

The syntax used in JSON is similar to that used in HTML. Some differences would be that theas- prefix is not used anymore for classes, the data- prefix is not used for attributes, and using the dash (-) as a delimiter is replaced with using the CamelCase notation.

These are the node names that need to be used:

  • accordion : for the main accordion object
  • panels : for the array of panel objects
  • background : for background images
  • backgroundLink : for links attached to background images
  • backgroundRetina : for alternative, high resolution images
  • backgroundOpened : for alternative images that will appear when the panel is opened
  • backgroundOpenedLink : for links attached to the opened background image
  • backgroundOpenedRetina : for retina version of the opened background image
  • layers : for the array of layer objects


    "accordion": {
        "panels": [
                "background": {"source": "path/to/image1.jpg"},
                "backgroundRetina": {"source": "path/to/image1@2x.jpg"},
                "backgroundOpened": {"source": "path/to/alt_image1.jpg"},
                "backgroundOpenedRetina": {"source": "path/to/image1@2x.jpg"},
                "backgroundLink": {"address": "http://bqworks.com"}
                "background": {"source": "path/to/image2.jpg"},
                "backgroundRetina": {"source": "path/to/image2@2x.jpg"},
                "backgroundOpened": {"source": "path/to/alt_image2.jpg"},
                "backgroundOpenedRetina": {"source": "path/to/alt_image2@2x.jpg"},
                "backgroundOpenedLink": {"address": "http://bqworks.com"}

If you want to use lazy loading, you simply need to add the lazyLoading property to theaccordion object and specify the path of the placeholder image.


    "accordion": {
        "lazyLoading": "path/to/blank.gif"
        "panels": [

When using layers, the equivalent for the class attribute is the style property. As noted before, the as- and data- prefixes are not used anymore and the names of the properties use a CamelCase notation. It's important to already be familiar with the 'Layers' module before learning how to use layers in JSON. The available styles and properties are enumerated below, but check the presentation of the 'Layers' module for a description of these.


  • opened
  • closed
  • black
  • white
  • padding
  • rounded.


  • content - this is the only particular property and it's used to set the content of the layer
  • width
  • height
  • depth
  • position
  • horizontal
  • vertical
  • showTransition
  • showOffset
  • showDuration
  • showDelay
  • hideTransition
  • hideOffset
  • hideDuration
  • hideDelay

This module is showcased in example_json.html, which is the JSON version of example2.html. Please check the JSON file created for this example, accordion.json, to see how layers can be created in JSON.

Have more questions? Submit a request


Article is closed for comments.
Powered by Zendesk