DIV mit Checkbox in Formular ein-/ausblenden mit toogle-Effekt

[dwex]

Hallo Leute,

ich habe momentan ein Formular bei dem ich zusätzliche Formularfelder mit einer Checkbox einblende.
Das Javascript sieht so aus:

function changeDisplay (id) { 
   if (document.getElementById(id).style.display != "block") { 
     document.getElementById(id).style.display = "block"; 
  } else { 
     document.getElementById(id).style.display = "none"; 
  } 
}

Jetzt möchte ich aber einen toogle-Effekt (aus jQuery) haben der das Div nicht einfach einblendet sondern "rein fährt".

Ich habe sowas gefunden leider funktioniert das ja nur mit allen a-Tags auf einer Seite und ich weis nicht wie ich das Umschreiben könnte.
Hier das Beispiel:

$(document).ready(function() {
	var links = $('.leistungen > a');
	var boxes = $('.leistungen > div').hide();
	
	$(document).on('click', '.leistungen > a', function(e) {
		e.preventDefault();

		$(this).toggleClass('active');
		
		var i = links.not(this).removeClass('active').end().index(this);
		var box = boxes.eq(i);
		
		boxes.not(box).slideUp();
		box.slideToggle();
	}); 
});

Ich würde mich über eure geschätzte Hilfe sehr freuen und bedanke mich im voraus dafür.

 

[tombe]

Wie sieht der HTML Code mit den Checkboxen, den DIVs und den Formuarfeldern aus?

Wenn ich dich richtig verstehe, dann soll beim Markieren einer Checkbox das dazugehörende Formularfeld bzw. der dazugehörende DIV-Container ein- oder ausgeblendet werden!?

NACHTRAG: Vielleicht bringt dich ja das deinem Ziel ein Stück näher.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){

$("#check1, #check2, #check3, #check4").click(function(){
	$(this.value).toggle("slow");
});

});
</script>

<input type="checkbox" name="check1" value="#div1" id="check1" />
<br />
<div id="div1" style="display: none;">DIV Container 1</div>
<input type="checkbox" name="check2" value="#div2" id="check2" />
<br />
<div id="div2" style="display: none;">DIV Container 2</div>
<input type="checkbox" name="check3" value="#div3" id="check3" />
<br />
<div id="div3" style="display: none;">DIV Container 3</div>
<input type="checkbox" name="check4" value="#div4" id="check4" />
<div id="div4" style="display: none;">DIV Container 4</div>

 

[jeipack]

$("#myCheckbox").click(function() {
$("#myDiv").toggle();
});

Das würde dein myDiv ein/ausfahren wenn du auf myCheckbox klickst.

Wenn du die Animation individueller willst musst du die jQuery Funktion .animate() benutzen:
http://api.jquery.com/animate/
zu unterst hat es ein paar Beispiele von denen du abkupfern kannst.

Edit: @tombe die ID des Divs in der Checkbox als Value zu halten ist cool