/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Accordion item will not reopen after closing

As stated in the thread title, my JS accordion items will not re-open after closing.

You can view it [URL=”http://www.atmtoronto.com/affiliate/design/faq.php”]here[/URL].

XHTML item sample:

[code=html]
<div id=”accordion”>
<dl class=”accordion” id=”slider”>
<dt>Item Heading</dt>
<dd>
<span>Sample accordion content.</span>
</dd>
</dt>
</dl>
</div>
[/code]

CSS:

[CODE]
#accordion {
width: 100%;
margin: 50px auto;
border: none;
}
.accordion {
width: 100%;
font: 12px Verdana,Arial;
color: #333;
}
.accordion dt {
padding: 3px 1px;
cursor: pointer;
background-color: #fff;
background-image: url(‘../images/arrow_down.gif’);
background-position: right center;
background-repeat: no-repeat;
color: #666;
}
.accordion dt:hover {
background-color: #1883f1;
color: #fff;
}
.accordion .open {
background-color: #ddd;
background-image: url(‘../images/arrow_up.gif’);
padding: 3px 10px;
}
.accordion dd {
overflow: hidden;
background-color: #f3f7fa;
margin: 0;
padding-left: 50px;
border-bottom: 1px solid #ddd;
}
.accordion span {
display: block;
border-top: none;
padding: 15px;
}
[/CODE]

Internal Javascript (before body tag)

[CODE]
<script type=”text/javascript”>
var slider=new accordion.slider(“slider”);
slider.init(“slider”,0,”open”);
</script>
[/CODE]

External Javascript

[CODE]
var accordion=function(){
var tm=sp=10;
function slider(n){this.nm=n; this.arr=[]}
slider.prototype.init=function(t,c,k){
var a,h,s,l,i; a=document.getElementById(t); this.sl=k?k:”;
h=a.getElementsByTagName(‘dt’); s=a.getElementsByTagName(‘dd’); this.l=h.length;
for(i=0;i<this.l;i++){var d=h[i]; this.arr[i]=d; d.onclick=new Function(this.nm+’.pro(this)’); if(c==i){d.className=this.sl}}
l=s.length;
for(i=0;i<l;i++){var d=s[i]; d.mh=d.offsetHeight; if(c!=i){d.style.height=0; d.style.display=’none’}}
}
slider.prototype.pro=function(d){
for(var i=0;i<this.l;i++){
var h=this.arr[i], s=h.nextSibling; s=s.nodeType!=1?s.nextSibling:s; clearInterval(s.tm);
if(h==d&&s.style.display==’none’){s.style.display=”; su(s,1); h.className=this.sl}
else if(s.style.display==”){su(s,-1); h.className=”}
}
}
function su(c,f){c.tm=setInterval(function(){sl(c,f)},tm)}
function sl(c,f){
var h=c.offsetHeight, m=c.mh, d=f==1?m-h:h; c.style.height=h+(Math.ceil(d/sp)*f)+’px’;
c.style.opacity=h/m; c.style.filter=’alpha(opacity=’+h*100/m+’)’;
if(f==1&&h>=m){clearInterval(c.tm)}else if(f!=1&&h==1){c.style.display=’none’; clearInterval(c.tm)}
}
return{slider:slider}
}();
[/CODE]

Anyone that can help, it would be greatly appreciated.

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@metropoliticaauthorNov 23.2009 — I've realized the problem is with the CSS. Once I have the final CSS, I'll post it here as [resolved].
Copy linkTweet thisAlerts:
@metropoliticaauthorNov 23.2009 — Okay, so it ended up being the border on the ".accordion dd". I dunno why, but everything is fine without it. I had put it there to properly separate an open accordion item with the closed one below it, but it isn't needed as the open item has a faint background color, and the heading below it has none.
×

Success!

Help @metropolitica spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...