Shortcode API

First tab opened

you can choose to have the first item opened or closed
[awesome-accordions id='190' first_tab_opened='true']

• This is the first panel title

  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed sed risus pretium quam vulputate dignissim. Ipsum consequat nisl vel pretium lectus. Sodales ut etiam sit amet nisl purus in. Et malesuada fames ac turpis. Pretium lectus quam id leo in vitae. Mauris pharetra et ultrices neque ornare aenean. Consectetur adipiscing elit duis tristique. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Blandit massa enim nec dui nunc mattis enim ut tellus. Lacus viverra vitae congue eu consequat ac felis donec. Commodo elit at imperdiet dui accumsan sit amet nulla facilisi. Nam aliquam sem et tortor consequat id. Lacus sed turpis tincidunt id aliquet risus feugiat in ante. Imperdiet dui accumsan sit amet.

• This is the 2nd panel title

  Aliquam ultrices sagittis orci a scelerisque purus semper eget. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. In tellus integer feugiat scelerisque varius. Non pulvinar neque laoreet suspendisse interdum consectetur libero id. Egestas dui id ornare arcu odio ut sem. Sit amet venenatis urna cursus eget nunc scelerisque viverra. Libero justo laoreet sit amet cursus sit. Dolor morbi non arcu risus quis varius quam quisque id. Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Lorem sed risus ultricies tristique nulla aliquet enim. Viverra mauris in aliquam sem. Aliquet risus feugiat in ante. Sit amet consectetur adipiscing elit pellentesque. Dui vivamus arcu felis bibendum ut tristique et. Feugiat vivamus at augue eget arcu. Sapien eget mi proin sed.

• this is the 3rd panel title

  Egestas sed sed risus pretium quam vulputate. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus a. Viverra nibh cras pulvinar mattis nunc. Sem et tortor consequat id porta nibh venenatis. Vulputate ut pharetra sit amet aliquam id. Tortor condimentum lacinia quis vel eros. Malesuada proin libero nunc consequat interdum varius sit. Nisl nunc mi ipsum faucibus vitae aliquet. Lectus nulla at volutpat diam ut venenatis tellus. Ut tellus elementum sagittis vitae et. Sit amet mattis vulputate enim nulla aliquet porttitor lacus. Nisi lacus sed viverra tellus in hac. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Hendrerit dolor magna eget est lorem ipsum dolor sit. Sed lectus vestibulum mattis ullamcorper velit.

first item closed

[awesome-accordions id='190' first_tab_opened='false']

• This is the first panel title

  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed sed risus pretium quam vulputate dignissim. Ipsum consequat nisl vel pretium lectus. Sodales ut etiam sit amet nisl purus in. Et malesuada fames ac turpis. Pretium lectus quam id leo in vitae. Mauris pharetra et ultrices neque ornare aenean. Consectetur adipiscing elit duis tristique. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Blandit massa enim nec dui nunc mattis enim ut tellus. Lacus viverra vitae congue eu consequat ac felis donec. Commodo elit at imperdiet dui accumsan sit amet nulla facilisi. Nam aliquam sem et tortor consequat id. Lacus sed turpis tincidunt id aliquet risus feugiat in ante. Imperdiet dui accumsan sit amet.

• This is the 2nd panel title

  Aliquam ultrices sagittis orci a scelerisque purus semper eget. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. In tellus integer feugiat scelerisque varius. Non pulvinar neque laoreet suspendisse interdum consectetur libero id. Egestas dui id ornare arcu odio ut sem. Sit amet venenatis urna cursus eget nunc scelerisque viverra. Libero justo laoreet sit amet cursus sit. Dolor morbi non arcu risus quis varius quam quisque id. Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Lorem sed risus ultricies tristique nulla aliquet enim. Viverra mauris in aliquam sem. Aliquet risus feugiat in ante. Sit amet consectetur adipiscing elit pellentesque. Dui vivamus arcu felis bibendum ut tristique et. Feugiat vivamus at augue eget arcu. Sapien eget mi proin sed.

• this is the 3rd panel title

  Egestas sed sed risus pretium quam vulputate. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus a. Viverra nibh cras pulvinar mattis nunc. Sem et tortor consequat id porta nibh venenatis. Vulputate ut pharetra sit amet aliquam id. Tortor condimentum lacinia quis vel eros. Malesuada proin libero nunc consequat interdum varius sit. Nisl nunc mi ipsum faucibus vitae aliquet. Lectus nulla at volutpat diam ut venenatis tellus. Ut tellus elementum sagittis vitae et. Sit amet mattis vulputate enim nulla aliquet porttitor lacus. Nisi lacus sed viverra tellus in hac. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Hendrerit dolor magna eget est lorem ipsum dolor sit. Sed lectus vestibulum mattis ullamcorper velit.

