Advanced shortcode use

Not only you can insert accordions into pages using shortcodes, but you can also override settings, add or modify panels. It's even possible to create an accordion using only shortcodes, without setting it up in the admin area.

You can override the accordion's settings like this:

[accordion_slider id="1" width="700" aspect_ratio="2" visible_panels="5"]

As you can notice, the name of the settings are the same as those in the admin area, but they are lower case and with an underscore between words. This applies for all settings.

If you want to add breakpoint settings in the shortcode, you need to add them in a JSON-encoded string, since the breakpoints setting accepts an associated array-like value. You can create some breakpoints in the admin area and then see how the JavaScript code generated looks like.

As mentioned before, you can add new panels or change the data of existing ones:

[accordion_slider id="1" width="700" aspect_ratio="2" visible_panels="5"]
    [accordion_slider_panel index="1"]
        [accordion_slider_panel_element type="background_source"]path/to/new_image.jpg[/accordion_slider_panel_element]
    [/accordion_slider_panel]
    [accordion_slider_panel]
        [accordion_slider_panel_element type="background_source"]path/to/image.jpg[/accordion_slider_panel_element]
        [accordion_slider_panel_element type="opened_background_source"]path/to/opened_image.jpg[/accordion_slider_panel_element]
        [accordion_slider_panel_element type="background_link"]http://bqworks.com/accordion-slider/[/accordion_slider_panel_element]
        [accordion_slider_panel_element type="layer" horizontal="center" show_transition="right"]some layer content[/accordion_slider_panel_element]
    [/accordion_slider_panel]
[/accordion_slider]

The first panel shortcode will override the first panel in the accordion As you can notice that it has theindex attribute specified and set to 1.

The second panel shortcode doesn't have an index, so this will be a new panel element added after the panels created in the accordion's admin area.

This is the list of available types for accordion_slider_panel_element shortcodes:

• background_source
• background_alt
• background_title
• background_retina_source
• opened_background_source
• opened_background_alt
• opened_background_title
• opened_background_retina_source
• background_link
• background_link_title
• layer
• html

When you create an accordion from scratch using only shortcodes, you need to assign it a unique id attribute that doesn't already exist in the admin area.

[accordion_slider id="99" width="960" height="400" responsive_mode="custom" visible_panels="5"]
    [accordion_slider_panel content_type="posts" posts_post_types="post,page" posts_taxonomies="tag|design;tag|development;tag|planning"]
        [accordion_slider_panel_element type="background_source"][as_image_src][/accordion_slider_panel_element]
        [accordion_slider_panel_element type="background_alt"][as_image_alt][/accordion_slider_panel_element]
        [accordion_slider_panel_element type="link_url"][as_link_url][/accordion_slider_panel_element]
    [/accordion_slider_panel]
[/accordion_slider]

The accordion above contains a panel that will load data from posts. The dynamic tags, like [as_image_src] were discussed in previous chapter. As for the attributes added to the panelshortcode, those are the equivalent of the settings from the panel's Settings modal window in the admin area.

Below is a list of all the available panel settings: