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.