Jquery Slide DIV half of page only

Question

I try To make Something Like that which present at Microsoft's Support Website.See -> (Visit Here)

Click on any Product which list there. (Note: Purpose of this article/Question is not MARKETING on any Product!!! It just for Knowledge.)

When You click on any one of listed there, one drop-down appear.

Now Here Points of my question are comes out. After click on menu item you can see that there is one "Select a topic" list and when you click on any one of them, 2nd list comes out. and after click on item from 2nd list 3rd one list comes out. I exactly try to make a script like that. I search over internet and make a one div slider. But it slide whole div. Here is my code what I done

HTML

<div id="gallery">
  <div id="slider">
     <div style="background:#cf5">1</div>
     <div style="background:#ada">2</div>
     <div style="background:#b0b">3</div>
  </div>
  <span id="prev">Prev</span>
  <span id="next">Next</span>
</div>

CSS

#gallery{
  position:relative;
  margin: 0 auto;
  overflow:hidden;
  width:500px;
  height:330px; /* +30 = space for buttons */
  text-align:center; /* to center the buttons */
}
#slider{
  position:absolute;
  left:0;
  height:300px;  
  text-align:left; /* to reset text inside slides */
}
#slider > div {
  position:relative;
  float:left;
  width:500px;
  height:300px;
}
#prev, #next{
  display:inline-block;
  position:relative;
  top:300px;
  cursor:pointer;
  padding:5px;
}

Jquery

$(function(){

    var $gal = $('#gallery'),
    $sli = $('#slider'),
    $box = $('div',$sli),
    W    = $gal.width(), // 500
    N    = $box.length,  // 3
    C    = 0;            // a counter

    $sli.width(W*N);

    $('#prev, #next').click(function(){
    C = (this.id=='next' ? ++C : --C) <0 ? N-1 : C%N;
    $sli.stop().animate({left: -C*W },800);
    }); 

});

And Here Is Example of Of my code on Fiddle

Answer 1

After do some R&D on it. I make something like that

HTML

<div>
        <input type="submit" id = "submit" value = "Show panel"/>
        <span id = "showpanel1"></span>
    </div>

    <div id = "slider"  style = "display:none">
        <div class = "panel1" style = "display:none">
            <ul>
                <li id = "divpanel0">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
                <li id = "divpanel1">Pellentesque nec est eget eros placerat imperdiet sed ac purus.</li>
                <li id = "divpanel2">Fusce id dui lacinia, scelerisque dolor vitae, faucibus sem.</li>
                <li id = "divpanel3">Nulla dignissim odio non turpis consectetur malesuada.</li>
                <li id = "divpanel4">Ut vestibulum est quis lacinia sagittis.</li>
                <li id = "divpanel5">Maecenas interdum libero at suscipit iaculis.</li>
                <li id = "divpanel6">Donec in nibh sed lacus ultrices pellentesque sed in purus.</li>
                <li id = "divpanel7">Aliquam luctus eros id semper vestibulum.</li>
                <li id = "divpanel8">Donec vitae felis at leo rutrum mattis.</li>
            </ul>
        </div>

        <div class = "panel2" style = "display:none">
            <ul>
                <li id = "divpanel0">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
                <li id = "divpanel1">Pellentesque nec est eget eros placerat imperdiet sed ac purus.</li>
                <li id = "divpanel2">Fusce id dui lacinia, scelerisque dolor vitae, faucibus sem.</li>
                <li id = "divpanel3">Nulla dignissim odio non turpis consectetur malesuada.</li>
                <li id = "divpanel4">Ut vestibulum est quis lacinia sagittis.</li>
                <li id = "divpanel5">Maecenas interdum libero at suscipit iaculis.</li>
                <li id = "divpanel6">Donec in nibh sed lacus ultrices pellentesque sed in purus.</li>
                <li id = "divpanel7">Aliquam luctus eros id semper vestibulum.</li>
                <li id = "divpanel8">Donec vitae felis at leo rutrum mattis.</li>
            </ul>
        </div>

    </div>


    <!-- Load Loder GIF -->


        <div id = "loader" style = "display:none">
            <img src = "loader.gif">
        </div>

    <!-- QnA Div Start -->

    <div id = "qaslider"  style = "display:none">
        <div class = "mainpanel" style = "display:none">
            <ul>
                <li id = "divpanel0">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
                <li id = "divpanel1">Pellentesque nec est eget eros placerat imperdiet sed ac purus.</li>
                <li id = "divpanel2">Fusce id dui lacinia, scelerisque dolor vitae, faucibus sem.</li>
                <li id = "divpanel3">Nulla dignissim odio non turpis consectetur malesuada.</li>
                <li id = "divpanel4">Ut vestibulum est quis lacinia sagittis.</li>
                <li id = "divpanel5">Maecenas interdum libero at suscipit iaculis.</li>
                <li id = "divpanel6">Donec in nibh sed lacus ultrices pellentesque sed in purus.</li>
                <li id = "divpanel7">Aliquam luctus eros id semper vestibulum.</li>
                <li id = "divpanel8">Donec vitae felis at leo rutrum mattis.</li>
            </ul>
        </div>


    </div>

JS

<script src="js/jquery-1.9.1.js"></script>
  <script src="js/jquery-ui.js"></script>
  <script>  
    $(document).ready(function() {
         var firsttext;
         $(".panel1").on('click','li',function (){
            $(".panel2").show("slide", { direction: "right" }, 1000);
            $("span").text($(this).html());
            firsttext = $(this).html();

        });

        $('#submit').click(function() {
            $(".mainpanel").hide();
            $("#slider").show("slide", { direction: "right" }, 0);
            $(".panel2").hide("slide", { direction: "right" }, 0);
            $(".panel1").show("slide", { direction: "right" }, 1000);
        });

        $(".panel2").on('click','li',function (){
            $("span").text(firsttext + " > " + $(this).html());
            $( "#slider" ).fadeOut( "slow" );
            $("#loader").show("slide", { direction: "right" }, 800);
            $("#loader").center(true);
            setTimeout(removeslider,4000)
        });

    });

    function removeslider()
    {
        $("#loader").hide("slide", { direction: "left" }, 800);
        $("#qaslider").show("slide", { direction: "right" }, 0);
        $(".mainpanel").show("slide", { direction: "right" }, 1000);
    }
    // Custome Jquery Function to stop/place element at center screen

    jQuery.fn.center = function(parent) {
        if (parent) {
            parent = this.parent();
        } else {
            parent = window;
        }
        this.css({
            "position": "absolute",
            "top": ((($(parent).height() - this.outerHeight()) / 2) + $(parent).scrollTop() + "px"),
            "left": ((($(parent).width() - this.outerWidth()) / 2) + $(parent).scrollLeft() + "px")
        });
        return this;
    }

  </script>

Style

<style>
    .panel1 .panel1
    {
        border:1px solid black;
        margin-right:800;
        margin-top:20px;
    }
    #loader
    {
        margin-right:708;
        margin-top:117px;
        margin-left:525px;
    }
    .panel1 ul li:hover, .panel2 ul li:hover
    {
        cursor:hand
    }
    #slider > div {
      position:relative;
      float:left;
      width:500px;
      height:300px;
    }
  </style>