✔ Automatisches schließen per jQuery

[Exumaster]

Hallo,

ich habe folgendes Problem. Diese Code bewirkt das sich der Container automatisch öffnet, nun soll aber wenn ich z.B. auf #go2 klicke der vorherige Container wieder nach oben sliden. So das immer nur ein Container auf ist und sich nie alle öffnen können. Für Vorschläge und Ideen wäre ich dankbar.

greetz Exumaster

<script>
  $(document).ready(function(){
   $("#go1").click(function () {
      $("#block1").slideToggle("slow");
    });
   $("#go2").click(function () {
      $("#block2").slideToggle("slow");
    });
    $("#go3").click(function () {
      $("#block3").slideToggle("slow");
    }); 
	$("#go4").click(function () {
      $("#block4").slideToggle("slow");
    });
  });
  </script>

 

[Sven Mintel]

Moin,

das, was du dort bauen willst, ist in jQuery bereits vorhanden und nennt sich Accordion

 

[Exumaster]

Ich will es ja auf mein Script anwenden da meine Buttons horitizontal angeordnet sind. Da muss es doch was geben was ich darauf anwenden kann

greetz

 

[Sven Mintel]

Ein Blick auf den Container, der die ganzen #block's beinhaltet, wäre hilfreich für eine sinnvolle Lösung.

 

[Exumaster]

Hier wäre mein Code

<script>
  $(document).ready(function(){
   $("#go1").click(function () {
      $("#block1").slideToggle("slow");
    });
   $("#go2").click(function () {
      $("#block2").slideToggle("slow");
    });
    $("#go3").click(function () {
      $("#block3").slideToggle("slow");
    }); 
	$("#go4").click(function () {
      $("#block4").slideToggle("slow");
    });
  });
  </script>
<h3> 
	<input type="submit" id="go1" value=""></input>
	<input type="submit" id="go2" value=""></input>
	<input type="submit" id="go3" value=""></input>
	<input type="submit" id="go4" value=""></input>
</h3>
<div id="block1" style="display: none" class="clearfix">
	<div class="rubrik">test1</div>
		<div id="tes1"></div>
	</div>
<div id="block2" style="display: none" class="clearfix">
	<div class="rubrik">test2</div>
		<div id="test2"></div>
	</div>
<div id="block3" style="display: none" class="clearfix">
	<div class="rubrik">test3</div>
		<div id="test3"></div>
	</div>
<div id="block4" style="display: none" class="clearfix">
	<div class="rubrik">test4</div>
		<div id="test4"></div>
	</div>

greetz

 

[Sven Mintel]

$("div[id^='block']").hide();

würde alle div's, deren ID mit "block" beginnt, ausblenden.

Ein besserer Selektor ist da nicht machbar, da ich annehme, dass du die Klasse clearfix auch anderswo verwendest.

 

[DeluXe]

Oder einfach noch ein Container-Element um die "Blöcke" packen und dann mit

jQuery( '#container' ).children().slideUp();

alle schließen.

Ich denke jedenfalls, dass das der performantere Weg ist, ist aber nur reine Vermutung.

 

[Sven Mintel]

Oder einfach noch ein Container-Element um die "Blöcke" packen und dann mit

jQuery( '#container' ).children().slideUp();

alle schließen.

Ich denke jedenfalls, dass das der performantere Weg ist, ist aber nur reine Vermutung.

jo, das wäre es bestimmt, wenn da ein #container wäre ;-]

 

[Exumaster]

$("div[id^='block']").hide();

würde alle div's, deren ID mit "block" beginnt, ausblenden.

Ein besserer Selektor ist da nicht machbar, da ich annehme, dass du die Klasse clearfix auch anderswo verwendest.

Danke das passt super, ich würde gern ein Effect rein machen wie z.B. slideUp dann macht er es nicht da ich ja das hide rausnehmem muss. Hast du da noch was parat?

<script>
  $(document).ready(function(){
   $("#go1").click(function () {
      $("#block1").slideToggle("slow");
	  $("div[id^='block']").hide();
    });
   $("#go2").click(function () {
      $("#block2").slideToggle("slow");
	  $("div[id^='block']").hide();
    });
    $("#go3").click(function () {
      $("#block3").slideToggle("slow");
	  $("div[id^='block']").hide();
    }); 
	$("#go4").click(function () {
      $("#block4").slideToggle("slow");
	  $("div[id^='block']").hide();
    });
  });
  </script>

greetz

 

[Sven Mintel]

Naja, beim slideUp brauchst du kein hide(), weil das am Ende von slideUp automatisch passiert.

So sollte es gehen:

$("div[id^='block']:visible").slideUp('slow');