$(document).ready(function(){
         /*Since all the filters are hidden with css we are displaying the filter with class .active_filter using fadeIn()
         function. If you just want it to show with no effect, just put show() instead of fadeIn() */
        $('.active_filter').fadeIn();

        //when a filter link is clicked...
        $('.filter_link').live('click', function(event){

            /*...prevent the default behaviour...*/
            event.preventDefault();

            /* ...remove the filter_link_selected class from current active link... */
            $('.filter_link_selected').removeClass('filter_link_selected');

            /* ...and add it to the new active link */
            $(this).addClass('filter_link_selected');

            /*...get the title attribute (which corensponds to the id of the needed text container),
            but you can use any attribute you want*/
            var container_id = $(this).attr('title');

            //...animate the current active_filter by changing it's height and opacity ...'
            $('.active_filter').animate({

                height : 'toggle' , opacity : 'toggle'

            //...and when that animation ends...
            },function(){

                //...remove the active_filter class from the current active filter...
                $(this).removeClass('active_filter');

                //...and add that class to the filter that corensponds the clicked link...
                $(container_id).addClass('active_filter');

                //...and animate the new active_filter by using toggle on height and opacity again...
                $('.active_filter').animate({

                    height : 'toggle' , opacity : 'toggle'

                });
            });

        });
    });