Tabbed interface with "Base" theme

Collapsible Widget Area

Description

This plugin allows you to combine multiple widgets into a single tabbed/accordion-style interface in your theme.

Usage

To use this plugin, simply drag widgets into the “Collapsible Widget Area” widget area in Appearance -> Widgets within your admin area. Once you’ve done that, reload the Appearance -> Widgets page and drag the Collapsible Widget into the sidebar in which you want it to appear.

Options

  1. Within the Collapsible Widget itself, you can specify whether you want to use a Tab interface or an Accordion interface.
  2. Under Settings -> Collapsible Widget Options, you can choose the jQueryUI theme you want to apply to the collapsible widget container. All of the included jQueryUI themes are hosted on Google’s CDN. If you already have a jQueryUI theme included in your WordPress theme, you can choose “None” from the option selector, and no extra stylesheet will be included for this widget. If you want to include your own jQueryUI theme, there are two ways you can do so:
    1. Use the collapsible-widget-ui-theme filter to specify the exact URI of the stylesheet you want to include.
    2. Use the collapsible-widget-theme-list filter to add or remove items from the list of available themes. The parameter sent through this filter is an associative array of the available themes. If the theme is hosted on Google’s CDN, just the keyword is needed as the array key (for instance, the keyword for the “UI Lightness” theme is “ui-lightness” and the keyword for the “Base” theme is “base”). If the theme is hosted elsewhere, the entire URI to the stylesheet should be used as the array key. The array value should be the human-readable name of the theme.

Installation

Automatic Installation

The easiest way to install this plugin automatically from within your administration area.

  1. Go to Plugins -> Add New in your administration area, then search for the plugin “Collapsible Widget Area”.
  2. Click the “Install” button.
  3. Go to the Plugins dashboard and “Activate” the plugin (for MultiSite users, you can safely “Network Activate” this plugin).

Manual Installation

If that doesn’t work, or if you prefer to install it manually, you have two options.

Upload the ZIP

  1. Download the ZIP file from the WordPress plugin repository.
  2. Go to Plugins -> Add New -> Upload in your administration area.
  3. Click the “Browse” (or “Choose File”) button and find the ZIP file you downloaded.
  4. Click the “Upload” button.
  5. Go to the Plugins dashboard and “Activate” the plugin (for MultiSite users, you can safely “Network Activate” this plugin).

FTP Installation

  1. Download the ZIP file from the WordPress plugin repository.
  2. Unzip the file somewhere on your harddrive.
  3. FTP into your Web server and navigate to the /wp-content/plugins directory.
  4. Upload the collapsible-widget-area folder and all of its contents into your plugins directory.
  5. Go to the Plugins dashboard and “Activate” the plugin (for MultiSite users, you can safely “Network Activate” this plugin).

Must-Use Installation

If you would like to force this plugin to be active (generally only useful for Multi Site installations) without an option to deactivate it, you can upload the contents of the collapsible-widget-area folder to your /wp-content/mu-plugins folder. If that folder does not exist, you can safely create it.

Frequently Asked Questions

My widget title should have a link/image, but it doesn’t. Why not?

In order to create the handles for the accordions/tabs, the titles have to be wrapped in links to those items. Since you can’t wrap a link inside of a link, this plugin strips any HTML from the widget title before rendering the collapsible interface.

Does this work on multisite installations?

Yes. This plugin is set up to work in any of the following situations:

  • Single site installs
  • Multisite installs where the plugin is activated on a site-by-site basis
  • Multisite installs where the plugin is network activated
  • Multi-network installs (some multi-network functionality of this plugin will only work if you have our multi-network function files installed)

Can I have more than one Collapsible Widget Area?

Unfortunately, not yet.

Can I insert the Collapsible Widget Area into a post or page, instead of using it in a widgetized area?

Theoretically, yes. However, in order to do so at this time, you will need to use a separate plugin that allows you to insert widgets into posts/pages. A shortcode for this plugin might be coming in the future, but it’s not ready yet.

Can I use the Collapsible Widget Area in my theme, rather than using it in a widgetized area?

Again, theoretically, yes. You should be able to use the_widget() to insert this directly into your theme, but that has not been tested, and it would probably take some effort to get it working correctly.

How does the plugin create the tabs/accordions?

This plugin uses jQueryUI (either the Tabs feature or the Accordion feature) to implement the tabs/accordions. A little extra JavaScript is thrown in just to make sure the elements are in the correct places before trying to apply the tab/accordion interface.

How does the plugin style the tabs/accordions?

