Using an Image Slider inside a Content Accordian?

[naoiseo]

1) Script Title:
Accordion Content script (v1.9)

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

3) Describe problem:
I am looking to use a jQuery Image Slider inside a Content Accordion. On opening a header the Image Slider does not work, but by refeshing the page the script begins to work. Could somebodly please help me resolve this issue.

Link to a live example of the problem:
http://www.studionoc.com/darraghbreathnach/

Thanks.

[naoiseo]

Just to clarify this is not strictly a question of resolving a jQuery conflict. The 3rd party code I am using is configured properly. My question is that I was under the impression from this page that the DD Content Accordion can accommodate dynamic content. I am just unsure as to how to set this up correctly.

[azoomer]

It could be a question of loading order. What happens if you take these two scripts

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

and put them below the slider jquery, like this

<meta http-equiv=content-type content="text/html; charset=iso-8859-1">

	<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />	
	<script src="scripts/jquery.js" type="text/javascript"></script>	
	<script type="text/javascript" src="scripts/easySlider1.5.js"></script>
	<link rel="stylesheet" type="text/css" href="css/slider.css" />

	<script type="text/javascript">
		$(document).ready(function(){	
			$("#slider").easySlider({
				auto: true, 
				continuous: true,
				nextId: "nextBtn",
				prevId: "prevBtn"

				
			});
			$("#slider2").easySlider({
				auto: true, 
				continuous: true,
				nextId: "nextBtn2",
				prevId: "prevBtn2"
								
			});			
			$("#slider3").easySlider({
				auto: true, 
				continuous: true,
				nextId: "nextBtn3",
				prevId: "prevBtn3"
								
			});	
		});	
	</script>
<script src="scripts/ddaccordion.js" type=text/javascript></script>
<script src="scripts/accordian.js" type=text/javascript></script>	

[ddadmin]

Please note that your page is currently in violation of our usage terms, since the credit notice doesn't appear inline on the page. Please reinstate the credit notice: http://www.dynamicdrive.com/notice.htm

The issue at heart seems to be that the slider plugin only works on content that is visible at the time of the slider's initialization, currently done on document load. For content inside the Accordion script that's initially contracted when the slider is initialized, the slider doesn't work properly on it. That's why things only work when you reload the page, when the accordion content in question is visible from the start (due to persistence).

One way to get around this limitation from the Accordion script's standpoint is to initialize the slider for a content only when it has fully expanded. The onopenclose() event handler of the former reacts whenever a content is contracted or expanded. The idea is to initialize the slider for said content only when it has been expanded (and not on document load), and only the first time the content is expanded (you don't want to initialize the slider each time, as it starts to work erratically thereafter). With that said, the first thing you should do is remove the slider initialization code in the HEAD section of your page, so they are no longer done simply on document load:

	<script type="text/javascript">
		$(document).ready(function(){	
			$("#slider").easySlider({
				auto: true, 
				continuous: true,
				nextId: "nextBtn",
				prevId: "prevBtn"

				
			});

			$("#slider2").easySlider({
				auto: true, 
				continuous: true,
				nextId: "nextBtn2",
				prevId: "prevBtn2"
								
			});			
			$("#slider3").easySlider({
				auto: true, 
				continuous: true,
				nextId: "nextBtn3",
				prevId: "prevBtn3"
								
			});	
		});	
	</script>

Then inside accordion.js, extend the initialization code for your accordion script with the following onopenclose() event handler:

	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
	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: true, //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", "<img src='images/plus.gif' class='statusicon' size='' />", "<img src='images/minus.gif' class='statusicon' />"], //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
		if (state=="block" && index==1 && !$("#slider").data('isinit')){
			$("#slider").easySlider({
				auto: true, 
				continuous: true,
				nextId: "nextBtn",
				prevId: "prevBtn"
			});
			$("#slider").data('isinit', true) //remember this slider as having been initialized
		}
		if (state=="block" && index==2 && !$("#slider2").data('isinit')){
			$("#slider2").easySlider({
				auto: true, 
				continuous: true,
				nextId: "nextBtn",
				prevId: "prevBtn"
			});
			$("#slider2").data('isinit', true) //remember this slider as having been initialized
		}
		if (state=="block" && index==3 && !$("#slider3").data('isinit')){
			$("#slider3").easySlider({
				auto: true, 
				continuous: true,
				nextId: "nextBtn",
				prevId: "prevBtn"
			});
			$("#slider3").data('isinit', true) //remember this slider as having been initialized
		}
	}
})

Essentially what the extra code does is initialize the slider on an accordion content only after it has expanded, and doing it just once.

[naoiseo]

Hi, this is working perfectly for me now. Thank you so much for your help.
I have reinstated the copyright (it was never gone just in an external js file).

N