VERSION 1
Download Plugin
View Stats
This plugin creates a shortcode to add an expandable box to show and hide the selected content on a post or page with customisable show and hide links.
This is the perfect solution for content such as FAQs and Spoilers, where you may not want to show the content to begin with, but prompt the reader to show the content instead.
Usage
The plugin comes with two shortcodes for use inside a posts and pages; these are: [ dropdown_box ] and [ dropdown_box_toggle_all ].
- dropdown_box is used to add a single dropdown box to your content, it supports 4 attributes:
- expand_text – This is the text which is shown AFTER the verb to show or hide, for example “More Information”
- show_more – This is the verb shown before the expand text to prompt a user to see more content, for example “Show”
- show_less – This is the verb shown before the expand text to prompt a user to see less content, for example “Hide”
- start – This sets the default state, and has 2 usable values, “Show” to start the box visable, and “Hide” to show the box hidden
Your content is added inside the shortcode, for example [ dropdown_box ]This is my content inside the dropdown box[ /dropdown_box ]
The content insider the box is open to standard WordPress formatting.
- dropdown_box_toggle_all is used to add links to show/hide all drop down boxes on the page, this shortcode can be used in more than one place on the page and has 3 attributes
- hide – This is the text used to prompt a hide all, for example “Hide All”
- show – This is the text used to prompt a show all, for example “Show All”
- Separator – This is the separator between the show and hide links, for example “|”
This shortcode is self closing, so can be written as [ dropdown_box_toggle_all / ] or [ dropdown_box_toggle_all ](without the spaces).
This plugin also adds a small CSS file (352 bytes) to wp_head to control the styling.
Usage Examples
A simple usage example to get you going.
dropdown_box_toggle_all
[ dropdown_box_toggle_all hide="Hide All" show="Show All" separator="|" / ] (without spaces next to the [ and ]) creates:
dropdown_box
[ dropdown_box expand_text="Information" show_more="More" show_less="Less" start="hide" ]This is my content and it will start hidden[ /dropdown_box ] (without spaces next to the [ and ]) creates:
Frequently Asked Questions
Show All Answers|Hide All Answers
What are the plugin requirements to work?
What browsers has this been tested in?
I like your work, can I donate?
I still have a question
What have you used the plugin for? what do you think of it? Tell us in the comments!
James Agate
Roger Green
Want to chat about your project or requirements? If you call now you can talk to me directly:
Hello,
I hope you can help me. It´s possible to put several boxes in one expanding box? I’ve tried it, but it didn´ work.
Thank you very much.
Regards,
Dominic
Hi Dominic,
It currently isn’t possible to use a shortcode within a shortcode with this plugin,
It is something we will look into adding into the next update.
Thanks,
Jamie
Thanks for the plugin!
How can I get it to close when someone click outside of the dropdown (body of web page)?
Hi Bobbie,
This is currently not a supported feature, however the close box function is called showhide(a) where A is the anchor that was clicked, and another function called hideall() with no parameters closes all boxes,
Perhaps you could use calls to these functions to make your own Jquery script to close the box on body click
Thanks
Jamie
Hi Jamie,
It’s more easy add a options panel for configure default settings. For example, configure in options panel:
Default Start= “Show”
Default Show_more= “”
Default Show_less= “Less”
Then you can use …
[ dropdown_box expand_text="Information" ]This is my content and it will start hidden[ /dropdown_box ]
instead write everytime …
[ dropdown_box expand_text="Information" show_more="" show_less="Less" start="Show"] [/dropdown_box ]
You only write atributes when you want change “default options”
Thanks!
Hi Jose,
This is something we are looking to add in down the line, as we were initally just looking to get it out and see the reception it got
Thanks,
Jamie
Thanks for this great plugin!
Is it possible to change the colour of the plus?
Hi Bogi,
The images can be changed by apply CSS to the selector and setting the background to your own image.
The items you want to change are:
a.showmore>span.view_modifier.show
a.showmore>span.view_modifier.hide
it may require the use of the CSS !important rule though
but if you apply it in your theme code, it should be future update proof 
Thanks
Jamie
Thanks a lot for this helpful answer Jamie!
I really don’t know much about CSS… …YET
But I’ll give it a try… wish me luck!
Bogi
well, half hte luck: the plus is in my logo colour now, but the minus still appears in your blue :/
Do you have any advise for me how ti figure this out?
Bogi
Do you have a sample page to see? email me @ jamie.fraser@hitreach.com
Thanks
Jamie
Works fine. Thank you.
Can you add an option for the show_more and show_less to appear on the same line as preceding text.
Example: What to bring: +show
instead of What to bring:
+show
Hi Eshin,
you should be able to make the container of the +show be displayed inline by using CSS instead of as a block, this will add it to the same line as the preceeding text.
Thanks,
Jamie
Hi Jamie! I changed the CSS file and defined display as inline but nothing changed… can you please help? Thank you!
Hi Joana,
What is the url you have changed the plugin on?
Thanks,
Jamie
URL is http://protocolos.mdsinsure.com/redunicre/ I changed the file jquery-dropdown-box.css to a.showmore{display:inline;font-size:12px;height:20px;line-height:20px}
And what is it you are trying to achieve with this plugin?
thanks
Jamie
Could you give me an email address so I can send a print screen to you?
Hey Joana, you can send it to chris.gilchrist@hitreach.co.uk
Hi,
Absolutely love your plugin, but I have a question in regards to user searchs. I have a page with about 30 jquery expanding boxes. They are named section 1 to 30 and each contains a unique paragraph. My question is if a user does a search is it possible to have say section 3 expand in the search result and display the content that was searched for?
Currently when a search is done is shows the correct page but all expanding boxes are in the closed position so its hard for a user to know which expanding box contains the info searched for.
Thanks,
Quincy
Hi Quincy,
Depending on how you do the search, you could check the content, then if you find the matching text, make the box open.
if you are doing it via PHP you can make it output the parent with shortcode with the default as being shown, if you are doing it via javascript you can call the function to make the dropdown happen.
thanks
Jamie
I too vote for shortcode within shortcode. That would make this darn widget very handy indeed.
RE: IE9 Youtube Bug?
Thanks for the fantastic plugin it works just awesomely!
I’m having issues with IE9 inside the dropdown box however. Site is http://www.blazingempire.com (you can see it just on the home page). Since this renders fine in all over browsers can I assume it’s a bug?
Hi Justin,
The issue with the Iframe still showing is indeed a bug with IE 9 rather than the plugin itself.
there may be fall back fixes available such as setting text-indent:-9999px on the box when it is closed however.
Thanks
Jamie
Hi guys,
I’m looking for a solution to add number of JQuery Expanding Box in same line.
For example:
——————————-
1) question #1
solution hint comment
——————————-
solution,hint,comment- will be opened in different boxes.
Does anyone know a good plugin for it or how it possible to adapt the current one.
Hello , How does this plugin work? cos I can find the shortcode anywhere. What are the steps after activating the plugin?
Hi Clef,
have you tried reading the plugin’s readme file? all of the information is there.
Thanks
Jamie
I’m having a problem with the expanding boxes, in that they won’t expand anymore (they did work previously). I’ve tried deaactivating plug-ins installed since the problems began, but all I’m getting is the ‘+’, but no expansion when clicked upon.
Perhaps I am being dunce, but any tips are welcome
Jamie
(from one Jamie to another)
Hi Jamie (cool name
)
It could be that there is a fatal JavaScript error elsewhere on the page,
What is the url of the page you have used the plugin on?
Thanks
Jamie
Hello Jamie,
Sure , i did it. I try it but it displays the code instead. I can you help he out pls. I just need more guidance, pls
Hi Clef,
What is the page you are using the shortcode on?
Thanks
Jamie
Hi,
can I have an image as drop down source?
dropdown_box expand_text=”Information” to have the image there, not text. Is it possible?
Thank you for your help and usefull pluign.
Michal
Hi Michal,
I have not tried, but I’m assuming you can, as long as the quotes don’t cause a conflict,
why not give it a try and let us know how you get on
Thanks
Jamie
I already tried to but it was not working… may be I have to use some special code? Not html code?
Hi Michal
It would appear that all html gets encoded before being outputted.
I will update the next version of the plugin to have support for images.
thanks
Jamie
Like your Plug-in – works Great, But can I use an Image Button to Show The Information?
so something like this: ( but this did not work. )
==============================================================================
=============== With something like this Below it =============================
[dropdown_box expand_text=" " show_more="To see Answer Click here" show_less="To hide Answer Click here" start="hide"]This
is my content and it will start hidden[/dropdown_box]
===============================================================================
Please Let me know Thanks Tom
Hi Tom,
It appears that some of your comment has been stripped out.
the ability to have images in the show_more and show_less text has been built into the next release of the plugin which is currently in testing.
Thanks
Jamie
Hi, is it possible to modify the code / add an option , that one dropdown closes when you open another one?
Hi Christian,
Good suggestion, we are actually on pre-release testing for an update for this plugin, however I will add it in as a last minute item (credited of course
)
Thanks
Jamie
Hi Jamie,
The plugin doesn’t work on my website. Clicking on the button, the page jumps up to the top. You can see it in this post: http://exina-art.com/beastly-by-alex-flinn/
Would you please help me to solve this problem?
Exina
Hi Exina,
The plugin doesnt work as there is a script error in another of your plugins “J-Shortcodes” which is causing JavaScript to stop executing
Try disabling the plugin causing the issue and seeing if that fixes your problem
If you need more information about the error please contact me
Thanks
Jamie
Hi Jamie,
I am very much a beginner with html and wordpress. I am trying to construct a web site and your plug in solves a number of problems. But I have a number of questions:
1) Is there a shortcode I can use to add this text expand or do I have to manually add the code in each time?
2) In another project I want to create an online list of instructions. For experienced people it will be a simple list – Step 1, Step 2, etc.
This gets close to what I want:
[dropdown_box expand_text="Step 1" show_more="" show_less="Less" start="hide"]This is my content and it will start hidden[/dropdown_box]
[dropdown_box expand_text="Step 2" show_more="" show_less="Less" start="hide"]This is my content and it will start hidden[/dropdown_box]
Is it possible to change the font and the colour of “Step 1″, “Step 2″ and the content?
3) In the expanded “text” I wanted to add hyperlinks, popups etc. I get the impression this is not possible now. Will it become possible soon? If so when? Can you suggest an alternative way of achieving this?
Hi Dave,
The code itself is already a shortcode, so it appears you are asking if there is a shortcode to add the shortcode?.
The styling for the items can be overwritten using your theme’s stylesheet if needed.
Thanks
Jamie
I tried Text Expander plugin before settling for JQuery Expanding Box. When I activate that plugin a icon appears above Visual and Html editors. If I hit it a dialog appears and I can enter the expansion text. Nothing similar appears when JQuery Expanding is activated. So I type in the code? Is that how I enter the shortcode?
Hi Dave,
At this point in time, we do not add an icon to the TinyMCE toolbar, so you would need to add the text manually yes, if enough people request a button to be added though, we will add one
Thanks
Jamie
Hi,
I am using this great plugin on the website http://ubfb.de/marktplatz/ma/ but it does not work. I tried it on a different website and it worked just perfect.
I would be pleased if you gave me a hint to solve the problem.
Thank you so much.
Regards,
Matthias
Hi Matthias,
The plugin isn’t working on this page as there is an error with another script.
The script causing the issue is JQuery.superfish() because the required script for superfish is missing.
Either include the superfish core script, or remove the superfish usage
I hope this helps,
Jamie
Thank you for your fast response!
btw: great plugin!
Hi Jamie
Thanks for to cool plugin. I’ve got an employee / staff page set up using it and the bios are expanding nicely. My Challenge is that I’d like to limit it to opening only one at a time. The single_open=1 option doesn’t seem to be working. is it that, or single_open=”true”? And also does it have to be on each of the 5 expanding boxes on the page? Maybe there is another way to get them to be a group, but I didn’t see any way to name them.
Thanks!
Rich