Sliding text from under image

Question

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 at all. Now I have something like this:

.html

<a href="#" class="show_hide"><img src="image.jpg" width="100%" height="100px;"></a>
<div class="slidingDiv">
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc venenatis auctor quam eget imperdiet. Vestibulum et nibh sit amet lectus mattis rutrum. Nam blandit vel massa eu laoreet. Etiam quam eros, iaculis in ornare viverra, gravida eu justo. Fusce nisi tortor, ornare et metus a, consequat sollicitudin mi. Nulla ipsum erat, ultricies semper ipsum sit amet, aliquet finibus ipsum. Fusce sodales lacus eget quam ullamcorper, mollis rhoncus lectus ullamcorper. Fusce tempor metus vel tincidunt condimentum. Fusce nunc risus, vehicula a cursus sit amet, vestibulum pretium felis. Praesent ex dolor, porta id sollicitudin non, venenatis ut ante. Maecenas porta velit augue, vel suscipit neque commodo et. Aenean ac dolor ac neque tristique porta. Ut neque diam, porta ut diam sit amet, vulputate auctor justo.</div>
</div>
<a href="#" class="show_hide"><img src="image.jpg" width="100%" height="100px;"></a>
<div class="slidingDiv">
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc venenatis auctor quam eget imperdiet. Vestibulum et nibh sit amet lectus mattis rutrum. Nam blandit vel massa eu laoreet. Etiam quam eros, iaculis in ornare viverra, gravida eu justo. Fusce nisi tortor, ornare et metus a, consequat sollicitudin mi. Nulla ipsum erat, ultricies semper ipsum sit amet, aliquet finibus ipsum. Fusce sodales lacus eget quam ullamcorper, mollis rhoncus lectus ullamcorper. Fusce tempor metus vel tincidunt condimentum. Fusce nunc risus, vehicula a cursus sit amet, vestibulum pretium felis. Praesent ex dolor, porta id sollicitudin non, venenatis ut ante. Maecenas porta velit augue, vel suscipit neque commodo et. Aenean ac dolor ac neque tristique porta. Ut neque diam, porta ut diam sit amet, vulputate auctor justo.</div>
</div>

.js

$(document).ready(function() {

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

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


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

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

});

https://jsfiddle.net/Elfiszcze/49vd6d6k/2/

Could someone help me with this one?

Answer 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); 
        }
    });

});