- This topic is empty.
March 23, 2016 at 5:30 am #239716jwkscholteParticipant
I’m working on a site and I’m looking for a code to toggle beneath some icons a block with text and images. Does anyone of you guys know how to do this? Maybe some codes I can use for my site
JenniferMarch 23, 2016 at 6:36 am #239721BeverleyhParticipant
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.
- The forum ‘Design’ is closed to new topics and replies.