---
title: "JQuery collapser einbinden"
url: "https://www.typo3.net/d/102484-jquery-collapser-einbinden"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage"]
created: "2010-11-19"
last_reply: "2010-12-06"
replies: 5
solved: false
page: 1
pages: 1
lang: "de"
---

# JQuery collapser einbinden

TYPO3 › Menüs · 5 Antworten · gestartet 2010-11-19

## Eröffnungsbeitrag

**kuan yin** · 2010-11-19 · [Beitrag #1](https://www.typo3.net/d/102484-jquery-collapser-einbinden/1)

Hallo,
ich möchte auf meine Seite eine Menus Liste einbinden mit JQUery collapser.
Die Untermenu sollen erst angezeigt werden, wenn das entwsprechende Hauptmenu angeklickt ist, etwa wie im demo6 hier <http://www.aakashweb.com/resources/pages/demos/jquery-collapser/>.

Meine Menus und Untermenu sind jetzt gleichzeitig angezeigt.
WEiß jemand wie ein JQUery function eingebunden wird?
Danke im Voraus

## Antworten

### [#2](https://www.typo3.net/d/102484-jquery-collapser-einbinden/2) · trainerth · 2010-11-19

Na auf der Seite findest du doch eigentlich alles was du brauchst.

Das Javascript:

```javascript
$(document).ready(function(){

	$('.panel').hide();
	
	$('.demo6').collapser({
		target: 'next',
		effect: 'slide',
		changeText: 0,
		expandClass: 'expIco',
		collapseClass: 'collIco'
	}, function(){
		$('.panel').slideUp();
	});

});
```

Nicht vergessen auch jQuery einzubinden
also: jquery.js und jquery.collapser.js und alles vielleicht über headerData einbinden.

und dann das Memü mit der Syntax bauen:

```html
<h4 class="demo6">Heading 1</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
	
<h4 class="demo6">Heading 2</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

<h4 class="demo6">Heading 3</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
	
<h4 class="demo6">Heading 4</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
```

### [#3](https://www.typo3.net/d/102484-jquery-collapser-einbinden/3) · kuan yin · 2010-11-25

Hallo trainerth,
danke für deine Antwort.
ich habe das demo mit einfache javascript, Html und Css Dateien getestet, und es funktionniert.
So bald ich das selbe in TypoScript umsetze, funktionniert das nicht.

### [#4](https://www.typo3.net/d/102484-jquery-collapser-einbinden/4) · kuan yin · 2010-11-25

Was ich eigentlich erstellen will ist ein ein- und ausklappbar Menu in Typoscript.
So was wie:
Menu1(active)
 Menu11
 Menu12
Menu2
Menu3
Menu4

Wo, jedes Menu unterseiten hat, ich will nur das Menu ausklappen, was active ist, ohne auf eine neue Seite zu laden.

Zur Zeit werden alle Haupt und Untermenus ausgeklappt, aber wie schließe ich die Menus, die nicht Aktiv sind?

Hier ist mein TypoScript

```typoscript
lib.menu = COA
 lib.menu{
   
  10 = TEXT   
   10{
     insertData =1
     data = page:title
     wrap = <h2>|</h2>
   }
   20 = HMENU
   20{    
     entryLevel =1
     special = directory  
     special.field = pid  
     wrap=<ul>|</ul>
     1= TMENU
     1{    
        
        expAll = 1   
        noBlur = 1
       NO=1
       NO.wrapItemAndSub =<li><a href="#">|</a></li>
       NO.doNotLinkIt=1
              
       CUR< .NO
       CUR.linkWrap=<li><a class="active">|</a></li>
       CUR.doNotLinkIt=1
       
       ACT< .NO
       ACT.ATagParams=class="active"
       
       }
      2= TMENU
     2{
      NO = 1
      NO.wrapItemAndSub =<li>|</li>
       NO.ATagParams=class="sub"
       CUR< .NO
       CUR=1
       CUR.linkWrap=<li><a class="sub">|</a></li>
       CUR.doNotLinkIt=1
       ACT< .NO
       ACT=1
      ACT.ATagParams=class="sub"    
     }            
      
       }
     

 }
```

### [#5](https://www.typo3.net/d/102484-jquery-collapser-einbinden/5) · trainerth · 2010-11-26

Naja kann ja auch nicht klappen.
Du baust die geforderte Struktur nicht nach mit deinem TS.
Außerdem ist das menü so nicht richtig.

der Anfang:

```typoscript
lib.menu = COA
lib.menu{
   
	10 = TEXT   
	10 {
	     insertData =1
	     data = page:title
	     wrap = <h4 class="demo6">|</h4>
	}
	
	20 = HMENU
	20 {
		#entryLevel =1 <- Brauchst du nicht, da special = directory  
		special = directory  
		#special.field = pid  <- special.value = hier deine PID also z.B. die der Root seite (1)
		special.value = 1
		wrap=<ul>|</ul>
		
		1= TMENU
		1 {    
			#expAll = 1 <- Finde ich ist selbsterklärend, willst du alle ausklappen...
			expAll = 0 
			noBlur = 1
				
			NO = 1
			NO.wrapItemAndSub = <li class="panel">|</li>
			NO.doNotLinkIt = 1
		      
			CUR < .NO
			CUR = 1
			#CUR.linkWrap=<li><a class="active">|</a></li> <- Was soll sowas? 
			#Du über nimmst das wrap aus dem NO und ein a brauch da sowieso nicht drum!
			CUR.ATagParams = class="active"
			CUR.doNotLinkIt = 1
	       
			ACT < .NO
			ACT = 1
			ACT.ATagParams = class="active" # <-Hier ist es sogar richtig....
		}
		
		2 = TMENU
		2 {
			NO = 1
			NO.wrapItemAndSub = <li>|</li>
			NO.ATagParams = class = "sub"
	 
			CUR< .NO
			CUR=1
			CUR.linkWrap = <li>|</li>
			CUR.doNotLinkIt=1
			
			ACT < .NO
			ACT = 1
			ACT.ATagParams = class = "sub"    
		}
       }
 }
```

Desweiteren nicht vergessen wie erwähnt die Dateien zu laden und den aufruf der funktionen.

### [#6](https://www.typo3.net/d/102484-jquery-collapser-einbinden/6) · kuan yin · 2010-12-06

Hallo trainerth,
vielen dank für dein Beitrag, ich habe das Problem gelöst.
Ich brauchte 3 ebene, mit 1=2 , und der dritte wie ich das menu 2 hatte.
Und es hat geklappt!
Danke

---

Quelle: „JQuery collapser einbinden“, typo3.net, https://www.typo3.net/d/102484-jquery-collapser-einbinden
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.