jidd

Collapsible Widgets Plugin

Want to know how the pretty collapsible effect is done on my sidebar widgets? It’s pretty simple, generic, and entirely jQuery.

This is the most simple plugin I have ever written, and it does all that you see in my sidebar with the jQuery library that comes pre-installed with WordPress. It also comes with two jQuery plugins for parsing JSON and dealing with cookies.

This plugin can of course can be extended to be so much better, but this is the basics. In order for it to work, your WordPress theme must use the CSS class “.widget” for this plugin to identify them. Like I said, there’s much that can be done. So if you want to make this thing better, I encourage it, and would love to see it if you do. I’d just like to think I laid the groundwork…

Icon

Collapsible Widgets Plugin

1 file(s) 5.84 KB
Collapsible Widgets Plugin

Be kind, don’t do anything your mom wouldn’t do.

A little note on jQuery and the slideToggle method I am using to slide the content of the widgets. jQuery has a problem with reading the correct height on an element containing wrapped text, using padding, or using margins. It still does the slideToggle, but you will see a jump in the animation. The amount of jump depends on the amount of those things in use or happening inside the element being toggled.

As a workaround, I suggest this:
Don’t use margins or padding directly on the element being toggled. Instead create an inner element and apply your margins or padding to that, also within this inner element, don’t worry about text wrapping either. Now with this inner element in place, put another element like a div or whatever also within the element being toggled below the inner element. Give this new element a style of “clear: both” pushing it to the bottom below the inner element, and making sure that the parent element”s height is correct for jQuery.
This can all be done within WordPress’ register_sidebar function, with the “before” and “after” arguments.

I may do more with this plugin myself, but it’s not in the cards for now.

Toodles.

Posted

in

, ,

by

Jim Isaacs

Tags:

, , , , ,

Comments

