Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design Help with a div slide Reply To: Help with a div slide

#239721
Beverleyh
Participant

You should be able to Google for “sliding div box” or “toggle box” or “accordion content box” to find loads of variations.

Dynamic Drive has one here that might be useful: http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm

And here’s one that I threw together: http://fofwebdesign.co.uk/template/_testing/jquery-faqs.htm

Most use the jQuery library owing to jQuery’s nice vertical slide effect, which is difficult to get using other means (such as modern CSS3 with an unknown height). Unfortunately, jQuery is rather large (~ 100kb minified) so it can add some serious bulk to your web page – probably not a great idea to add it for the sole purpose of powering only one script – plus, it is quite performance-heavy, so the animations can look a little jerky on low-powered devices.

Thankfully, VelocityJS has replicated jQuery’s slide effect rather nicely, and at a third of the overall file size (~ 33kb minified), and with slicker performance on mobile, it seems to fit the bill quite well, and serve web devs who are moving away from jQuery well. You have to write vanilla JS functions to trigger Velocity animations (i.e. the slide effect), but it’s not too difficult. I did that here: http://fofwebdesign.co.uk/template/_testing/jquery-to-velocity-faqs.htm

No slide effect in IE8 with this Velocity version but the boxes still open.