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

Home Forums JavaScript Howto: FAQ stlye drop down

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #38884

    Hey everyone I was wondering if someone could steer me in right direction in how to create a FAQ dropdown style menu like the one on this website in the Snippets section


    nevermind people I think I found something here that does what I’m looking for


    So I managed to get it up and running but not exactly what I really wanted.

    for example on the site I have it like this. accordion

    What I want is it to look like this webpage-image

    Is it possible to have the li tag extend past the ul tag?


    Taufik Nurrohman

    Animate the

  • element as a callback:,resources,js/

    $(document).ready(function() { /* This code is executed after the DOM has been completely loaded */

    /* Changing thedefault easing effect - will affect the slideUp/slideDown methods: */
    $.easing.def = "easeOutBounce";

    /* Binding a click event handler to the links: */
    $('li.button a').click(function(e) {

    /* Finding the drop down list that corresponds to the current section: */
    var dropDown = $(this).parent().next();

    /* Closing all other drop down sections, except the current one */
    marginLeft: 0,
    marginRight: 0
    }, 'slow');
    dropDown.slideDown('slow', function() {
    marginLeft: -150,
    marginRight: -150
    }, 'slow');
    /* END CALLBACK */

    /* Preventing the default event (which would be to navigate the browser to the link's address) */


    Note: Clear your CSS float by adding clear:both in the hr.thin {} selector:

    hr.thin {clear:both;}


Thnx @Hompimpa

It seems to work:)
The only thing is that it animates outwards after the drop down, is it possible for it to drop down and already be the length of the outwards animation without it animating outwards. I hope I’m making sense

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