DIV swap onclick?

**rebecca** · 07-29-2008, 06:04 PM

Hi,
I'm not that great with explaining, but here it goes:
I'm about to re-make my graphics site on acornrack. With acornrack, you can use variables in the Admin CP. The variables that i'm focused on are the ones that correspond with the user profile. Now, what i want exactly is a DIV swap onclick.

DIV
link 1|link 2|link 3

in which the info that goes along with link 1 will show up in the DIV, then when another link is clicked, the info that goes along with that link will take info from link 1's place.

I've tried TONS of codes and there's always some kind of error. Basically, most of the codes I've used don't seem to accept formatting in each individual section at all, not even font color or size.

I would post a link, but it wouldn't really help since the site is blank. If you understand remotely where I'm coming from, your help would be appreciated.

Thanks in advance :]

**jscheuer1** · 07-29-2008, 06:29 PM

Something like this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>SEO Detail click Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* {
background-color:white;
}
#triggers {
float:left;
border:1px solid #ccc;
}
#triggers div {
cursor:pointer;
}
#zero {
display:none;
color:red;
}
#first {
color:blue;
}
#second {
color:green;
}
#third {
color:#a52a2a;
}
</style>
<script type="text/javascript">
if(document.getElementById)
document.write('<style type="text/css">.detail {float:left;display:none;}#zero {display:block;}<\/style>');
function reveal(det){
if(!document.getElementById) return;
if (!document.getElementsByClassName){
document.getElementsByClassName = function(cn){
cn = cn.replace(/ +/g, ' ').split(' ');
var ar = [], testname = function(n){
for (var re, i = cn.length - 1; i > -1; --i){
re = new RegExp('(^|\W)' + cn[i] + '(\W|$)');
if(!re.test(n)) return false;
}
return true;
}
for(var d = document.all || document.getElementsByTagName('*'), i = 0; i < d.length; ++i)
if(testname(d[i].className))
ar[ar.length] = d[i];
return ar;
};
document.getElementsByClassName.spoof = true;
}
for (var d = document.getElementsByClassName('detail'), i = d.length - 1; i > -1; --i)
d[i].style.display = 'none';
document.getElementById(det).style.display = 'block';
if (document.getElementsByClassName.spoof)
document.getElementsByClassName.spoof = document.getElementsByClassName = null;
}
</script>
</head>
<body>
<div id="triggers">
<div onclick="reveal('first');">
1st Trigger
</div>
<div onclick="reveal('second');">
2nd Trigger
</div>
<div onclick="reveal('third');">
3rd Trigger
</div>
</div>
<div class="detail" id="zero">
This would be what people would see at page load.
</div>
<div class="detail" id="first">
This would be what people would see for the first clicked content.
</div>
<div class="detail" id="second">
This would be what people would see for the second clicked content.
</div>
<div class="detail" id="third">
This would be what people would see for the third clicked content.
</div>
</body>
</html>

?

**rebecca** · 07-29-2008, 06:39 PM

exactly like that
thank you so much

**rebecca** · 07-29-2008, 09:11 PM

dumb questions:
Is there any way i can display the DIVs in a horizontal row?
Right now they're displaying in a vertical column. And also, is there a way for there to be a second row of links?

**Nile** · 07-29-2008, 09:21 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>SEO Detail click Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* {
background-color:white;
}
#triggers {
float:left;
border:1px solid #ccc;
}
#triggers div {
cursor:pointer;
float: left;
padding-right: 5px;
padding-left: 5px;
padding-top: 2px;
padding-bottom: 2px;
border-right: 1px solid brown;
border-left: 1px solid brown;
}
#zero {
display:none;
color:red;
}
#first {
color:blue;
}
#second {
color:green;
}
#third {
color:#a52a2a;
}
</style>
<script type="text/javascript">
if(document.getElementById)
document.write('<style type="text/css">.detail {float:left;display:none;}#zero {display:block;}<\/style>');
function reveal(det){
if(!document.getElementById) return;
if (!document.getElementsByClassName){
document.getElementsByClassName = function(cn){
cn = cn.replace(/ +/g, ' ').split(' ');
var ar = [], testname = function(n){
for (var re, i = cn.length - 1; i > -1; --i){
re = new RegExp('(^|\W)' + cn[i] + '(\W|$)');
if(!re.test(n)) return false;
}
return true;
}
for(var d = document.all || document.getElementsByTagName('*'), i = 0; i < d.length; ++i)
if(testname(d[i].className))
ar[ar.length] = d[i];
return ar;
};
document.getElementsByClassName.spoof = true;
}
for (var d = document.getElementsByClassName('detail'), i = d.length - 1; i > -1; --i)
d[i].style.display = 'none';
document.getElementById(det).style.display = 'block';
if (document.getElementsByClassName.spoof)
document.getElementsByClassName.spoof = document.getElementsByClassName = null;
}
</script>
</head>
<body>
<div id="triggers">
<div onclick="reveal('first');">
1st Trigger
</div>
<div onclick="reveal('second');">
2nd Trigger
</div>
<div onclick="reveal('third');">
3rd Trigger
</div>
</div>
<div class="detail" id="zero">
This would be what people would see at page load.
</div>
<div class="detail" id="first">
This would be what people would see for the first clicked content.
</div>
<div class="detail" id="second">
This would be what people would see for the second clicked content.
</div>
<div class="detail" id="third">
This would be what people would see for the third clicked content.
</div>
</body>
</html>

That should do it.
Change the highlighted to change the color of the border.

**rebecca** · 07-29-2008, 09:26 PM

that did it ^^

**imnaclass** · 08-18-2008, 03:05 PM

Hello, is there a way to fade in and out when the divs swap?

**mburt** · 08-18-2008, 03:25 PM

Simple way, is with jQuery. A javascript plug-in.

Code:

$("#divobject").fadeIn("fast");
$("#divobject").fadeOut("slow");

http://www.jquery.com/

**chalkywhiteface** · 09-07-2008, 02:45 PM

Hi there,

I am quite new to jscript so any help would be great.

All this has been really useful but i was wondering if you could highlight the active trigger when it has been clicked. So if detail number 3 was displaying, the trigger that activated it would be highlighted.

Would/could this be done using a '.selected' class maybe?

Thanks in advance.

Ben