I have been wracking my brain thinking of a way to come up with displaying the below information. I attempted to create a select menu, but the menu was too long for the likes of IE. So I came up with the below idea. I just need a little help putting it together.
I have a list of 40 states, listed out as such:
Alabama
Arizona
Arkansas
California
Colorado
Connecticut
Delaware
District of Columbia
Floriday
Georgia
Idaho
Illinois
Iowa
Indiana
Etc.
When I click on a state, I want a div to open up undearneath that state showing information about that particular state.
When I click the state again it will then close that div. BUT, if I click on a different state, the state I had open previously will close and the new state I just clicked will open.
Does this make sense? Any help would be great.
Thanks soo much!
Hah yeah i sure feel like it. As you can tell I am pretty new to all of this and this one project is making me rip my hair out. There just doesn't seem to be a clean way to do this.
But yes, Vic's code would work. I was playing around with it, but I can't seem to figure out where I put the content that will be in the open div's? Every time I test it, the div info is overwriting the open and close.
And I want the "open" and "close" to be just the state's name.
??
Vic's code:
Code:
<!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" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.content {
width:200px;height:200px;background-Color:#FFFFCC;
}
.title {
width:200px;height:20px;background-Color:#FFCC66;
}
.state {
text-align:left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
display:none;
width: 500px;
padding-right: 10px;
padding-left: 30px;
padding-bottom: 10px;
}
.list {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
/*]]>*/
</style></head>
<body>
<div id="tst" >
<div class="content">
<div class="title" ><a rel="close" >open</a>
</div>
</div>
<div class="content" >
<div class="title" ><a rel="close" >open</a></div>
</div>
<div class="content" >
<div class="title" ><a rel="close" >open</a></div>
</div>
</div>
<script type="text/javascript">
var zxcAccordian={
init:function(o){
var id=o.ID,h=o.OpenHeight,ms=o.SlideDuration,obj=document.getElementById(id),clds=obj.childNodes,t,lk,h=typeof(h)=='number'?h:false,uh,ary=[],z0=0;
for (;z0<clds.length;z0++){
if (clds[z0].nodeType==1){
t=clds[z0].getElementsByTagName('DIV')[0];
if (t){
lk=t.getElementsByTagName('A')[0];
if (lk){
this.addevt(lk,'mouseup','Open',id,ary.length);
t=t.offsetHeight;
uh=h&&h>t?h:clds[z0].offsetHeight;
ary.push([clds[z0],t,t,uh,'dly'+z0,true,uh-t,lk,lk.rel,lk.innerHTML]);
clds[z0].style.height=t+'px';
}
}
}
}
this['zxc'+id]={
ary:ary,
ms:typeof(ms)=='number'&&ms>=0?ms:1000
}
},
Open:function(id,nu){
var o=this['zxc'+id],f,t,a;
if (o){
this.All(id,nu);
a=o.ary[nu];
a[7].innerHTML=a[a[5]?8:9];
clearTimeout(o[a[4]]);
f=a[1];
t=a[a[5]?3:2]
this.animate(o,a,f,t,new Date(),o.ms*Math.abs((t-f)/a[6])+10);
a[5]=!a[5];
}
},
All:function(id,nu){
var o=this['zxc'+id],f,t,a,z0=0;
if (o){
for (;z0<o.ary.length;z0++){
if (z0!=nu||typeof(nu)=='boolean'){
a=o.ary[z0];
clearTimeout(o[a[4]]);
f=a[1];
t=a[nu===true?3:2]
this.animate(o,a,f,t,new Date(),o.ms*Math.abs((t-f)/a[6])+10);
a[7].innerHTML=a[nu===true?8:9];
a[5]=nu!==true;
}
}
}
},
animate:function(o,ary,f,t,srt,mS){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
ary[1]=Math.max(now,f<0||t<0?now:0);
ary[0].style.height=ary[1]+'px';
}
if (ms<mS){
o[ary[4]]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS); },10);
}
else {
ary[1]=t;
ary[0].style.height=t+'px';
}
},
addevt:function(o,t,f,p,p1){
var oop=this;
if (o.addEventListener){
o.addEventListener(t,function(e){ return oop[f](p,p1);}, false);
}
else if (o.attachEvent){
o.attachEvent('on'+t,function(e){ return oop[f](p,p1); });
}
}
}
zxcAccordian.init({
ID:'tst', // the unique ID name of the parent DIV. (string)
// OpenHeight:100, //(optional) force the 'open' height of the content DIVs. (number, default = the offset height of the content DIV)
SlideDuration:500 //(optional) the slide duration in milli seconds. (number, default = 1000)
});
/*]]>*/
</script>
</body>
</html>
This is great! Thanks so much!
But is there a way that the opening divs can be auto in height? Some states have more content than others at times...and it seems like it's fixed at 200? But when I change it to auto it doesn't seem to work?
take out the openHeight line in the init function:
Code:
zxcAccordian.init({
ID:'tst', // the unique ID name of the parent DIV. (string)
SlideDuration:500 //(optional) the slide duration in milli seconds. (number, default = 1000)
});
and remove height:200px from the content class in the css
One last question (hopefully heh). I went to paste this into our Content management system to test it before I filled everything in. And it doesn't seem to be working as should. Do you know what the problem could be?? I attached what it looks like when previewing on our staging site.
it could be any number of things, maybe even depending on how your CMS compiles the page. can you put a demo page somewhere else on your site and provide a link?
Reply With Quote
i sure feel like it. As you can tell I am pretty new to all of this and this one project is making me rip my hair out. There just doesn't seem to be a clean way to do this.
Bookmarks