Sliding Text From Under Image

I need to show txt nicely sliding from under image after click. When user will click on other image, previous text have to slide out (not be vissible). I am not good in javascript

Solution 1:

When using jquery hide() and show() you can set the parameter duration that will be used in animation duration, see jquery docs. For example, 500 miliseconds:

$(document).ready(function() {

    $(".slidingDiv").hide();
    $(".show_hide").show();

    $('.show_hide').click(function() {

        //hide all sliding divs
        var arrayLikeOfSlidingDivs = $('.slidingDiv');
        arrayLikeOfSlidingDivs.each(function(){
            if ($(this).is(':visible')){
                $(this).hide(500);
            }

        });

        var isvisible = $(this).next('.slidingDiv').is(':visible');

        if ( isvisible ) {
            $(this).next('.slidingDiv').hide(500);
        } else{
            $(this).next('.slidingDiv').show(500); 
        }
    });

});