Accordion Script - Display a particular #content box on load

[invision2]

1) Script Title: Accordion Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ordion_dev.htm

3) Describe problem:

I'd like to display/open a certain content box first on the page, without appending a query string to the file name. I know with this example, it's demo.html?mypets=1 but I'd just like to have demo.html and in the Javascript say mypets=1...or whatever.

What is the easiest way to do this?


Thank you for any help

[jscheuer1]

Use the defaultexpanded property of the ddaccordion.init object, ex:

//Initialize first demo:
ddaccordion.init({
	headerclass: "mypets", //Shared CSS class name of headers group
	contentclass: "thepet", //Shared CSS class name of contents group
	revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", 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: [0], //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: ["", "openpet"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
	togglehtml: ["none", "", ""], //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(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
	}
})

Which will open the first one (javascript numbering usually begins with 0). You may also want the persiststate property set to false as shown as well.

[invision2]

Hi John,

Many thanks for the response.
It worked an absolute treat.

I was practically there But I'd tried (literally) index1 instead of just '1'.


Thanks again.

[invision2]

Oh, also, quick question.

If I want the colour of the hyperlink text to change when clicked on, how should I do this?

Heading
- Sub Page
- Sub Page

For example, when 'Heading' is closed'', then clicked('opened'), it should go yellow. I got it working in Firefox, but not IE

[jscheuer1]

You can use the toggleclass property of the ddaccordion.init object. If that's what you did and it is working in one browser and not another, I would need a link to your page to trouble shoot it. And I'd probably have to know which exact browsers you are talking about, including version numbers.

If you aren't using toggleclass and don't know how to, let me know.

[invision2]

Thanks again for the reply.

In my JS:

toggleclass: ["", "open"],

My CSS(this statement is placed at the foot of my CSS file):

.open {font-weight:bold;color:yellow}

On clicking the link, it bolds the text, but unfortunately doesn't make it yellow

Is this something to do with the colour values already on my anchors?


Any ideas?

[jscheuer1]

It can. In IE css inheritance (technically called cascade) sometimes works differently than in other browsers. You may have to define some or all of the psuedo classes for links with that class name (open). But you might get by with just the !important keyword:

.open {
font-weight: bold;
color: yellow!important;
}

[invision2]

Brilliance!

Many thanks again John for all your help.

[invision2]

I've a quick follow-up question if it's ok.

Is there a way to disable the submenu displaying and just letting the user click through to the main page?

Like if I have:

<a href="/ls/test/" class='menuitem submenuheader open'>Testers</a>
          <div class="submenu">
            <ul>
            <li><a href="/ls/test/0">Test 0</a></li>
            <li><a href="/ls/test/1">Test 1</a></li>
            </ul>
          </div>
          <a href="/ls/" class="menuitem">Test</a> 

they could then go straight through to /ls/test/, rather than the dropdown appear.

How could I achieve this? I just want this to happen on certain links with submenus, but not all of them.



Thanks for any pointers.

[jscheuer1]

Just get rid of its submenu and don't make it a part of the Accordion (drop the classes for that), it will then be an ordinary link. It may still be styled to look like the other Accordion elements around it. Use another similarly styled class for that.