Table of Contents
A) Description – top
Show-Hide/Collapse-Expand + FAQ allows you to easily manage the amount of content shown to user upon entering your website. Free your pages from clutter and give your website a stylish minimalistic look and feel. You will find it handy for grouping content, composing FAQs, collapsing long lists and expanding them on click, providing hidden answers to questions, organizing your widgets more efficiently, and lots more. Inserting a shortcode is done via a handy tinyMCE button in your WordPress Editor. You will configure the look of your button/hyperlink on the fly and will be able to change it later using the provided shortcode parameters.
B) Main Features – top
- Show/Hide ANY content*
- Initially show content as collapsed or expanded
- Collapse/Expand using jQuery Effects (blind, fold, highlight, slide)
- Set custom animation speed
- Add your custom JS functions to onclick events
- Collapse/Expand lists
- Easily add FAQs
- Add hidden answers to quizzes (answer opens on button click)
- Collapse widgets to declutter sidebars
- Save space on pages by grouping the content under expandable headings
- Use hyperlinks or stylish pure-css buttons
- Style every link/button individually
- Use icons for your buttons or in front of your links
- Nest up to 3 levels of collapsible content
- Easily customize the settings and insert the shortcode with a TinyMCE button
- Use in sidebars by inserting the shortcode with needed parameters
- Regular updates
- Great support
* We tested our plugin thoroughly, but if you have issues with any type of content, please let us know.
C) Installation – top
- Upload the plugin files to the ‘/wp-content/plugins/show-hide-collapse-expand-plus-faq’ directory.
- Activate the plugin through the ‘Plugins’ screen in WordPress.
D) Quick Start – top
Step 1. Go to Tools>Show-Hide/Collapse-Expand and select the Effect for displaying hidden content and enter Custom animation speed in milliseconds. The default value is 400ms. Values under 400 ms will give you faster transition, values above 400 will provide for slower and smoother transition. Click the Preview button to see the selected effect and speed in action.
Step 2. Go to a post/page where you would like to collapse/expand content. Select the content that you wish to be collapsed and click the Insert Collapse-Expand shortcode button in your editor.
Step 3. In the Insert Collapse-Expand shortcode popup make the selections that will suit your needs:
- Select the type of control to expand/collapse content. The options are: Button (orange) | Button (orange) | Button (orange) | Button (orange) | FAQ Link | Simple Link | Inline Link | Link In List.
- Select how you would like to initially display your hidden content when the page/post is loaded. The options are: Open | Closed.
- Select the color of your hyperlink. If you choose to collapse/expand the content using buttons, this will be the color of the text on the button. You can select any suitable color or enter any suitable hex value, like #ffffff for white color.
- Specify labels for expanding/collapsing content. If you use buttons, this will be the text displayed on the button. If you use FAQ Link option, this will be the text displayed as a question while the answer will be the text you selected in the editor.
- Select the icon that will be displayed before the hyperlink/button text. The options are: No icon | Arrow Down | Eye | Zoom | Plus.
- If you are using one show-hide shortcode inside another (e.g. for creating expanding options inside the hidden content), select the This shortcode should be nested in another shortcode checkbox.
- Alternatively, you can also specify inline CSS rules and custom JS functions that will be fired on the “onclick” event of your hyperlink/button. This is useful for e.g. tracking behavior of visitors on your website.
Step 4. Click OK to insert the shortcode with all your selected parameters into the Editor.
E) Frequently Asked Questions – top
Can I insert the same shortcode into a post and a sidebar widget?
Yes, you can use the same shortcode multiple times on the same page.
How do I nest shortcodes inside one another?
For inserting level 2 shortcode, please check the “This shortcode should be nested in another shortcode”checkbox or use [bg_collapse_level2] shortcode. For level 3, please use [bg_collapse_level3] shortcode.
Will my other shortcodes work inside your shortcode?
Yes, we did our best to make them work. Some shortcodes (like Google Maps plugins shortcodes) might behave strangely, we recommend using our Google Maps – Simple Pins plugin if you need to hide your Google maps. If you have any issues, please let us know.
What are presets? How do I use them?
Presets allow you to optimize your workflow with Show-Hide/Collapse-Expand and minimize the time you spend selecting options each time you insert the shortcode. Great thing about presets is that when you decide to change the look and feel of your shortcodes, you will only need to do it once on the Presets tab and all the shortcodes on your website done with the preset will be updated. Plus you can override any shortcode parameters set in the preset by adding them to your shortcode upon inserting.
I don’t want to use animation, can I turn it off?
Sure. Go to Tools->ShowHide/CollapseExpand screen (Settings tab), clear the Enable jQuery UI effects checkbox and set Custom animation speed (ms) to 0
F) Screenshots – top
Collapse long lists.
Choose effects and animation speed.
Great for quizzes.
Once again, thank you so much for purchasing this plugin. As noted at the beginning, we’d be glad to help you if you have any questions relating to this plugin. If you have a more general question relating to the plugin, you might consider asking your question in the “Comments” section.