0

Hello I am trying to create sliding out tabs on this website: http://imaginationmuzic.com/

I am referring to the red 'Contact Us' and blue 'Twitter' tabs at the left and right of the site.

Currently the Contact Us tab opens up in a top to down motion; I would like it to open up from left to right like a sliding out tab.

Here is the code I used in the header:

$(document).ready(function(){
$(".btn-slide2").click(function(){
    $("#panel2").slideToggle("slow");
    $(this).toggleClass("active"); return false;
});

I also would like the opposite to be done for the Twitter tab (have it open left to right).

Any help would be appreciated.

user3009948
  • 23
  • 4

1 Answers1

0

Some crude js code I made to demonstrate.

<!DOCTYPE HTML> 
<html> 
<head> 
<!--Add style sheet-->
<link rel="stylesheet" type="text/css" href="soc.css">
<!--Add jquery-->
<script src="jquery-1.10.2.js">
</script>
<!--Add script for this page-->
<script src="soj.js">
</script>
 </head> 
 <body> 
<div id="container">

<div id="panel"> </div> 
<div id="contact"> </div>

</div> 
</body> 
<html>

-------------css----------

 #panel{ 
height:500px;
width:200px;
background-color:#EE4488;
 } 
#contact{ 
position:relative;
 top:-500px;
left:200px;
width:10px; 
height:50px; 
background-color:#22EEFF; 
} 
#container{ 
position:relative;
left:-200px;
}

------------JS---------

 $(document).ready(function(){
var pos='in';
$("#contact").click(function(){
if(pos=='in'){
  $("#container").animate({left:'0px'
});
  pos='out';
 }
else
{
$("#container").animate({left:'-200px'
});
pos='in';
} 
});
});
user2756339
  • 685
  • 1
  • 10
  • 17
  • Thank you for your reply it works to get it to slide out however I cannot close it; also the tab does not slide out with the panel. Javascript noob here. – user3009948 Nov 20 '13 at 05:02
  • Added code. You can also check out this link. http://stackoverflow.com/questions/14470081/jquery-slidetoggle-horizontal-alternative – user2756339 Nov 20 '13 at 08:20
  • Ok I checked out the code and its progress, however the tab itself does not slide out with the panel. Even in the demo on the link you have me where it says 'text'; it jumps to the bottom of the sliding panel as opposed to sliding out with it. – user3009948 Nov 20 '13 at 11:57
  • Clearly one must group the elements for them to move together. Place panel and button in a div and animate that div for it to move together. Hope you understood – user2756339 Nov 20 '13 at 17:15
  • Thank you very much; I appreciate your continued support however like I said my knowledge of Javascript is nill, so when I used the surrounding div for both elements in the Javascript code and I got this result for the left contact tab: http://www.imaginationmuzic.com . – user3009948 Nov 20 '13 at 18:25
  • Aw yes! Amazing Thank you so much! The only thing I need is how to switch it to the other side. I currently attempted to do it on the site however its not sliding fully to the right. Thank you again. – user3009948 Nov 22 '13 at 16:13