Make your own jQuery Slider

Make your own jQuery Slider

By Jonathan on January 4, 2012

I’ve begun using this little feature more and more in recent projects, not only because I like it but Luke includes it in his Web Design. Using jQuery and HTML it is simple to create content that will disappear and reappear at the click of a button.

Firstly, you’ll need to reference jQuery. You can either do that by downloading the latest version and uploading it to your server, link to a copy on google’s servers or, if you’re using WordPress, use the inbuilt function.

Google Ref:
{code type=html}

{/code}

WordPress function
{code type=php}

{/code}

Next up the content we want to show/hide.

{code type=html}

Click Me

  • Some text that can be hidden.

{/code}

When that is done, you should have a title, with a list under it with text in it. Next we add in the javascript/jQuery to make our slider function correctly.

{code type=html}

{/code}

Basically what happens above is when the page is loaded, the UL under the div ID ‘placeholder’ will be hidden automatically.

Next, when the div ID ‘placeholder’ h3 class ‘clickme’ is click (this is our title text) the UL under the div ID ‘placeholder’ will slide open. This will happen ‘fast’, this can also be changed. Using ‘return false’ will stop the browser window from ‘jumping’ to the content when clicked.

This can be adapted to suit your needs, such as adding a button in to click which will float down with content when clicked. Used for Tilt TV Brackets description. You can also have an image that changes when the list is active or inactive. This would use the CSS property ‘.active’. You would replace this line of code:
{code type=html}
jQuery(this).next().slideToggle(‘fast’);
{/code}

with this:
{code type=html}
jQuery(this).toggleClass(“active”).next().slideToggle(‘fast’);
{/code}

You can find example of this within our Website Design and the sidebar on the right.

Any Questions, just leave us a comment.

Happy Coding!


Falkon blog post featured image for post - WordPress Templates

WordPress Templates

Ever wanted to customise a single page in WordPress with the template system but never knew how? Its simple with...