13 responses to “Collapsible Widgets Plugin”

  1. James Avatar
    James

    Jim, i’m in your websites, stealing your widgets.

    But seriously. Thanks for this kick ass plugin.
    You’ll see how I implement it, as I get my blog a bit tighter.

    It’s live BTW.

    Reply
  2. Preston Avatar
    Preston

    Jim,

    Great plugin! This thing is awesome! Quick question — is there a quick way or a simple piece of code I can add to a widget in my sidebar that I DON'T want to be collapsible? Really appreciate the help. Thanks again!

    P

    Reply
    1. jimisaacs Avatar
      jimisaacs

      Preston,

      The javascript used to select the widgets is all in the file "jquery_collapsible_widgets.js"
      Within this file you will see an "each" loop code block. Right now without a user interface to put some sort of strings in for exclusion, or anything else for that matter. You will have to modify the code yourself.
      For exclusion it's best done with either an id or a class. Since in the future, I would want to enable this code to target anything even outside of widgets, I would do it with a generic class.
      BUT, since this plugin is so empty and non-friendly in this form I will give you methods that will simply help for now.

      For the id method, after this line of code in the file I mentioned:
      var id = widget.attr("id");

      Add this new line of code, where 'myWidgetID' is the id of the widget you want to exclude:
      if(id == 'myWidgetID') continue;

      Hence if you wanted to exclude the recent comment widget, look at your page source to find that widget's id and you will see the id of 'recent-comments', so your code would look like this.
      if(id == 'recent-comments') continue;

      Once in there looking at the source you might also notice the distinctive classes that are there with the 'widget' class. So if you want to exclude all text widgets then after this line of code:
      var widget = $cwjQuery(this);

      You would add this line:
      if(widget.hasClass('widget_text')) continue;

      There are even more generic ways to do this that would require some more class and advanced string manipulation, and even Regular Expressions, but let me know how this works out before I get into that.

      Jim

      Reply
  3. maria Avatar
    maria

    Yeah its nice and working IF your theme is KUBRICK based. but not working even in classic theme

    Reply
    1. jimisaacs Avatar
      jimisaacs

      This was just supposed to be a preliminary idea. I released it for help to see if anyone wanted to take it to a more final, and generic state.

      Reply
  4. Allex Avatar
    Allex

    Thanks for this plugin. I'm playing with it on my blog. Just a few improvements:
    1. Widgets made expanded by default.
    2. Title made $cwjQuery(".widgettitle",widget) not first child to work correctly with titleless widgets (it was funny when search form disappeared when I clicked on textbox)
    Here are modified source:
    http://www.all-x.net/wp-content/plugins/collapsib…

    Reply
  5. Allex Avatar
    Allex

    There are others:
    http://wordpress.org/extend/plugins/sidebar-widge…
    http://wordpress.org/extend/plugins/hackadelic-wi…

    Reply
    1. jimisaacs Avatar
      jimisaacs

      Thank you for actually reading the post before commenting. It's truly amazing how many people don't do that. I'm glad it was useful to you.

      As a note, I have 3 other versions of this now, none of which that are WordPress dependent. One with cookies, one without, and one that is entirely a jQuery plugin. Maybe one day I'll collaborate with one of the others to make something better for WordPress, but right now I'm having too much fun with another rather large pet project of mine I hope to release soon.

      Have a good day.

      Reply
    2. jimisaacs Avatar
      jimisaacs

      Thank you for actually reading the post before commenting. It's truly amazing how many people don't do that. I'm glad it was useful to you.

      As a note, I have 3 other versions of this now, none of which that are WordPress dependent. One with cookies, one without, and one that is entirely a jQuery plugin. Maybe one day I'll collaborate with one of the others to make something better for WordPress, but right now I'm having too much fun with another rather large pet project of mine I hope to release soon.

      Have a good day.

      Reply
  6. Ken Avatar
    Ken

    The download link is broken.

    Reply
    1. jimisaacs Avatar
      jimisaacs

      Thanks for the heads-up, should be fixed now.

      Reply
  7. Pafke Avatar
    Pafke

    I hope you are still checking this website from time to time because I could really use your help with something. First of all, great plugin, I love the simplicity. I am trying to add some functionality but as I'm quite in-experienced with JS I can't get it done.

    My current widget-title has a background image that I want to change depending on the state. When it's opened I want the background to be sidebar-open.png and when it's closed I want it to be sidebar-closed.png .

    My gess is that it wouldn't be that hard to achieve, but as stated before, I lack common knowledge of javascript. If you could help me on this subject it would be greatly appreciated.

    Reply
  8. Alex Avatar
    Alex

    Replace the contents of the jquery_collapsible_widgets.js file with the following code to add classes for expanded and collapsed:
    // JavaScript Document
    /**
    Please set the cookieParams object to your site or the cookie won't work!
    path – path to the current page cookie is attributed to
    domain – domain of the site
    expires – int of days, or date
    */
    // START
    var cookieParams = { path: '/', domain: window.location.host.toString(), expires: 7 };
    $cwjQuery = jQuery.noConflict();
    var data = $cwjQuery.cookie('collapsible_widgets_cookie');
    var opened = new Object();
    $cwjQuery(function() {
    if(data == null) opened[ $cwjQuery(".widget").parent().children(":first-child").attr('id') ] = true; else opened = $cwjQuery.evalJSON(data);
    $cwjQuery(".widget").each( function(i) {
    var widget = $cwjQuery(this);
    var title = widget.children(":first-child");
    var content = widget.children(":last-child");
    var id = widget.attr("id");
    if(!opened[id]) { content.hide(); title.addClass("collapsed"); } else { title.addClass("expanded"); }
    title.css("cursor", "pointer");
    title.click( function() {
    content.slideToggle("fast");
    if(opened[id]) { delete opened[id]; title.removeClass("expanded"); title.addClass("collapsed"); } else { opened[id] = true; title.addClass("expanded"); title.removeClass("collapsed"); }
    $cwjQuery.cookie('collapsible_widgets_cookie', $cwjQuery.toJSON( opened ), cookieParams);
    });
    });
    });

    Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.