Since this plugin uses jQueryUI, it uses the same style definitions that any other jQueryUI accordion/tab interface would use. You can choose to use any of the existing jQueryUI themes (all hosted on Google’s CDN), you can leave out custom styling altogether (for instance, if you already have a jQueryUI theme pulled into your theme, or if you have specific style definitions for jQueryUI widgets baked into your theme’s stylesheet), or you can apply a custom theme by hooking into the collapsible-widget-ui-theme filter and returning the URI of the CSS file you want to use.

What filters does this plugin introduce?

  • collapsible-widget-ui-theme – the parameters sent to this filter are: 1) the URI of the CSS file being used (or a blank string if “none” was selected from the options) and 2) the theme option that was selected in the plugin’s settings
  • collapsible-widget-area-args – the arguments sent to the register_sidebar() function when registering the Collapsible Widget Area sidebar
  • collapsible-widget-theme-list – an associative array of the jQueryUI themes available for use with this plugin: The keyword used in the Google CDN URI (or, the full URI to a custom theme) is used as the key, and the human-friendly name of the theme is used as the value for each array item.

Screenshots

Changelog

0.2a

  • Modified JavaScript to strip HTML from widget titles before rendering collapsible interface
  • Modified JavaScript to add first-tab and last-tab classes to first and last items in collapsible area

0.1a

This is the first version of this plugin

Download

You can download the latest version of this plugin from the WordPress plugin repository.

