How to hide and show div with special effect

Question

With reference of Mr.Vytautas Butkus, I have used his code, Using his code I can get vertical effect but I want horizontal effect of show and hide.

$(document).ready(function(){
      var $content = $(".content").hide();
      $(".toggle").on("click", function(e){
        $(this).toggleClass("expanded");
        $content.slideToggle();
      });
    })

So please Suggest me what can I do for Horizontal hide and show effect of div?

see this:: http://stackoverflow.com/questions/14470081/jquery-slidetoggle-horizontal-alternative — Sudhir Bastakoti, Jul 11 '13 at 05:52
Thnaks mishik and Sudhir, I saw both links I thing it will work for me let me test..! — AloNE, Jul 11 '13 at 06:23
hey,I am used $('#contents').toggle( "slide" ); It work fine on chrome but not on IE. — AloNE, Jul 11 '13 at 06:40
@AloNE Try using `$('#contents').animate({width: 'toggle'});` works more fine in IE, chrome and FF. — Praveen, Jul 11 '13 at 07:31

Praveen · Accepted Answer · 2013-07-11T07:28:33.797

2

slideToggle does slideUp and down. So use .animate() instead of .slideToggle()

You can use

$('selector').animate({width: 'toggle'});

Your code:

   $(document).ready(function(){
          var $content = $(".content").hide();
          $(".toggle").on("click", function(e){
            $(this).toggleClass("expanded");
            $content.animate({width: 'toggle'});
          });
        })

edited Jul 11 '13 at 07:28

answered Jul 11 '13 at 05:51

Praveen

55,303
33
133
164

score 1 · Answer 2 · edited Jul 11 '13 at 07:40

1

Use .toggle( "slide" ) like this:

      var $content = $(".content").hide();
      $(".toggle").on("click", function(e){
        $(this).toggleClass("expanded");
         $content.toggle( "slide" );
      });

Here is the demo

edited Jul 11 '13 at 07:40

Rajeev Bera

2,021
1
16
30

answered Jul 11 '13 at 05:57

Nishu Tayal

20,106
8
49
101

score 0 · Answer 3 · answered Jul 11 '13 at 05:52

0

You can do this by expanding width. If you don't want to use jQuery.animate function then you can also do this by using CSS3 transition property.

answered Jul 11 '13 at 05:52

Jay Shukla

5,794
8
33
63

score 0 · Answer 4 · edited Jul 11 '13 at 07:35

0

I agree with user1671639's response.

But, for a smoothest animation on iPad, you can also use the excellent Transit to create the animation in CSS3 simply.

And add a fall back on normal JavaScript animation for old browsers including IE9.

edited Jul 11 '13 at 07:35

the Tin Man

158,662
42
215
303

answered Jul 11 '13 at 05:55

Jaycreation

2,029
1
15
30

How to hide and show div with special effect

4 Answers4