Grow your CSS skills. Land your dream job.

Howto: FAQ stlye drop down

  • # July 13, 2012 at 10:58 am

    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

    TIA:)

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

    # July 13, 2012 at 3:26 pm

    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?

    TIA

    # July 13, 2012 at 11:10 pm

    Animate the

  • element as a callback: http://jsfiddle.net/tovic/kw7LD/23/embedded/result,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 */
    $('.dropdown').not(dropDown).slideUp('slow').find('li').animate({
    marginLeft: 0,
    marginRight: 0
    }, 'slow');
    dropDown.slideDown('slow', function() {
    /* START CALLBACK */
    $(this).find('li').animate({
    marginLeft: -150,
    marginRight: -150
    }, 'slow');
    /* END CALLBACK */
    });

    /* Preventing the default event (which would be to navigate the browser to the link's address) */
    e.preventDefault();
    })

    });

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

    hr.thin {clear:both;}

# July 16, 2012 at 12:46 pm

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)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".