I'm not very experienced with javascript, but I have a bit of code that works perfectly for me that expands/collapses a div without any animation from top to bottom. I'm looking for the same exact code that lets me expand/collapse from left to right.
I've done my due diligence and have search many forums with limited luck (I've only found one that is animated that I can't turn off the animation). Can someone point me in the right direction to code that does exactly the same as what I've posted below except from left to right?
Code:
// code to keep collapsed on opening
function pageLoad() {
collapseAll($('wrapper1-sub','wrapper2-sub','wrapper3-sub','wrapper4-sub','wrapper5-sub','wrapper6-sub','wrapper7-sub','wrapper8-sub','wrapper9-sub','wrapper10-sub','wrapper11-sub','wrapper12-sub'));
}
addEvent(window,'load',pageLoad);
//code to work the collapse
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
function collapseAll(objs) {
var i;
for (i=0;i<objs.length;i++ ) {
objs[i].style.display = 'none';
}
}
function $() {
var elements = new Array();
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}
function addEvent( obj, type, fn ) {
if (obj.addEventListener) {
obj.addEventListener( type, fn, false );
EventCache.add(obj, type, fn);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent( "on"+type, obj[type+fn] );
EventCache.add(obj, type, fn);
}
else {
obj["on"+type] = obj["e"+type+fn];
}
}
var EventCache = function(){
var listEvents = [];
return {
listEvents : listEvents,
add : function(node, sEventName, fHandler){
listEvents.push(arguments);
},
flush : function(){
var i, item;
for(i = listEvents.length - 1; i >= 0; i = i - 1){
item = listEvents[i];
if(item[0].removeEventListener){
item[0].removeEventListener(item[1], item[2], item[3]);
};
if(item[1].substring(0, 2) != "on"){
item[1] = "on" + item[1];
};
if(item[0].detachEvent){
item[0].detachEvent(item[1], item[2]);
};
item[0][item[1]] = null;
};
}
};
}();
addEvent(window,'unload',EventCache.flush);
<div id="wrapper1"><a onclick="switchMenu('wrapper1-sub'); changeDivImage1();"><h3>Lorem Ipsum</h3></a>
<div id="wrapper1-sub"> <p>Lorem ipsum dolor sit amet, olim voco enim, esca minim, fatua hendrerit pneum, pneum comis amet meus autem eros. Ludus odio at, enim ullamcorper utrum si tation et feugait. </p> </div>
</div>
<div id="wrapper2"><a onclick="switchMenu('wrapper2-sub'); changeDivImage2();"><h3>Lorem Ipsum</h3></a>
<div id="wrapper2-sub"> <p>Lorem ipsum dolor sit amet, olim voco enim, esca minim, fatua hendrerit pneum, pneum comis amet meus autem eros. Ludus odio at, enim ullamcorper utrum si tation et feugait. </p> </div>
</div>
Some of the code you pasted is a little convoluted and poorly written, so I only changed/fixed what I needed to...Is this roughly what you had in mind?:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Collapse DIVs</title>
<style type="text/css">
#wrapper1, #wrapper2 {
width: 300px;
min-height: 22px;
background-color:#eee;
border-top: #666 dotted thin;
margin:0;
}
h3 {
font-size:18px;
line-height:18px;
width:300px;
margin:0;
}
#wrapper1-sub, #wrapper2-sub {
width:500px;
}
h3, #wrapper1-sub, #wrapper2-sub {
float:left;
}
h3 a {
display:block;
background: url("images/click-open.jpg") top right no-repeat;
padding:12px 0 12px 12px;
}
p {
margin:10px 0 12px 0;
}
.sub-text {
float:left;
width:450px;
margin:10px 0 12px 0;
}
.sub-arrow {
float:left;
width:50px;
text-align:right;
}
</style>
<script type="text/javascript">
// code to keep collapsed on opening
function pageLoad() {
collapseAll($('wrapper1-sub','wrapper2-sub'));
}
addEvent(window,'load',pageLoad);
//code to work the collapse
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = 'none';
el.parentNode.style.width = '300px';
el.parentNode.style.backgroundColor = '#eee';
el.parentNode.getElementsByTagName('a')[0].style.background = 'url("images/click-open.jpg") top right no-repeat';
}
else {
el.style.display = '';
el.parentNode.style.width = '800px';
el.parentNode.style.backgroundColor = '#ddd';
el.parentNode.getElementsByTagName('a')[0].style.background = 'none';
}
}
function collapseAll(objs) {
var i;
for (i=0;i<objs.length;i++ ) {
objs[i].style.display = 'none';
}
}
function $() {
var elements = new Array();
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}
function addEvent( obj, type, fn ) {
if (obj.addEventListener) {
obj.addEventListener( type, fn, false );
EventCache.add(obj, type, fn);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent( "on"+type, obj[type+fn] );
EventCache.add(obj, type, fn);
}
else {
obj["on"+type] = obj["e"+type+fn];
}
}
var EventCache = function(){
var listEvents = [];
return {
listEvents : listEvents,
add : function(node, sEventName, fHandler){
listEvents.push(arguments);
},
flush : function(){
var i, item;
for(i = listEvents.length - 1; i >= 0; i = i - 1){
item = listEvents[i];
if(item[0].removeEventListener){
item[0].removeEventListener(item[1], item[2], item[3]);
};
if(item[1].substring(0, 2) != "on"){
item[1] = "on" + item[1];
};
if(item[0].detachEvent){
item[0].detachEvent(item[1], item[2]);
};
item[0][item[1]] = null;
};
}
};
}();
addEvent(window,'unload',EventCache.flush);
</script>
</head>
<body>
<div id="wrapper1">
<h3><a onclick="switchMenu('wrapper1-sub');">Business Process Improvement</a></h3>
<div id="wrapper1-sub">
<div class="sub-text">Leveraging qualitative methods such as focused interviews and quantitative methods such as Six Sigma and Lean, we will analyze business process to understand opportunities to accelerate cycle time, improve quality and reduced costs. Our proven methods of Process Analysis extend far beyond traditional process mapping activities and consider available tools, technology, organization requirements and the ultimate business issue we are solving for. Where appropriate, Attadale leverages dynamic modeling tools for enhanced scenario development.</div>
<div class="sub-arrow"><img src="images/click-close.jpg" alt="" onclick="switchMenu('wrapper1-sub');" /></div>
<div style="clear:both"></div>
</div>
<div style="clear:both"></div>
</div>
<div id="wrapper2">
<h3><a onclick="switchMenu('wrapper2-sub');">Business Process Outsourcing</a></h3>
<div id="wrapper2-sub">
<div class="sub-text">Reduced cost, increased capabilities or speed to market ? there are many reasons companies outsource. Attadale understands how to assess the business impact, define requirements and success factors and manage the transition. We deploy a proven methodology for developing outsource vendor requirements and conducting vendor analysis.</div>
<div class="sub-arrow"><img src="images/click-close.jpg" alt="" onclick="switchMenu('wrapper2-sub');" /></div>
<div style="clear:both;width:0"></div>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>
Before you post, read our: 
