Skip to content

Simple jQuery concat/expando plug-in

Old content alert!

Thanks very much for visiting my blog. Always happy to have people read my stuff but just thought I should point out this post is years old. If it's about technical stuff there is a possibility that it is no longer relevant, if it's a bug report/fix I'm hoping that it should now have been fixed.

Of course if this is what you're looking for and it does work then great, just don't say I didn't warn you...

One of the ‘cool’ little features I managed to shoe-horn into London Guide was a nice little jQuery plug-in that I called the “expando of win”. It’s a fairly simple piece of functionality but I’ve done it in a way that I’ve yet to see and is hopefully going to be a bit friendlier on performance by keeping DOM manipulations to a minimum. It can be seen live in a the wild on event pages such as the fairly bizarre sounding Body Worlds and the Mirror of Time held at the o2.

Opposed to hiding all links that you don’t want to be shown (this seems to be done in most example I found using inline styles of display: none) it adds a class to each of the items you want to be initially shown. Then to perform the show/hide a class on the containing list is toggled and CSS performs all the rest of the magic. So showing 100 new list items is all done via 1 single class change and not through adding inline styles to 100 list items; this just seems far more efficient to me.

You need do a little bit of work to get it working once you’ve included the JS on your page and instantiated it but nothing more than adding the following CSS to your stylesheet (you’ll of course have to change class names to suit your site)

/* note that the class 'truncate' gets added to the parent element through code */
.js .truncated li { display: none; }
.js .truncated li.displayed { display: list-item; }

You can then call the plug-in like so:


Written using the jQuery plug-in development pattern it’s fully extendable so it you want to show more than the default number of list items you can dom equally if you want to provide additional text alongside the ‘show all’ link you can do by providing over-rides in the form of a option object like so:

   init_shown: 20,
   displayed_class: 'show_me',
   link_suffix: 'winful events'

Chaining is also supported so you can call additional jQuery methods following it.

Currently only list elements (ordered and un-ordered lists) are supported (as I didn’t want to over-engineer things as for the use cases I had it didn’t need to do anything else) and if you try and call it on anything else if breaks out and returns itself so any potential chain isn’t broken. The same occurs when you try to use it on something with less list items than the initial value to show.

This is clearly not the best plug-in ever written but I think it’s nice and I like the fact that it goes around things in a different way to most other solutions I have seen. There are probably tons of improvements that could be made (and if you do please let me know so I can update my code here). I also love the way that jQuery allows for these kinda things to be written, and that fact that they are so damn easy to create.

Here is the expando plug-in to download, please use, change, distribute as you wish; just if you do use it let me know and don’t change the attribution to say you did it :>

  • fabs

    yo man! just wanted to let you know you have the coolest blog header ever. really! I was laughing my head off when I saw it.