26 thoughts on “Collapsible Widget Area

  1. Joe

    Hi – this is incredibly useful.

    One question:

    In accordion mode, Is it possible to control which widget is in the open state? As it stands it defaults to the top widget, but I would like to be able to create a link to a page with the third widget open.

    Many thanks

    Joe

    Reply
  2. SteveHorn

    Like Joe, I also would like to find a way to specify which tab shows to be open on page load. If the bottom tab is open on load, it would appear to be more like a menu. Or perhaps if all were closed. As it is, with a narrow sidebar, the open panel’s content pushes the other tabs down so low, they can easily be missed.

    Also, echoing Joe, this plugin is very useful. Nice work!

    Reply
  3. SteveHorn

    Ah….Google to the rescue:
    http://docs.jquery.com/UI/Accordion
    I find that editing the collapsible-widget-area/scripts/collapsible-widgets.js works for me.
    In the second if statement, I added two lines of code which now reads:
    if ( collapsible_widget_area.type == 'accordion' ) {
    $( '.collapsible-item .widgettitle' ).each( function() {
    $( this ).html( $( this ).text() );
    $( this ).wrapInner( '<a href="#' + $( this ).closest( '.collapsible-item' ).attr( 'id' ) + '" / rel="nofollow">' );
    $( this ).insertBefore( $( this ).closest( '.collapsible-item' ) );
    } );
    $( '.collapsible-widget-container .widgettitle' ).first().addClass( 'first-tab' );
    $( '.collapsible-widget-container .widgettitle' ).last().addClass( 'last-tab' );
    $( '.collapsible-widget-container' ).accordion();
    $( ".collapsible-widget-container" ).accordion({ collapsible: true });
    $( ".collapsible-widget-container" ).accordion({ active: 6 });

    It’s the last two lines that enabled all to collapse and the active panel to be any number I specify. If the number is larger than the number of panels available, all panels load in the closed state. Hope this helps.

    Reply
    1. Curtiss Grymala Post author

      The current development version of the plugin allows you to set the “collapsible” property on the accordion. It doesn’t yet include the option to choose which tab is active, though.

      In order to avoid your changes being overwritten by plugin updates, I’d recommend that you put the extra lines in a separate JavaScript file (in your theme’s main JS file, for example).

      Reply
  4. Litbea

    I’ve find this plugin very useful, but I found a problem from one day to another: every accordion is now 2 lines tall, while they were 1 line at the beggining.
    I’ve also noticed it happens to you in this web page aswell. Any clue about the reason?
    Very nice work!

    Reply
    1. Curtiss Grymala Post author

      Litbea – It looks like something has changed in the base stylesheet for jQueryUI. The .ui-icon class has a display property of block, causing it to push the title of the accordion item down to its own line.

      If you add the following CSS to your own stylesheet, that may fix it:

      .ui-icon { float: left; }

      Reply
      1. Curtiss Grymala Post author

        Nevermind what I just said.

        It looks like there were significant changes to the way Tabs and Accordions are styled between jQueryUI 1.8 (as included in WordPress 3.1-3.4.2) and jQueryUI 1.9 (as included in WordPress 3.5-beta). This plugin was set up to use the latest version of the jQueryUI theme stylesheets, so it was using the stylesheet for jQueryUI 1.9, even on WordPress 3.4.2, which was causing style issues.

        I am updating the Collapsible Widgets plugin right now to identify which version of jQueryUI is being used, and call the appropriate stylesheet for the chosen theme. It should be available as an update within the next few hours.

        Thanks for making me aware of this.

        Reply
  5. Litbea

    Updated and already working! Thanks for your work. You can check it out at http://www5.uva.es/etsiiaa

    I’ve given you 5 stars in WordPress plugins page, what I would like to buy you a beer aswell for the time you’ve saved me. Is there any other link different to the UMS to contribute, or can you tell me any “Please allocate my gift to” section of your interest?

    Regards from Spain

    Reply
  6. Jessica

    I love this plugin and am redesigning my website and am including it in it. Here is a link http://magnifique-mode.com/ I love the look of the plugin except that I would like to remove some of the padding. Here is what i could gather from the using inspect elemnt .ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; } I would like to remove .5em .5em .5em .7em to give it a not so bulky look. Can you help me with this?

    Reply
  7. Johan Horak

    Hi This is a cool plugin. Thanks.

    A question: I cannot get the accordion style to work. From Settings I get a list of different themes to use. That’s all. http://my.capeholidays.info/

    A suggestion: This will probably take some coding but I saw another tabbed widget where the tabs are icons. This helps to reduce space for tabs.

    Reply
  8. Edie Houston

    The plugin works great. Unfortunately, the links within the accordion display horizontally not vertically. Using the included widgets outside of the Collapsible area, they display normally. I have tried adding the appropriate styles in my stylesheet but nothing seems to work. Ideas?

    Reply
  9. Lisa | LLworldtour

    Hi-
    I have a WP blog with the Thesis Theme.
    I have the collapsible widget.
    The problem: the widget no longers collapses…it just stays open all the time. My WP and the widget are the latest versions.
    Please help!
    Thanks!
    Lisa

    Reply
    1. Curtiss Grymala Post author

      Lisa,
      Do you have a link to a page showing the issue? On your site, I’m seeing the collapsible widget area, but it’s set to use a tabbed interface instead of an accordion interface, so collapsing entirely is not an option. You can only completely collapse things with the accordion interface. Thanks.

      Reply
      1. Lisa | LLworldtour

        Hi-
        It seems to be a compatibility issue with the NRelate plug-in. I’ve just activated it and now you can see the the non-collapsing issue i’m talking about…all tabs are open.
        Plus…my homepage slider isn’t working.
        Thanks for your help!

        Reply
        1. Curtiss Grymala Post author

          Lisa – What plugin are you using to cache your site?

          I’ve tried activating nrelate and Global Flash Gallery on this site, and could not reproduce the issue you’ve been experiencing.

          Also, can you try editing your nrelate settings and using the “No JavaScript” version to see if that makes a difference?

          If nrelate is stopping both my plugin and your home page slider from working properly, I’m guessing it must be some sort of JavaScript error within the nrelate plugin, but I haven’t been able to find anything obvious that would cause a problem like that. Thanks.

          Reply
  10. Niall Shaw

    I have managed to arrange the tabs as required in my sidebar, but have two issues.

    Firstly, I cannot get accordion to work at all, other than showing the titles.

    Finally, when I am logged into WP as admin, the sidebar looks fine. When I log out to checl the page, it shows a previous (incorrect) version of what I had done.

    Help!

    Reply
    1. Curtiss Grymala Post author

      What plugins do you have active on your site? The second issue you mention sounds like it might be a caching issue, not necessarily related to the Collapsible Widget plugin. The first issue sounds like it might be a theme or plugin conflict (potentially calling the wrong version of jQuery or something). Do you have a link to the site on which you’re trying to use this widget?

      Reply
  11. zhoel

    Hello curtiss

    First of all, I really thank you for your great plugins. My name is Zulkifli from Indonesia. I had a problem in using your plugin. I tried to grouping some of my backlink text on my right bottom website, so look not so messy. But after I install and I think I had use it as your instruction, but the result is not like it’s suppose. I don’t see those backlink in accordion nor tab (I had tried both options). Can you help me where did I wrong please? my website: http://modifmotor1.com

    Thank you very much in advance for all your help and kindness

    Best Regards,

    Reply
  12. Leah

    Hi – I’ve been using your collapsible widget for a while now and really really like it. I just updated to WordPress 3.8 and it no longer works. Do you have plans to update it to be compatible with wordpress 3.8?

    Reply
  13. Sid

    The Plugin is really good. I’ve tried in my site http://bushireinlondon.co.uk/ but how to remove the extra space after the content which is showing.
    Ex : In Search this site, when you click on it a long box opens after search box with empty space

    I need help to remove that empty space to make it look shorter till the content only to showcase my

    Reply
  14. chinzy

    Hi Curtiss

    I just would like to ask whether there’s any way to increase space allocated for dropdown
    widget content?
    Erm I’ve tried to insert size chart img inside dropdown but appears too small.
    Thank you.

    Regards
    Chinzy

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *