✔ Ein- und Ausblenden mit jQuery

G

GN911

Erfahrenes Mitglied
Hallo,

ich möchte mit jQuery Ebenen ein- und ausblenden.
Das ganze soll so aussehen.

HTML: 
<a href="#dieseEbene">diese Ebene einblenden</a>
<div id="dieseEbene">
  Lorem Ipsum
</div>
 
<a href="#andereEbene">andere Ebene einblenden</a>
<div id="andereEbene">
  Lorem Ipsum
</div>

Gruß GN911
 
Morgen Maik,

so macht er es leider nicht!?
Der Link <a href="#test"> bekommt den gleichen Namen wie das <div id="test">

Code: 
$(document).ready(function()
{
    var linkID = $(this).parents('id');
    
    if('linkID') {
        $('id', this).hide();
    }
    
    $('linkID').click(
       function()
       {
        $(this).next().show('slow');
           $(this).attr({
            'title': 'ausblenden'
           })
           return false;
       },
       function()
       {
        $(this).next().hide('slow');
           $(this).attr({
            'title': 'einblenden'
           })
           return false;
       });
});

Gruß GN911
 
Hi,

wie sieht denn die Struktur des zugehörigen HTML-Bereichs aus?

Ansonsten ist linkID eine Variable und wird ohne Anführungszeichen angesprochen:
Code: 
if(linkID){ ... }

Desweiteren werden in jQuery Elemente über ihre ID angesprochen, indem die Doppelraute vorangestellt wird:
Code: 
$('#'+linkID).click( ... }

Ciao
Quaese
 
Hallo Quaese,

so mach er es auch nicht:

HTML: 
<a href="#dieseEbene">diese Ebene einblenden</a>
<div id="dieseEbene">
  Lorem Ipsum
</div>
 
<a href="#andereEbene">andere Ebene einblenden</a>
<div id="andereEbene">
  Lorem Ipsum
</div>
Code: 
$(document).ready(function()
{
	var linkID = $(this).parents('#'+linkID);
	
	if(linkID) {
		$('#'+linkID, this).hide();
	}
	
	$('#'+linkID).click(
   	function()
   	{
		$(this).next().show('slow');
	   	$(this).attr({
			'title': 'ausblenden'
	   	})
	   	return false;
   	},
   	function()
   	{
		$(this).next().hide('slow');
	   	$(this).attr({
			'title': 'einblenden'
	   	})
	   	return false;
   	});
});

Gruß GN911
 
Hi,

in jQuery ist eine Methode toggle enthalten, die für das Ein- und Ausblenden verwendet werden kann.

Weiterhin würde ich das Script dahingehend entwickeln, dass nach dem Laden des DOM alle Links durchlaufen werden, die im rel-Attribut einen Wert enthalten, der entscheidet, ob es sich um einen Togglelink handelt oder nicht (im Beispiel "toggle").

Die ermittelten Links werden mit Hilfe der Methode each durchlaufen. Im href-Attribut steht wie von dir angedeutet eine Doppelraute gefolgt von der ID des Elements, das getogglet werden soll.
Code: 
href="#IdDesToggleElements"
Daraus wird die erforderliche ID extrahiert.

Anschliessend wird dem Link die Funktion zum Togglen zugewiesen.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
  <!--
$(document).ready(function(){
  // Alle Links ermitteln, die zum Togglen dienen
  var arrA = $("a[rel='toggle']").each(function(intIndex){
    // ID des zugehörigen Toggle-Elements ermitteln
    var linkID = String($(this).attr('href')).substr(1, $(this).attr('href').length);
    // Element verstecken
    if(linkID){
      $('#'+linkID).hide();
    }

    // Togglefunktion an Link binden
    $(this).toggle(
      function(){
      	$('#'+linkID).show('slow'); // Einblenden
      },
      function(){
      	$('#'+linkID).hide('slow'); // Ausblenden
      }
    );
  });
});
 //-->
</script>
</head>
<body>
<a href="#dieseEbene" rel="toggle">diese Ebene einblenden</a>
<div id="dieseEbene">
  Lorem Ipsum
</div>

<a href="#andereEbene" rel="toggle">andere Ebene einblenden</a>
<div id="andereEbene">
  Lorem Ipsum
</div>
</body>
</html>

Vielleicht hilft dir das weiter.

Ciao
Quaese
 
Hi Quaese,

ich danke dir, das funktioniert.
Geht es das Script um 2 Sachen zu erweitern?
Ich hätte gern die Linkbezeichnung im title vorne mit angefügt und den Zustand ob Auf oder Zu in einem Cookie gespeichert.

var title = $("a").attr("title");


Code: 
    var arrA = $("a[rel='toggle']").each(function(intIndex){
    // ID des zugehörigen Toggle-Elements ermitteln
    var linkID = String($(this).attr('href')).substr(1, $(this).attr('href').length);
    // Element verstecken
    if(linkID){
      $('#'+linkID).hide();
    }
    
    // Togglefunktion an Link binden
    $(this).toggle(
        function(){
            $('#'+linkID).show(); // Einblenden
            $(this).attr({
              'title': 'ausblenden'
        });
      },
      function(){
            $('#'+linkID).hide(); // Ausblenden
            $(this).attr({
              'title': 'einblenden'
      });
      }
      );
    });
Gruß GN911
 
Hi,

die notwendigen Funktionen zur Verwaltung von Cookies findest du in den Webmaster FAQ.

Attribute werden in jQuery mit Hilfe der Methode attr werden als (key, value)-Paar übergeben, nicht als Objekt. Das heisst in deinem Fall in der Form
Code: 
$(this).attr('title', 'ausblenden');

Ciao
Quaese
 
Hi Quaese,

den Title gebe ich ja 'händisch' an. Was ich meine ist, <a href="'#derLink" title="gebe ich händisch an">DAS MEINE ICH</a>


Gruß GN911
 
Hi,

nächster Versuch:
Code: 
$(this).attr('title', 'ausblenden');
$(this).html($(this).attr('title'));

Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück