How to slide a div from left to right in a Jquery Mobile page

Question

I am trying to slide div from left to right on button click in a Jquery mobile page .

What exactly I want is to push that current div to left and reveal another div with content like some menu from right .

I have created a JSfiddle . Here is the Updated Link

So if you see in the fiddle each list div has a gear button so when you click this button it should push only that div to left and reveal another div fro right showing some menu .

I have a hand drawn sketch that I am including in this

HTML

<div data-role="page">
    <div id="clock" data-role="header" style=" background:skyblue;">
            <h1>List View</h1>

    </div>
    <!-- /header -->
    <div role="main" class="ui-content" style=" background:orange;">
        <div class="fieldset" id="myform1">List 1 <a class="ui-shadow ui-btn ui-btn-inline ui-btn-icon-left ui-icon-gear" value="SUBMIT" id="sub2"></a>

        </div>
        <div class="fieldset" id="myform2">List 2 <a class="ui-shadow ui-btn  ui-btn-inline ui-btn-icon-left ui-icon-gear" value="SUBMIT" id="sub1"></a>

        </div>
        <div class="fieldset" id="myform3">List 3 <a class="ui-shadow ui-btn ui-btn-inline ui-btn-icon-left ui-icon-gear" value="SUBMIT" id="sub0"></a>

        </div>
    </div>
    <div data-role="footer">
            <h4>Page Footer</h4>

    </div>
    <!-- /footer -->
</div>

Script

$(document).ready(function () {

    $("#sub2").click(function () {
        // alert("This is an alert");
        $('#myform1').toggle('slide', {
            direction: 'right'
        }, 700);
    });
});

Thanks

Answer 1

I tried to solve my own problem with the help of comments provided by others . Here is the solution.

Although there is little bit change i.e I changed the div to li that's all

SCRIPT

$(".fieldset a").click(function () {
    //var ul_parent= $('li.fieldset').parent();

//$(ul_parent).find('li').each(function(){ //code here });

     $('li.fieldset').each(function(){
        if ($(this).hasClass('rightSlide')) {
        }else{
             var form = '#'+$(this).attr('id');
             var arr = form.split('_');
             var menu = '#menu_' + arr[1];
             var theClass = form;
            console.log("The opened id : "+form);
            toggle(form,menu,theClass);

     }
     });

    var form = '#'+$(this).closest('li').attr('id');
    var arr = form.split('_');
    var menu = '#menu_' + arr[1];
    var theClass = form;
    toggle(form,menu,theClass);
   // console.log(menu);


    function toggle(form,menu,theClass){
    if ($(theClass).hasClass('rightSlide')) {
        $(form).animate({
            "margin-left": "-200px",
                "margin-right": "200px"
        }, "slow").removeClass('rightSlide');
        $(menu).animate({
            "margin-right": "0px"
        }, "slow");
    } else {
        $(form).animate({
            "margin-left": "0px",
                "margin-right": "0px"
        }, "slow").addClass('rightSlide');
        $(menu).animate({
            "margin-right": "-200px"
        }, "slow");

    }
    }

    //$('.hidenset').toggle(400);
});

HTML

<div data-role="page">
    <div id="clock" data-role="header" style=" background:skyblue;">
            <h1>List View</h1>

    </div>
    <!-- /header -->
    <div role="main" class="ui-content" style=" background:orange;">
        <ul>
            <li class="fieldset rightSlide" id="myform_1">List 1 <a class="ui-shadow ui-btn ui-btn-inline ui-btn-icon-left ui-icon-gear" value="SUBMIT" id="sub2"></a>

            </li>
            <li class="hidenset" id="menu_1">Menu 1</li>
            <li class="fieldset rightSlide" id="myform_2">List 2 <a class="ui-shadow ui-btn ui-btn-inline ui-btn-icon-left ui-icon-gear" value="SUBMIT" id="sub2"></a>

            </li>
            <li class="hidenset" id="menu_2">Menu 2</li>
            <li class="fieldset rightSlide" id="myform_3">List 3 <a class="ui-shadow ui-btn ui-btn-inline ui-btn-icon-left ui-icon-gear" value="SUBMIT" id="sub2"></a>

            </li>
            <li class="hidenset" id="menu_3">Menu 3</li>
        </ul>
    </div>
    <div data-role="footer">
            <h4>Page Footer</h4>

    </div>
    <!-- /footer -->
</div>

CSS

.fieldset {
    height:100px;
    background:green;
    width:100%;
    margin-bottom: 2px !important;
    margin-top: 2px !important;
    color:white;
}
.hidenset {
    background:red;
    margin-top: -103px !important;
    width:180px;
    height:100px;
    margin-bottom: 2px !important;
    margin-right: -200px;
    color:white;
    /*display:none;*/
    float:right;
}
ul {
    list-style-type: none;
    padding-left: 0px;
}
.fieldset a {
    float:right;
    margin-right: 0px !important;
    height: 21px !important;
    width: 21px !important;
    padding-right: 20px !important;
    padding-left: 0px !important;
}

The UPDATED LINK for JS FIddle