Slide toggle from right-to-left and left-to-right.

This is the version #1 of the DEMO

by Keval Bhatt

HTML

<div id="body">
    
<h2>Slide toggle from right to left and left to right.</h2>

    <hr/>
    <p>
        <select class="mySelect">
            <option value="right">Right</option>
            <option value="left">Left</option>            
            <option value="up">Up</option>
            <option value="down">Down</option>
        </select>
        <button id="button" class="myButton">Run Effect</button>
    </p>
    <div id="myDiv" >
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
     <div  class="insert" style="display:none">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

CSS

/** Style for the body **/
 body {
    font: 12px Tahoma, Arial, Helvetica, Sans-Serif;
}
/** Style for the button & div **/
 .myButton {
    padding: .2em 1em;
    font-size: 1em;
}
.mySelect {
    padding: .2em 0;
    font-size: 1em;
}
#myDiv {
    color:Green;
    background-color:#eee;
    border:2px solid #333;
    display:none;
    text-align:justify;
}
#myDiv div {
    width: 100px;
    height: 100px;
    background: #ccc;
    float:left;
    margin:4px;
}
.insert {
    color:Green;
    background-color:#eee;
    border:2px solid #333;
    display:none;
    text-align:justify;
}
.insert div {
    width: 100px;
    height: 100px;
    background: #ccc;
    float:left;
    margin:4px;
}
/** Style for the cointainer **/
 #body {
    clear: both;
    margin: 0 auto;
    max-width: 534px;
}
html, body {
    background-color:White;
}
hr {
    margin-bottom:40px;
}
.red{
  background-color:red !important;
}
.green{
  background-color:green !important;
}
.blue{
  background-color:blue !important;
}

JavaScript

$('#myDiv').toggle('slide')
$(".myButton").click(function () {

    // Set the effect type
    var effect = 'slide';

    // Set the options for the effect type chosen
    var options = { direction: $('.mySelect').val() };

    // Set the duration (default: 400 milliseconds)
    var duration = 500;

    $('#myDiv').toggle(effect, options, duration,function(){
         $(".insert").toggle(effect, options, duration);
        $(".insert").html('<div class="red"></div>'+
        '<div  class="green"></div>'+
        '<div  class="blue"></div>'+
        '<div  class="green"></div>'+
        '<div  class="green"></div>'+
       '<div  class="red"></div>'+
        '<div class="blue"></div>'+
        '<div class="blue"></div>')});
});