PDA

View Full Version : Accordion Content Tab Stuck in Explorer



annac
07-30-2010, 06:11 PM
1) Script Title: Accordion Content Script

2) Script URL (on DD): Accordion Content script (v1.9)
http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm

3) Describe problem:

The default tab that opens and is highlighted continues to stay highlighted in explorer even when you have switched tabs and other ones are selected. This is not a problem in FF or Safari.

I am not sure what code/css to include. What would be useful?

The page in question is http://www.4culture.org/test/

and I am referring to the bottom tabs "application, workshops..."

ddadmin
07-30-2010, 08:07 PM
The tabs aren't powered by DD accordion actually. From what I can tell the only relevant portion of your page that uses this script is upon clicking "Sample Applications"- the two contents inside this tab are.

I'm moving this to the general JavaScript area...

annac
07-30-2010, 08:28 PM
I have tried commenting out the different css files and it doesn't seem to make a difference. This makes me think it must be in the script?

ATTACHED SCRIPT


ddaccordion.init({
headerclass: "submenuheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: false, //persist state of opened contents within browser session?
toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["suffix"], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})


THERE IS ALSO DDACCORDIAN.JS BUT IT IS LONGER AND I THOUGHT I'D START WITH THESE OTHERS FIRST

SCRIPT AT TOP OF PAGE

<script type="text/javascript">
$(document).ready(function() {
$("ul.main.tabs").tabs("div.main.panes > div", {tabs: 'a.main'});

$("ul.nested.tabs").tabs("div.nested.panes > div", {tabs: 'a.nested'});
});
</script>


HTML


<!--tabs-->
<div id="tabsection">
<!-- tabs + content -->
<ul class="tabs main">
<li><a class="main">Application Info</a></li>
<li><a class="main">Workshops</a></li>
<li><a class="main">Sample Applications</a></li>
<li><a class="main">Past Awards</a></li>
<li><a class="main">Manage Your Award</a></li>
</ul>
</div>
<!--PANE 1 ////////////////////////////////////////////////////////////////-->
<div class="panes main">
<div>
<div class="panes_nested">
<div>
<div class="clear"></div>
<!-- activate accordian 1 -->
<script type="text/javascript">
$(function() {

$("#accordion_1").tabs("#accordion_1 div.pane", {tabs: 'h2', effect: 'slide'});
});
</script>
</div>
</div>
</div>