jquery .slideToggle() horizontal alternative?

Question

slideToggle does exactly what I want, only I want the slide to be horizontal.

I now have an horizontalhide/show and animation on click, but I would like to have the toggle options. So that when I click on the active link, it will play the animation reversed and hide itself.

What would be the best way to do this?

Disk

jsfiddle.net/AFWNA/826 A little update to @BlackSheep answer. – Pewee

Answer 1

You can use the animate method:

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

http://jsfiddle.net/7ZBQa/

Liver

Jeah this is what I wanted, thanks for the answer. I still don't really comprehend the { width: 'toggle'} statement. You've set the width in css, but display to none. So jquery then displays the element and animates the given width? – Disk

@Disk Those properties are not required, I just added them for the demo and yes, jQuery animates the width, if the element is hidden, jQuery animates the width and show it and vice versa. – Liver

But I still have to give each button a different class or id, because else one button would toggle the other? – Disk

@Disk Well, that is related to selector and logic behind your code, if you want to animate multiple elements you can add class attributes to them. – Liver

ai, just found out that its not working 100%. The links all load into the same iframe, so I'm animating the iframe. And they animate each others iframe... – Disk

@Disk For this you can post another question. – Liver

@undefined , here the left portion is static and the toggle is happening from the right side , can it be made in such a way that the right remains static and toggles from left . – Reeve

Answer 2

Created a fiddle http://jsfiddle.net/powtac/RqWk2/

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

Bookmark

ah right, but I want it to be the other way around, that it will pop up when I click something. – Disk

Instead of width: 'toggle' you cold use width: '200px' – Bookmark

but then it wouldn't toggle anymore? – Disk

I tried to use '200px' but it doesn't display the div, even if I set the style width to '0px' it now would always display the div and just blink each time I click the buttons with the onclick events. – Glycogen

In case I wasn't clear in the assumptions I was making for what you might understand, I start out with div being display:none and nothing happens when I try and set it's width to 200px. Then if I make the div displayed and try setting the width to be 0px it just blinks to 0 then right back again to full size. – Glycogen

I take it you no longer care about this. – Glycogen

Answer 3

There is another way, to use jquery ui. See api jquery ui but it may not be always useful as it has its glitches

Here jsfiddle to see the glitch, it does not move all the rest elements smoothly. I put here code, but it should be used with jQuery UI 1.10.3.

js

$( document ).click(function() {
  $( "#toggle" ).toggle('slide');
});

css

.t {
    width: 100px;
    height: 100px;
    background: #ccc;
    display: inline-block;
    float: left;
  }

html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<p>Click anywhere to toggle the box.</p>
<div id="toggle" class='t'>1</div>
<div id="" class='t'>2</div>
<div class='t'>3</div>

Malversation

Answer 4

If you wish to toggle between two width's you could do something like below :

$('#A').click(function(){
if($(this).width() > 20){
$(this).animate({width: '20px'})
}
else{
$(this).animate({width: '50%'})
}
});

#A{
  float:left;
  width:50%;
  height:300px;
  background:red;
}
#B{
  min-height:300px;
  background:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="A">
</div>
<div id="B">
<span>Some stuff</span>
</div>

Henceforward

Answer 5

i tried this, and works great!

html code:

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">
            <!-- front content -->
        </div>
        <div class="back">
            <!-- back content -->
        </div>
    </div>
</div>

The CSS /* flip the pane when hovered */ .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(180deg); }

.flip-container, .front, .back {
    width: 320px;
    height: 480px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}

i use this inside a bootstrap col-sm-* and works great too

 <div class="col-sm-4 flip-container" ontouchstart="this.classList.toggle('hover');">
                    <div class="content-box flipper">
                        <div class="content-box-front">
                            <span class="glyphicon glyphicon-envelope content-box-icon"></span>
                            <h4>Share your emotions</h4>
                        </div>
                        <div class="content-box-back">
                            <p>Share emotions with friends, family and teammates.</p>
                            <button>Read more</button>
                        </div>
                    </div>
                </div>

the css

.content-box
{
    position: relative;
    text-align: center;
    height: 105px;
    width: 100%;
}
.content-box-icon
{
    font-size: 30px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    text-align: center;
    display: block;
    margin: 5px auto 15px auto;
    color: #fff;
    float: none; 
    background:#25acfd                     
}
.content-box-front
{
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 105px;
}
.content-box-back
{
    transform: rotateY(180deg);
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 105px;
}
/* entire container, keeps perspective */
    /* flip the pane when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

Malleus

Answer 6

If you needed it to be continuous, you can set up setTimeinterval as follows

<?php
setInterval(function (){
$('div').animate({width: 'toggle'});
},200);
?>

Fritzsche

Answer 7

I wanted the Height to toggle so I used(I used in my project)

function show_hide(target){
 var x = document.querySelectorAll("." +target);
 var y = $( x ).next()
 $(y).animate({height: 'toggle'});
}

Gayomart

Why not use .slideToggle(), the function the original question is asking a vertical replacement for? – Theron