How to slide down and up text with jquery one by one?

Question

I have 2 links: category1 and category2. I want to slide down text when mouse click over appropriate link. For example if someone clicks over category1 I want to slide down category1 content. And if soneone clicks over category2 I want to slide down category2 content and close category 1 content. I also want slide up link inside both of category1 and category2. If user clicks over that I want to slide up appropriate category (that is close content). How can I do that? Thank you in advance.

Answer 1

You haven't posted any HTML, so I'm assuming that you're using markup which is more or less "standard" when it comes to menus.

So assuming that you're within the ballpark of the following markup:

<ul id="menu">
    <li>Category 1
        <ul><!-- links --></ul>
    </li>
    <li>Category 2
        <ul><!-- more links --></ul>
    </li>
    <!-- ... and so on -->       
</ul>

You can achieve what you want (from what I understand), using something like:

jQuery(function($) {

    var $menu = $('#menu'),
        $menu_items = $menu.children('li')
        ;

    $menu_items.click(function () {

        $menu_items.not(this).slideUp();
        $(this).slideDown();

    });

})

This way, you don't have to add / change any code when you add / remove menu items from your #menu.

Answer 2

You could use this

$("#category1").click(function(){
$("#category2content").animate({"height","0"},normal,linear,function(){$("#category1content").animate({"height","500"},normal)});
});

$("#category2").click(function(){
$("#category1content").animate({"height","0"},normal,linear,function(){$("#category2content").animate({"height","500"},normal)});
});

you can add extra functions if needed to make it more specific. This can be reused for your inner contents if need be.

Do read up on http://api.jquery.com/animate/ for more info. Change the 500 to any height that you need.