# jQuery - Slider funktioniert nicht im Akkordeon



## SaFl (21. Okt 2012)

Moin moin,

Liebe gemeinde. Dies ist meine erste Frage und ich hoffe ihr könnt mir helfen?! 
Falss ich im falschen Topic bin bitte verschieben.

Bin in HTML, CSS und PHP ziemlich fit. Für mein aktuelles Projekt reicht das leider nicht mehr aus. Ich war auf der Suche nach einem Akkordeon und nach einem ImageSlider für eine Art Bildergallerie. Ich wurde im Thema jQuery auch fündig. Habe einige Beispiele und Tutorials durch und beides für sich genommen funktioniert nun auch.

Nun mein Problem:

Wenn ich den Slider in das Akkordeon einbaue, funktioniert der Slider nicht mehr. Kennt ihr dieses Problem? 


```
<link href="neu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>
<script type="text/javascript" src="java.js"></script>
<script type="text/javascript" src="stepcarousel.js"></script>
<script type="text/javascript">

//Slider
stepcarousel.setup({
	galleryid: 'mygallery', //id of carousel DIV
	beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
	panelclass: 'panel', //class of panel DIVs each holding content
	autostep: {enable:false, moveby:1, pause:3000},
	panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true},
	defaultbuttons: {enable: true, moveby: 1, leftnav: ['button1.png', -40, 60], rightnav: ['button2.png', -3, 60]},
	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
	contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})

</script>
</head>
 
<body>


//Akkordeon
<div id="AccordionContainer" class="AccordionContainer">

  <div onclick="runAccordion(1);">
    <div class="AccordionTitle" onselectstart="return false;">
     <img src="button/1.png">
    </div>
  </div>
  <div id="Accordion1Content" class="AccordionContent">
    <div class='test'></div>
  </div>

  <div onclick="runAccordion(2);">
    <div class="AccordionTitle" onselectstart="return false;">
     <img src="button/2.png">
    </div>
  </div>
  <div id="Accordion2Content" class="AccordionContent">
    I Am Accordion 2.
  </div>


</div>


//Slider der in das Akkordeon soll
<div id="mygallery" class="stepcarousel">
	<div class="belt">
		<div class="panel">
			<img src="1.jpg" height="150px" />
		</div>
		<div class="panel">
			<img src="2.jpg" height="150px" />
		</div>
		<div class="panel">
			<img src="3.jpg" height="150px" />
		</div>
		<div class="panel">
			<img src="4.jpg" height="150px" />
		</div>
		<div class="panel">
			<img src="5.jpg" height="150px" />
		</div>
		<div class="panel">
			<img src="6.jpg" height="150px" />
		</div>
	</div>
</div>
```

Akkordeon:

```
var ContentHeight = 200;
var TimeToSlide = 250.0;

var openAccordion = '';

function runAccordion(index)
{
  var nID = "Accordion" + index + "Content";
  if(openAccordion == nID)
    nID = '';
   
  setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'"
      + openAccordion + "','" + nID + "')", 33);
 
  openAccordion = nID;
}

function animate(lastTick, timeLeft, closingId, openingId)
{  
  var curTick = new Date().getTime();
  var elapsedTicks = curTick - lastTick;
 
  var opening = (openingId == '') ? null : document.getElementById(openingId);
  var closing = (closingId == '') ? null : document.getElementById(closingId);
 
  if(timeLeft <= elapsedTicks)
  {
    if(opening != null)
      opening.style.height = ContentHeight + 'px';
   
    if(closing != null)
    {
      closing.style.display = 'none';
      closing.style.height = '0px';
    }
    return;
  }
 
  timeLeft -= elapsedTicks;
  var newClosedHeight = Math.round((timeLeft/TimeToSlide) * ContentHeight);

  if(opening != null)
  {
    if(opening.style.display != 'block')
      opening.style.display = 'block';
    opening.style.height = (ContentHeight - newClosedHeight) + 'px';
  }
 
  if(closing != null)
    closing.style.height = newClosedHeight + 'px';

  setTimeout("animate(" + curTick + "," + timeLeft + ",'"
      + closingId + "','" + openingId + "')", 33);
}
```

Danke im Voraus

Tom


----------



## Helgon (31. Okt 2012)

Kannste vllt den Code vom stepcarousel.js posten bitte

Und ja, ich kenn das Problem, dass manche Plugins sich da gegenseitig behindern... Was passiert den, wenn du den Slider in ein accordioncontent1 packst? geht der slider dann gar nicht mehr oder nur das akkorden nicht, oder gar nix?

Grüße


----------



## schlingel (31. Okt 2012)

Was spuckt denn die JS-Konsole aus?


----------



## SaFl (3. Nov 2012)

Guten Morgen, 
danke für eure Hilfe. Den Code gibt es nun nicht mehr, da ich mir eine andere Methode einfallen habe, wie ich meine Gallerie Präsentiere. Dies funktioniert einwandfrei.

Trotzdem Danke für die Mühe!


----------

