accordion scripts in webpage-maker (a web page building program)

**DrZooo** · 07-21-2008, 07:07 PM

1) Script Title: Accordion Content script (v1.5.1) and/or Bullet List Accordion Menu

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...daccordion.htm
and/or http://www.dynamicdrive.com/dynamici...enu-bullet.htm

3) Describe problem: I'm building a website for a non-profit organization but I only have basic computer training, so I'm using web-page maker. Its a great program, you don't need to use coding but you can enter in script. When I put in the script for the accordion menu it shows up, but is fully expanded and I can't get it to expand and contract (when its published)

If anyone could help me out i'd really appreciate it!

**rangana** · 07-22-2008, 01:34 AM

Does the script throws error at your end? Could you please provide a link to the page in question.

**DrZooo** · 07-22-2008, 02:06 AM

Hi, thanks for answering! It doesn't say any errors. I'm redoing the current website so its "under construction" but I published the page with the menu.

http://lethbridgecommunityfoundation.org/WEBPAGEMAKER/

thanks again

**rangana** · 07-22-2008, 02:26 AM

Look for this part in your code:

Code:

onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
 if (state=="block" && isuseractivated==true){ //if header is expanded as a result of the user clicking on it (versus expanded by default when page loads)
  header.style.backgroundColor="black" //change that header's background color to black
 }
}
})

Highlighted should be removed. Also your coding is invalid. There should only be one <head> and <body> tag. As well as the DTD.

Upload jquery-1.2.2.pack.js and ddacordion.js. Both does'nt exist (yet).

Fix those minor issues and get back to us.

**ddadmin** · 07-22-2008, 02:41 AM

Wow the Web-Page Maker program seems to have massacred your page.

Firstly, your references to the two .js files of the script (jquery and ddaccordion.js) near the top of the page is broken:

Code:

<script type="text/javascript" src="jquery-1.2.2.pack.js"></script>

<script type="text/javascript" src="ddaccordion.js">

/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>

Make sure you upload the jquery.js and ddacordion.js files to your server, so that http://lethbridgecommunityfoundation...-1.2.2.pack.js and http://lethbridgecommunityfoundation...ddaccordion.js exist. Then, remove all the scripts that follow- they shouldn't be there. Having done that, put back in place the initialization code for your menu, which by default looks like this:

Code:

<script type="text/javascript">

ddaccordion.init({
	headerclass: "expandable", //Shared CSS class name of headers group that are expandable
	contentclass: "categoryitems", //Shared CSS class name of contents group
	revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
	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: true, //persist state of opened contents within browser session?
	toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
	togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
	animatespeed: "normal", //speed of animation: "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
	}
})


</script>

Basically your goal is to get your page to look like the source provided in the cut/paste area on the menu page, unaltered: http://www.dynamicdrive.com/dynamici...enu-bullet.htm

**DrZooo** · 07-22-2008, 09:59 AM

It works now! i'm pretty sure I messed up the script somehow, because when I recopied it in and had the .js files in the right place it worked fine

. I hope its allright that I changed the colours of the menus, the Foundation has a "visual identity" and i'm trying to follow it.

thanks for the help!

Thread: accordion scripts in webpage-maker (a web page building program)

Thread Tools

Search Thread

accordion scripts in webpage-maker (a web page building program)

Bookmarks

Bookmarks

Posting Permissions