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

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #239716
    jwkscholte
    Participant

    Hello,

    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

    Greatings,
    Jennifer

    #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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘Design’ is closed to new topics and replies.