Shortcode Display Problems in Tabs, Accordions, or Sliders

Updated on September 11, 2017

Our themes have many different kinds of shortcodes that you can use on your website, and with the help of the Visual Composer it is possible to mix them with each other here and there.

Shortcode Display Problems

Please consider though that mixing shortcodes is a tricky thing and in some cases they may fail to render correctly on the front end.

The issue

Some shortcodes need Javascript to calculate their height or other characteristics such as visibility on the fly, due to the responsive nature of our themes. This is a good point but also has its drawbacks. It will cause the shortcodes either not to show or to show incorrectly on the front end if you add them to other shortcodes that hide them on page load.

An example of this is Advanced Google Maps. It needs Javascript to calculate its height, but once added to Tab, Toggle, Accordion or Slider (since it wasn’t originally there), then it will be hidden at the initial state, which is on page load. Then once you click on the tab, accordion, or slide which contains Advanced Google Maps, it will either not show or will show incorrectly, since Javascript originally read it as hidden and set its height to 0.

Try to keep the content of shortcodes like tabs, toggles, FAQs, or sliders as simple as possible and not to use too fancy shortcodes which need height calculation on the fly.

Did this answer your question?