Manual Collapse

By default you can expand / collapse all panels manually. If you want the panel to collapse automatically when a new one is opened you can use the shortcode 'multi-panels'

Manual collapse

[awesome-accordions id='190' multi-panels= 'true']

• This is the first panel title

  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed sed risus pretium quam vulputate dignissim. Ipsum consequat nisl vel pretium lectus. Sodales ut etiam sit amet nisl purus in. Et malesuada fames ac turpis. Pretium lectus quam id leo in vitae. Mauris pharetra et ultrices neque ornare aenean. Consectetur adipiscing elit duis tristique. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Blandit massa enim nec dui nunc mattis enim ut tellus. Lacus viverra vitae congue eu consequat ac felis donec. Commodo elit at imperdiet dui accumsan sit amet nulla facilisi. Nam aliquam sem et tortor consequat id. Lacus sed turpis tincidunt id aliquet risus feugiat in ante. Imperdiet dui accumsan sit amet.

• This is the 2nd panel title

  Aliquam ultrices sagittis orci a scelerisque purus semper eget. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. In tellus integer feugiat scelerisque varius. Non pulvinar neque laoreet suspendisse interdum consectetur libero id. Egestas dui id ornare arcu odio ut sem. Sit amet venenatis urna cursus eget nunc scelerisque viverra. Libero justo laoreet sit amet cursus sit. Dolor morbi non arcu risus quis varius quam quisque id. Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Lorem sed risus ultricies tristique nulla aliquet enim. Viverra mauris in aliquam sem. Aliquet risus feugiat in ante. Sit amet consectetur adipiscing elit pellentesque. Dui vivamus arcu felis bibendum ut tristique et. Feugiat vivamus at augue eget arcu. Sapien eget mi proin sed.

• this is the 3rd panel title

  Egestas sed sed risus pretium quam vulputate. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus a. Viverra nibh cras pulvinar mattis nunc. Sem et tortor consequat id porta nibh venenatis. Vulputate ut pharetra sit amet aliquam id. Tortor condimentum lacinia quis vel eros. Malesuada proin libero nunc consequat interdum varius sit. Nisl nunc mi ipsum faucibus vitae aliquet. Lectus nulla at volutpat diam ut venenatis tellus. Ut tellus elementum sagittis vitae et. Sit amet mattis vulputate enim nulla aliquet porttitor lacus. Nisi lacus sed viverra tellus in hac. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Hendrerit dolor magna eget est lorem ipsum dolor sit. Sed lectus vestibulum mattis ullamcorper velit.

Automatic Collapse

[awesome-accordions id='190'  multi-panels= 'false']

• This is the first panel title

  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed sed risus pretium quam vulputate dignissim. Ipsum consequat nisl vel pretium lectus. Sodales ut etiam sit amet nisl purus in. Et malesuada fames ac turpis. Pretium lectus quam id leo in vitae. Mauris pharetra et ultrices neque ornare aenean. Consectetur adipiscing elit duis tristique. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Blandit massa enim nec dui nunc mattis enim ut tellus. Lacus viverra vitae congue eu consequat ac felis donec. Commodo elit at imperdiet dui accumsan sit amet nulla facilisi. Nam aliquam sem et tortor consequat id. Lacus sed turpis tincidunt id aliquet risus feugiat in ante. Imperdiet dui accumsan sit amet.

• This is the 2nd panel title

  Aliquam ultrices sagittis orci a scelerisque purus semper eget. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. In tellus integer feugiat scelerisque varius. Non pulvinar neque laoreet suspendisse interdum consectetur libero id. Egestas dui id ornare arcu odio ut sem. Sit amet venenatis urna cursus eget nunc scelerisque viverra. Libero justo laoreet sit amet cursus sit. Dolor morbi non arcu risus quis varius quam quisque id. Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Lorem sed risus ultricies tristique nulla aliquet enim. Viverra mauris in aliquam sem. Aliquet risus feugiat in ante. Sit amet consectetur adipiscing elit pellentesque. Dui vivamus arcu felis bibendum ut tristique et. Feugiat vivamus at augue eget arcu. Sapien eget mi proin sed.

