...

View Full Version : Sliding Div Left to Right



kamaro
01-25-2012, 06:36 PM
I have a slider that slides the content from the top to bottom when a link/button is clicked. I want it to slide out from the right side of the button and move left to right. Is this possible by just adjusting the code I already have? Thanks.

HTML:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery Accordion Style DIV Menu</title>
<link href="format.css" rel="stylesheet" type="text/css" />
<link href="text.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
<script type="text/javascript" src="javascript.js"> </script>
</head>

<body>
<div id="wrapper">

<div class="accordionButton">Button 1 Content</div>
<div class="accordionContent">Content 1<br /><br /><br /><br /><br /><br /><br /><br />Long Example</div>
<div class="accordionButton">Button 2 Content</div>
<div class="accordionContent">Content 2<br /><br /><br /><br /><br />Medium Example</div>
<div class="accordionButton">Button 3 Content</div>

<div class="accordionContent">Content 1<br />Short Example</div>
<div class="accordionButton">Button 4 Content</div>
<div class="accordionContent">Content 4<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Extra Long Example</div>
</div>
</body>
</html>


javascript.js:



$(document).ready(function() {

//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.accordionButton').click(function() {

//REMOVE THE ON CLASS FROM ALL BUTTONS
$('.accordionButton').removeClass('on');

//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
$('.accordionContent').slideUp('normal');

//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if($(this).next().is(':hidden') == true) {

//ADD THE ON CLASS TO THE BUTTON
$(this).addClass('on');

//OPEN THE SLIDE
$(this).next().slideDown('normal');
}

});


/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/

//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER
$('.accordionButton').mouseover(function() {
$(this).addClass('over');

//ON MOUSEOUT REMOVE THE OVER CLASS
}).mouseout(function() {
$(this).removeClass('over');
});

/*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/


/**************************************************************************************************** ****************
CLOSES ALL S ON PAGE LOAD
**************************************************************************************************** ****************/
$('.accordionContent').hide();

});



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum