# jQuery Tabs + Accordion



## FrogBecher (27. Dez 2010)

hallo!

ich bin einneuling in jquery... und weiß seid zwei tagen nicht mehr weiter...

ich habe hier im forum gesucht aber ich werde nicht aus dem ergebnis nicht schlau...

die idee ist ein schritt für schritt ein eingabe formular zu erstellen

aber autoHeight verschlugt sich! und ich finde den fehler nicht woran es liegen könnte...

bitte hilfe!

hier das übel


```
<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  
  <script>
  $(document).ready(function() {
    $("#tabs").tabs();
  });

 $(document).ready(function() {
    $("#accordion").accordion({ autoHeight: false });
  });

    $(function() {

        $('#wizard').accordion();

        $('#wizard :button').each(function (index, elm) {
            $(elm).click(function() {
                $('#wizard').accordion('activate', index + 1);
            });
        });

    });
  </script>
    
</head>
<body style="font-size:62.5%;">
  
<div id="tabs">
    <ul>
        <li><a href="#fragment-1"><span>tab 1</span></a></li>
        <li><a href="#fragment-2"><span>tab 2</span></a></li>
        <li><a href="#fragment-3"><span>tab 3</span></a></li>
        <li><a href="#fragment-4"><span>tab 4</span></a></li>
        <li><a href="#fragment-5"><span>tab 5</span></a></li>
    </ul>
    <div id="fragment-1">
    Test Text
    </div>
    <div id="fragment-2">
    <div id="wizard">
    <h3><a href="#step1">Step 1 / 9</a></h3>
    <div id="step1">
        <button type="button">Next &raquo;</button>
    </div>
    <h3><a href="#step2">Step 2 / 9</a></h3>
    <div id="step2">
        <button type="button">Next &raquo;</button>
    </div>
    <h3><a href="#step3">Step 3 / 9</a></h3>
    <div id="step2">
        <button type="button">Next &raquo;</button>
    </div>
    <h3><a href="#step4">Step 4 / 9</a></h3>
    <div id="step2">
        <button type="button">Next &raquo;</button>
    </div>    
    <h3><a href="#step5">Step 5 / 9</a></h3>
    <div id="step2">
        <button type="button">Next &raquo;</button>
    </div>    
    <h3><a href="#step6">Step 6 / 9</a></h3>
    <div id="step2">
        <button type="button">Next &raquo;</button>
    </div>    
    <h3><a href="#step7">Step 7 / 9</a></h3>
    <div id="step2">
        <button type="button">Next &raquo;</button>
    </div>    
    <h3><a href="#step8">Step 8 / 9</a></h3>
    <div id="step2">
        <button type="button">Next &raquo;</button>
    </div>    
    <h3><a href="#step9">Step 9 / 9</a></h3>
    <div id="step3">
        <button type="submit">Finish</button>
    </div>
</div>
    </div>
    <div id="fragment-3">
    Test Text
    </div>
    <div id="fragment-4">
    Test Text
    </div>
    <div id="fragment-5">
    Test Text
    </div>
</div>
</body>
</html>
```


----------



## firewarrior (27. Dez 2010)

Java ist nicht JavaScript! - Versuchs vllt. mal hier.


----------



## FrogBecher (27. Dez 2010)

schönen dank! hast du auch was zu sagen? außer destruktives


----------



## Bierhumpen (27. Dez 2010)

FrogBecher hat gesagt.:


> schönen dank! hast du auch was zu sagen? außer destruktives



Du bist hier im falschen Forum. Daher hast du logischerweise in der Suchfunktion auch nichts zu jQuery gefunden.


----------



## Illuvatar (27. Dez 2010)

Dem kann ich nichts hinzufügen... *verschoben*


----------



## tagedieb (28. Dez 2010)

Versuchs mal so. Hier findest du auch ein Beispiel.


```
<script>
  
  $(document).ready(function() {
		$("#tabs").tabs({
			collapsible: true
		});
		$("#wizard").accordion({
			collapsible: true,
			autoHeight: false
		});
	});

  $('#wizard :button').each(function (index, elm) {
    $(elm).click(function() {
      $('#wizard').accordion('activate', index + 1);
    });
  });

</script>
```


----------

