Response title
This is preview!
Sir, below is my code that i have tried :
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>slide demo</title>
- <style>
- .leftpanel1 {
- width: 300px;
- height: 100px;
- background: #ccc;
- position:absolute;
- float:left;
- z-index:100;
- top:0;
- background:red;}
- .rightpanel1 {
- width: 695px;
- height: 100px;
- background: #ccc;
- position:absolute;
- float:right;z-index:100;top:0;background:red;right:0;}
- .leftpanel2 {
- width: 300px;
- height: 100px;
- background: #ccc;
- position:absolute;
- float:left;
- z-index:10;top:0;background:green;}
- .rightpanel2 {
- width: 695px;
- height: 100px;
- background: #ccc;
- position:absolute;
- float:right;z-index:10;top:0;background:green;right:0;}
- .leftpanel3 {
- width: 300px;
- height: 100px;
- background: #ccc;
- position:absolute;
- float:left;
- z-index:1;top:0;background:#ececec;}
- .rightpanel3 {
- width: 695px;
- height: 100px;
- background: #ccc;
- position:absolute;
- float:right;z-index:1;top:0;background:#ececec;right:0;}
- #container{position:absolute;margin:0 auto; width:1000px;height:300px;border:solid 1px red;left:0;right:0;bottom:0;top:100px;}
- </style>
- <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
- <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
- </head>
- <body>
- <a href="#" id="tog1">switch 1,2</a>
- <a href="#" id="tog2">switch 3,4</a>
- <a href="#" id="tog3">switch 4,5</a>
- <div id="container">
- <div id="toggle1" class="leftpanel1">for switch 1</div><div id="toggle2" class="rightpanel1">for switch 2</div>
- <div id="toggle3" class="leftpanel2">for switch 2</div><div id="toggle4" class="rightpanel2">for switch 3</div>
- <div id="toggle5" class="leftpanel3">for switch 3</div><div id="toggle6" class="rightpanel3">for switch 4</div>
- </div>
- <script>
- $(window).load(function(){
- $().ready = function() {
- $("#tog1").click(function() {
- $( "#toggle1" ).toggle("slide", { direction: "left" });
- $( "#toggle2" ).toggle("slide", { direction: "right" });
- });
- $("#tog2").click(function() {
- $( "#toggle3" ).toggle("slide", { direction: "left" });
- $( "#toggle4" ).toggle("slide", { direction: "right" });
- });
- $("#tog3").click(function() {
- $( "#toggle5" ).toggle("slide", { direction: "left" });
- $( "#toggle6" ).toggle("slide", { direction: "right" });
- });
- }();
- });
- </script>
- </body>
- </html>
sir in an above code i have made 3 switches as tog1, tog2,
tog3. Each switches would have 2 corresponding divs to
slide in and out.
I want by default only tog1 should active and it's 2 divs should slide in. Then when i click on second switch then first switch get inactive and it's divs get slide out and simultaneously switch2 get active and it's divs get slide in. same as with switch 3.
main thing is that once the switch get inactive and it's 2
divs get slide out they should not appear until it's switch
being clicked.
Please suggest me something about this.... hope you should do some needful.
1