✔ Alle Elemente ausblenden, falls angeklicktes Element sichtbar dann auch dieses

[kharn]

Hallo zusammen,

leider konnte ich zu diesem Thema nichts finden, da ich nicht wirklich weiß wie ichs suchen könnte
Im Grunde möchte ich ein Accordion nachbauen, hab das auch soweit geschafft, was mich noch stört ist das wenn ich das geöffnete Element schließen möchte es sofort wieder auffährt, sprich es ist nach dem ersten Klick immer eins offen. Nun dachte ich mir das wenn ich abfrage ob das aktuelle Element geschlossen ist dieses geöffnet werden soll und sonst nix passiert.

Umgangssprachlich:
schließe alle Elemente
wenn aktuelles Element geschlossen dann öffne es

Eigentlich schien mir das recht trivial, aber irgendwie klappts doch nicht :/ Habt ihr eine Idee wie ich das umsetzen könnte?


Javascript:

$(document).ready(function(){
	$(".info").hide();	
	$(".project_bot").click(function(){
		$(".info:visible").slideUp(250);
		var id = $(this).attr('id');
		if ('#' + id + ':hidden') {
     	        	$('#' + id).slideDown(250);
		};
});
});

HTML:

   <div class="project">
	        <h2>Project 3</h2>
			<div class="project_container">
            <p class="info" id="proj_3">
            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
            ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
            amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
            odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
            </p>
            </div>
			<div class="project_bot" id="proj_3">open</div>

	        <h2>Project 2</h2>
			<div class="project_container">
            <p class="info" id="proj_2">
            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
            ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
            amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
            odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
            </p>
            </div>
			<div class="project_bot" id="proj_2">open</div>

	        <h2>Project 1</h2>
			<div class="project_container">
            <p class="info" id="proj_1">
            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
            ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
            amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
            odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
            </p>
            </div>
			<div class="project_bot" id="proj_1">open</div>
	</div>
    </div>

 

[Sven Mintel]

Moin,

so herumsollte es gehen:

$(document).ready(function(){
    $(".info").hide(); 
    $(".project_bot").click(function(){
        var target=$(this).prev().find('.info:first');
        $(target).slideToggle(250);
        $(".info:visible").not(target).slideUp(250);    
});
});

Alle sichtbaren(ausser dem angeklickten) werden ausgeblendet.
Bei dem angeklickten wird slideToogle() verwendet....das erkennt von selbst, was zu tun ist(jenachdem ob das Ziel :hidden oder :visible ist )

Den Selektor zum Finden des Zielelementes hab ich dabei mal verändert...du hast dort IDs mehrfach vergeben, was nicht legitim ist.
Der neue SElektor findet sein Ziel anhand der Knotenstruktur, IDs sind nicht vonnöten.

 

[kharn]

Hey vielen Dank hat wunderbar geklappt