• this is the 3rd panel title

  Egestas sed sed risus pretium quam vulputate. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus a. Viverra nibh cras pulvinar mattis nunc. Sem et tortor consequat id porta nibh venenatis. Vulputate ut pharetra sit amet aliquam id. Tortor condimentum lacinia quis vel eros. Malesuada proin libero nunc consequat interdum varius sit. Nisl nunc mi ipsum faucibus vitae aliquet. Lectus nulla at volutpat diam ut venenatis tellus. Ut tellus elementum sagittis vitae et. Sit amet mattis vulputate enim nulla aliquet porttitor lacus. Nisi lacus sed viverra tellus in hac. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Hendrerit dolor magna eget est lorem ipsum dolor sit. Sed lectus vestibulum mattis ullamcorper velit.

Toggle button

The toggle buttons are useful when a accordion has a lot of items and you want to be able to open/close them all at the same time

to show the toggle button you can use the shortcode with a special 'toggle' class

Example with toggle

This is an accordion with buttons activated
[awesome-accordions id='190' toggle='true']

• Expand all
• Collapse all

• This is the first panel title

  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed sed risus pretium quam vulputate dignissim. Ipsum consequat nisl vel pretium lectus. Sodales ut etiam sit amet nisl purus in. Et malesuada fames ac turpis. Pretium lectus quam id leo in vitae. Mauris pharetra et ultrices neque ornare aenean. Consectetur adipiscing elit duis tristique. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Blandit massa enim nec dui nunc mattis enim ut tellus. Lacus viverra vitae congue eu consequat ac felis donec. Commodo elit at imperdiet dui accumsan sit amet nulla facilisi. Nam aliquam sem et tortor consequat id. Lacus sed turpis tincidunt id aliquet risus feugiat in ante. Imperdiet dui accumsan sit amet.

• This is the 2nd panel title

  Aliquam ultrices sagittis orci a scelerisque purus semper eget. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. In tellus integer feugiat scelerisque varius. Non pulvinar neque laoreet suspendisse interdum consectetur libero id. Egestas dui id ornare arcu odio ut sem. Sit amet venenatis urna cursus eget nunc scelerisque viverra. Libero justo laoreet sit amet cursus sit. Dolor morbi non arcu risus quis varius quam quisque id. Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Lorem sed risus ultricies tristique nulla aliquet enim. Viverra mauris in aliquam sem. Aliquet risus feugiat in ante. Sit amet consectetur adipiscing elit pellentesque. Dui vivamus arcu felis bibendum ut tristique et. Feugiat vivamus at augue eget arcu. Sapien eget mi proin sed.

• this is the 3rd panel title

  Egestas sed sed risus pretium quam vulputate. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus a. Viverra nibh cras pulvinar mattis nunc. Sem et tortor consequat id porta nibh venenatis. Vulputate ut pharetra sit amet aliquam id. Tortor condimentum lacinia quis vel eros. Malesuada proin libero nunc consequat interdum varius sit. Nisl nunc mi ipsum faucibus vitae aliquet. Lectus nulla at volutpat diam ut venenatis tellus. Ut tellus elementum sagittis vitae et. Sit amet mattis vulputate enim nulla aliquet porttitor lacus. Nisi lacus sed viverra tellus in hac. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Hendrerit dolor magna eget est lorem ipsum dolor sit. Sed lectus vestibulum mattis ullamcorper velit.

Example without toggle

[awesome-accordions id='190' toggle='false']

• This is the first panel title

  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed sed risus pretium quam vulputate dignissim. Ipsum consequat nisl vel pretium lectus. Sodales ut etiam sit amet nisl purus in. Et malesuada fames ac turpis. Pretium lectus quam id leo in vitae. Mauris pharetra et ultrices neque ornare aenean. Consectetur adipiscing elit duis tristique. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Blandit massa enim nec dui nunc mattis enim ut tellus. Lacus viverra vitae congue eu consequat ac felis donec. Commodo elit at imperdiet dui accumsan sit amet nulla facilisi. Nam aliquam sem et tortor consequat id. Lacus sed turpis tincidunt id aliquet risus feugiat in ante. Imperdiet dui accumsan sit amet.

