DIVs alternierend mit jQuery ein- und ausblenden

Milev · #1 (**permalink**) 29.11.2010, 19:38

Guten Abend,
ein Anfängerproblem (Bitte um Nachsicht):

Auf einer HTML-Seite habe ich eine Reihe von Überschriften (hier Kursbezeichnungen). Direkt unter jeder Kursbezeichnung sollen jeweils eine Beschreibung des Kurses und die Termine des Kurses alternierend (also immer nur Termine oder Beschreibung) nach Anklicken angezeigt werden können. Etwa so:

Kurs eins
Kursbeschreibung | Kurstermine

HTML-Code:

Kursbezeichnung
<div id="container">
  <ul>
    <li class="oeffner" id="1">Kursbeschreibung</li>
    <li class="oeffner" id="2">Kurstermine</li>
  </ul>

  <div class="box" id="11">
     Beschreibung....
  </div>
  <div class="box" id="12">
     Termine ...
  </div>

Das Ganze wiederholt sich auf der Seite für bis zu 15mal. Die Listeneinträge sind nebeneinander angeordnet. Ich habe die Lösung mit jQuery probiert:

Code:

$(document).ready(function(){
  $('.oeffner').click(function(){
    var this_id = "#1" + $(this).attr('id');
    
    $(this_id).slideToggle(500);
  })
});
</script>

Mir fehlt jetzt noch, dass eventuell geöffnete DIVs (auch unter anderen Überschriften) geschlossen werde müssen. Außerdem muss es doch eleganter gehen..

Für jeden Tipp dankbar..

Gruß
Milev

emha · #2 (**permalink**) 04.12.2010, 13:17

Code:

$(function(){

    $("#11").hide();
    $("#22").hide();    

    $("#1).click(function(){
        $("#11").show("slow");
    });
    $("#2").click(function(){
        $("#11").hide("slow");
        $("#22").show("slow");
    });
});

Wenn ich dein Problem richtig verstanden habe, dann würd ichs so machen

Grüße,
emha

XHTMLvalid · #3 (**permalink**) 05.12.2010, 14:18

Wenn alle "Boxen" die class box haben kann man auch einfach mit folgendem Code alle "ausblenden":

Code:

$(".box").hide();

Würde dann quasi so aussehen:

Code:

$(document).ready(function(){
$(".box").hide();
  $('.oeffner').click(function(){
    var this_id = "#1" + $(this).attr('id');
    
    $(this_id).slideToggle(500);
  });
});

Walter IT-Services · #4 (**permalink**) 08.12.2010, 05:03

IDs sollten immer mit einem Buchstaben beginnen

LG
Micha

nevermind · #5 (**permalink**) 09.12.2010, 08:51

Sollten?

Zitat:

Sonderzeichen in Selektoren

Der Name für alle Selektoren darf nur aus Groß- oder Kleinbuchstaben (a-z, A-Z), Ziffern (0-9) und dem Bindestrich (-) bestehen und müssen mit einem Buchstaben anfangen. Der Unterstrich _ sollte nicht unbedingt verwendet werden, da dieser nicht von Anfang an zur CSS-Spezifikation gehörte und somit von einigen älteren Browsern nicht interpretiert wird.

Quelle: CSS 4 You - The Finest in Stylesheets: Workshop CSS: Teil 3 - Selektoren I

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
jQuery slidetoggle mehrer divs	skip23	Javascript & Ajax	1	29.03.2011 09:53
Divs ein- und ausblenden mit JS	Dragonate	CSS	0	21.01.2010 13:47
jQuery - Selektieren eines divs	qde	Javascript & Ajax	7	09.12.2008 11:56
Bg in einzelnen Divs ausblenden?	Phöney	CSS	3	02.04.2008 18:00
Divs ein und ausblenden	Markus72	Javascript & Ajax	2	08.10.2007 18:07