You are here: Home / Wordpress Plugins / JQuery Expanding Box

JQuery Expanding Box

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

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!

Comments

  1. 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

  2. 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

  3. 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!

  4. 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

  5. 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

  6. 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

  7. David Brugge says:

    I too vote for shortcode within shortcode. That would make this darn widget very handy indeed.

  8. 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

  9. 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.

  10. Hello , How does this plugin work? cos I can find the shortcode anywhere. What are the steps after activating the plugin?

  11. 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)

  12. 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

  13. 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

  14. 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

  15. Christian Frohn says:

    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

  16. 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

  17. 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

  18. 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

  19. 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

  20. Perfect, exactly what I’ve been looking for, Thanks.

  21. This great, all the other plugins I’ve tried require you to edit the WP php files, this works straight out of the box!

  22. Hi

    Would you be available to modify the style of the plugin slightly and integrate into a WordPress Theme?

    Handre

Add Comment Register



Leave a comment

*


one + 4 =

What Our Clients Say

James AgateJames Agate
Managing Director
Skyrocket SEO

Chris and his team are patient, responsive and have a sense of humour even when I asked them to change something that I'd insisted upon initially. Would definitely recommend to anyone looking for an awesome WordPress development and design team.

Richard SedleyRichard Sedley
Director
Seren

Hit Reach were really easy to deal with and provide exemplary service. They implemented exactly what we wanted and guided us when we were uncertain about the solution. A highly professional and cost effective solution – what's not to love.

Roger GreenRoger Green
Director
Best4tyres.com

Hit Reach got it absolutely right. They embraced the challenge and complexity of the site, and exceeded expectation with quick response times and great service.

Our Key Services
Menu