• This is the 2nd panel title

  Aliquam ultrices sagittis orci a scelerisque purus semper eget. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. In tellus integer feugiat scelerisque varius. Non pulvinar neque laoreet suspendisse interdum consectetur libero id. Egestas dui id ornare arcu odio ut sem. Sit amet venenatis urna cursus eget nunc scelerisque viverra. Libero justo laoreet sit amet cursus sit. Dolor morbi non arcu risus quis varius quam quisque id. Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Lorem sed risus ultricies tristique nulla aliquet enim. Viverra mauris in aliquam sem. Aliquet risus feugiat in ante. Sit amet consectetur adipiscing elit pellentesque. Dui vivamus arcu felis bibendum ut tristique et. Feugiat vivamus at augue eget arcu. Sapien eget mi proin sed.

• this is the 3rd panel title

  Egestas sed sed risus pretium quam vulputate. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus a. Viverra nibh cras pulvinar mattis nunc. Sem et tortor consequat id porta nibh venenatis. Vulputate ut pharetra sit amet aliquam id. Tortor condimentum lacinia quis vel eros. Malesuada proin libero nunc consequat interdum varius sit. Nisl nunc mi ipsum faucibus vitae aliquet. Lectus nulla at volutpat diam ut venenatis tellus. Ut tellus elementum sagittis vitae et. Sit amet mattis vulputate enim nulla aliquet porttitor lacus. Nisi lacus sed viverra tellus in hac. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Hendrerit dolor magna eget est lorem ipsum dolor sit. Sed lectus vestibulum mattis ullamcorper velit.

Implementing your design

Adding custom HTML

If you want to add your own custom accordion you can add a folder in your active theme folder with your custom template.  The themes are located in the wp-content folder on your root WordPress installation.

Open the currently active theme and create a folder named ‘awesome-accordion’. Like in the example using the default WordPress theme - Twenty Seventeen.

In the folder you just created add a new file named default.php inside this file you can add your new custom layout code:

You can add this code in the file to test if it is working:

You should see the text displayed in the frontend where you have the accordion shortcode as shown below:

This function is designed to first check if there is a custom template in your theme if not the plugin template is loaded.

To get started with creating a custom template for the accordion, you can copy the existing code from the plugin; default template located in the following path inside your plugin files /public/partials/cards/default.php

Multi-language with WPML

How to translate “Custom Post Types"

To translate accordion post type you should use the WPML plugin that allows you to translate all custom post types that come with your themes or plugins.

To set the accordion custom post type, you will need to install and activate WPML’s core plugin (Sitepress multilingual CMS) along with the Translation Management add-on.

1. 1. Navigate to WPML -> Translation Management and click on the Multilingual Content Setup tab and scroll down to the Custom Posts section.
   2. Set the custom post type Accordion to be translated.
      

      

   3. Click on the Save button.
   4. Navigate to Accordions -> All Accordions. Click on the + icon to add your translation
      

      

   5. Click on the Copy content from English button.
      

      

   6. Add your translated text and click on the Publish button

If you are running a multilingual website, you will want to translate your custom post types, custom field type, and custom taxonomies. WPML can translate all these elements efficiently.

Awesome Accordions Shortcode

Awesome accordions come with multi-language support, you can create and translate accordions in your preferred language. Awesome accordions plugin supports WPML translation and you can display accordions in different languages by simply changing the ID parameter in the shortcode.

After creating the accordion a shortcode is generated that you use to publish the accordion in pages and posts. The shortcode has an Id that is equal to the page ID assigned to the specific accordion custom post when it is created:

To publish the accordion you should copy the shortcode as shown in the image above and paste it in the page or post where you would like to display the accordion.

Multi-Language Accordion

To publish multi-language accordion you should begin by creating the accordion and translating it to another language.

For example, you can create the accordion in English then translate to Dutch using the WPML plugin. Click on the add sign to add the translated version of the accordion.

After the translation, you have two similar accordions with different page IDs. You can switch between the different translations using the menu on the top as shown below:

Publishing Multi-Language Accordions

You should get the page ID of each of the different version of the accordion that has been created and translated and use it in the awesome-accordions shortcode.

Create a new page and add the shortcode replacing the ID with the respective page ID of the accordion you wish to display. As shown below:

For the translated accordion you need to include the original shortcode published in the step above and the corresponding shortcode with the ID of the respectively translated accordion as shown below:

How the Shortcode Translation Function works

The post with the EN shortcode is displayed while for the other versions the shortcode functions check if the translated ID example FR-ID exists and if it does the translated version is shown and if not the English version is displayed.