Implement jQuery slidedown effect

Question

I have a jQuery slide down animation, but I would like to implement it to the paste section bellow.

Content is for a smaller device so every button need to have slide down element attached on him self.

Can some one show me how can I do this.

Mine jQuery slideDown code:

$(".squere").click(function(){    
    $(".content").hide(800);
    $(".squere").removeClass("active");
    $(this).addClass("active");
$(this).next(".content").slideDown(1000);
});

Mine Content:

            <div id="squere" class='container hidden-lg hidden-md '>
                <div class="row">
                    <div class="col-sm-4 col-xs-4">
                        <img class="img-responsive img-circle homepageGridDefault" src="img/circle/home-all-icon-off.png">

                    </div>
                    <div class="col-sm-4 col-xs-4">
                        <img class="img-responsive img-circle" src="img/circle/home-cover-icon-off.png">
                    </div>
                    <div class="col-sm-4 col-xs-4">
                        <img class="img-responsive img-circle" src="img/circle/home-diy-icon-off.png">
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4 col-xs-4">
                        <img class="img-responsive img-circle" src="img/circle/home-marketing-icon-off.png">
                    </div>
                    <div class="col-sm-4 col-xs-4">Strange book here :)</div>
                    <div class="col-sm-4 col-xs-4">
                        <img class="img-responsive img-circle" src="img/circle/home-other-icon-off.png">
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4 col-xs-4">
                        <img class="img-responsive img-circle" src="img/circle/home-special-icon-off.png">
                    </div>
                    <div class="col-sm-4 col-xs-4">
                        <img class="img-responsive img-circle" src="img/circle/home-vip-icon-off.png">
                    </div>
                    <div class="col-sm-4 col-xs-4">
                        <img class="img-responsive img-circle" src="img/circle/home-designe-icon-off.png">
                    </div>
                </div>

Fiddle example, this is the whole dive and it is responsive so do not mind the upper circle in the html section.

It's very difficult yo understand from your fiddle!! I assume that you want to show a `content` div for each `image` when clicked on it? Correct me if am wrong!! — Guruprasad J Rao, Apr 23 '15 at 05:07

score 3 · Answer 1 · answered Apr 23 '15 at 06:00

3

Ok. I've just modified your code and added just 3 images and a content div as below:

DEMO

HTML

<div class="container">
        <div class="row">
              <div class="col-sm-4 col-xs-4">

                   <a href="#" class="center">
                        <img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""/>
                   </a>
                   <div class="content">
                         Content Image 1
                   </div>

              </div>
              <div class="col-sm-4 col-xs-4">
                   <a href="#" class="center">
                        <img src="http://imgsrc.hubblesite.org/hu/db/images/hs-1994-02-c-thumb.jpg" class="img-circle" alt=""/>
                   </a>
                   <div class="content">
                        Content Image 2
                   </div>

               </div>
               <div class="col-sm-4 col-xs-4">
                   <a href="#" class="center">
                        <img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2005-37-a-thumb.jpg" class="img-circle" alt=""/>
                   </a>
                <div class="content">
                     Content Image 3
                </div>
          </div>
    </div>    
</div>

JS

$(document).ready(function(){
   $('.content').hide();
});

$(document).on('click',".center",function(){   
     if($(this).hasClass('active'))
     {
         return;
     }
    $(".content").hide(800);
    $(".center").removeClass("active");
    $(this).addClass("active");
     $(this).next(".content").show(1000);
});

Note: These are just basic animations. If you really want to perform some extra-ordinary animations then you need to check on .animate jquery function.

answered Apr 23 '15 at 06:00

Guruprasad J Rao

29,410
14
101
200

I have seen it and that is what I need, I will check the animation link, and make shure to implement this fore every image, just one thing, is it posibble to put an img inside a content, so when you click on it will unfold some paper i have designed. – copser Apr 23 '15 at 06:53
Unclear!! can you be more specific!! inside what content you want to put image?? I think **image will always be displayed and only text has to be displayed based on the image clicked** was your problem right?? – Guruprasad J Rao Apr 23 '15 at 06:55
Ok I will. be more specific, I have design a scroll paper, and I want to put it inside mine div so it will slide up and down, and text to be displayed on it, just to change mine slider to be an image. – copser Apr 23 '15 at 07:09
You can do it!! but am not sure how your design looks!! if you give some idea on you design or put it in fiddle I can definitely help you out!! :) – Guruprasad J Rao Apr 23 '15 at 07:15
here this was the question for the desktop view animaton, you will see the picture, the paper scroll is in the middl. whit displayed text on it http://stackoverflow.com/questions/29506527/how-to-hover-change-toggle-a-picture-with-jquery?noredirect=1#comment47425983_29506527 – copser Apr 23 '15 at 07:27
Yes you can do it!!! But I am afraid that you can just `slideDown` the image paper which is in div and not give an exact feeling of unfold using this `slideDown`. That's where **`.animate`** comes into picture!! :) – Guruprasad J Rao Apr 23 '15 at 07:32
Anytime.. Happy Coding.. :) – Guruprasad J Rao Apr 24 '15 at 06:15

Lovely · Accepted Answer · 2015-04-27T07:36:44.263

3

Simply use sildeDown and slideUp can resolve your problem.Try this fiddle. Just used slideUp and slide Down method in place of adding and removing active class.

$(document).ready(function(){
   $('.content').hide();
});

$(document).on('click',".center",function(){   
    $(".content").slideUp(300);
    $(this).next(".content").slideDown(300);
});

edited Apr 27 '15 at 07:36

answered Apr 23 '15 at 06:43

Lovely

98
7

score 1 · Answer 3 · answered Apr 23 '15 at 04:16

1

Please use id selector # instead of class selector .

$("#squere").click(function(){    
    $(".content").hide(800);
    $("#squere").removeClass("active");
    $(this).addClass("active");
     $(this).next(".content").slideDown(1000);
});

Might be it is your issue.

$("#squere").removeClass("active");
$(this).addClass("active");

These lines will not make any effect, because you are removing and adding same css class.

answered Apr 23 '15 at 04:16

Razack

950
3
13
26

the problem is I do not know how to implement this, and I am trying to ask someone to show me so I can use it in mine project and learn something. – copser Apr 23 '15 at 04:27

Implement jQuery slidedown effect

3 Answers3