A plugin to make a slider button

I had to build a page the other day that contained a sort of sliding selector element containing two text links side by side, that controlled the show/hide status of two panels below it. At the time I was a bit rushed so I built it in a way that worked and suited the design, but I've since had time to come back and expand on that idea with a proper jQuery plugin version.

Here it is:

Click on a link to 'select' it. You can add as many links into the element as you like. It's not the world's most complex bit of code, but it does what it was intended for. The default styling is deliberately fairly basic to allow easy customisation so I've added some extra styles above to make it look nicer.

The plugin includes a callback function that executes whenever a link is clicked, allowing you to manipulate the page around it based on what the user has chosen (it'd be pretty pointless if this wasn't included, to be fair). For the purposes of the example above I'm showing what options are available through the callback.

The plugin is also built to be responsive if required, although responsive styles aren't included. In the example above I've added in some extra CSS to make the links go full width on mobile, but it'll still work even if you don't choose to do this.

Further work will likely include an option to control the transition speed, an option to initialise the plugin with a chosen link, and the responsiveness needs some more work - it doesn't detect yet if the page has been resized and adapt accordingly.

Code and full documentation are on my github if anyone wants to use it.

Update

In between me posting this article and it being published, I've found time to do all the further work I mentioned above and a bit more.

Related

This article is tagged with