nemrod.se Various guides and experiments

Toggle Columns


Background:
I was doing a member register with an awful lot of fields, enough to make them not fit without scrolling to the sides. I didn’t want to choose what not to show in the code though, because that’s not quite as dynamic as I want it to be. If they want to show a field that is usually not important, then they should be able to.
Usage:
Add “<ul id=’togglecol’></ul>” where you want the list in the code and then run “$(‘tabletorunon’).togglecol(‘Optional description that appears at the top of the list’);”. To make it look like you want you can simply use CSS on #togglecol ul and li. When the column is visible the li has the class showingcol and if not it has hidingcol, so you can use that to indicate the states. The states are also saved in cookies, so you can safely use page numbering and other stuff without losing the toggled columns.
Shortcomings:
As it is now it doesn’t really work well with colspan and the likes because I had no need for it, but it’s something I’m considering looking at and see if I can fix in the future.
Example/demonstration:
Example HTML file
Download link:
jquery.togglecol.js

Posted in jQuery plugins | Leave a comment

Leave a Reply

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