✔ Div ein- & ausblenden per onClick

bensky · 20. Juli 2007

Hi Leute,
ich habe folgendes Problem mit diesem Script:

Es funktioniert soweit nur möchte ich das der Schriftzug "Zeigen" beim draufklicken auch verschwindet und nur wieder auftaucht wenn man im DIV schließen klickt.
Also quasi das der Schriftzug durch den DIV Bereich ersetzt wird

Ich kriege es ums verrecken nicht hin, hat Jemand eine Idee?

Schon mal danke für die Hilfe.

Code:

<script language="JavaScript" type="text/JavaScript">
<!--
var box = new Array();
box[0]  = 'mail0';

// usw.
function show(id)
{
        if(document.getElementById(id).style.display=="none")
        {
                for(i=0;i<box.length;i++)
                {
                        document.getElementById(box[i]).style.display="none";
                }

                document.getElementById(id).style.display="block";
        }
        else
        {
                document.getElementById(id).style.display="none";
        }
}
//-->
</script>


<table width="650" border="0" cellspacing="0" cellpadding="0">
 
<!---teste0-----> 
  <tr><td>
  <a href="#" onClick="show('mail0');"> Zeigen</a>
  </td></tr>
  
  <tr><td>
  <div id="mail0" style="display:none;">
   <table width="650" border="1" cellpadding="0" cellspacing="0" bordercolor="#996600" bgcolor="#999933">
   <tr>
   <td><div align="right"><a href="#" onClick="show('mail0');"><font color="#FFFFFF">[schließen]</font></a></div></td>
   </tr>
   </table>
  </div>
  </td></tr> 
<!---teste1----->
<!---teste2----->  
<!---teste3----->
</table>

terravotion · 20. Juli 2007

Ich glaube das sollte funktionieren wenn du das "Zeigen" in einen span legst und diesem span ne ID zuweist

Code:

<span id="zeigen">

und dann beim "draufklicken" solltest du doch eigentlich Code ausführen können

Code:

zeigen.value=""

.

Und umgekehrt für wenn du es angezeigt haben willst:

Code:

zeigen.value="Zeigen"

Ich probiers nachher mal nachzubauen...

terravotion · 20. Juli 2007

Sola, ich habs nachgebaut:

Beachte bitte, dass ich jetzt mal so zums zeigen einen weiteren Übergabewert gemacht habe und du so steuern kannst ob das "Zeigen" angezeigt werden soll oder nicht.

Weiter habe ich den <span> in den <a href=""> genommen, so kann man drauf zugreifen... Weiss nicht, vielleicht nicht die "eleganteste Lösung" aber funktioniert so sicher...

HTML:

<script language="JavaScript" type="text/JavaScript">
<!--
var box = new Array();
box[0]  = 'mail0';

// usw.
function show(id, id2) {
	
	if(document.getElementById(id2).id == 'zeigen') {
		if(document.getElementById(id2).innerHTML == 'Zeigen') {
			document.getElementById(id2).innerHTML = "";
		} else {
			document.getElementById(id2).innerHTML = "Zeigen";
		}
	}
	
	
        if(document.getElementById(id).style.display=="none")
        {
                for(i=0;i<box.length;i++)
                {
                        document.getElementById(box[i]).style.display="none";
                }

                document.getElementById(id).style.display="block";
        }
        else
        {
                document.getElementById(id).style.display="none";
        }
}
//-->
</script>


<table width="650" border="0" cellspacing="0" cellpadding="0">
 
<!---teste0-----> 
  <tr><td>
  <a href="#" onClick="show('mail0', 'zeigen');"><span id="zeigen">Zeigen</span></a>
  </td></tr>
  
  <tr><td>
  <div id="mail0" style="display:none;">
   <table width="650" border="1" cellpadding="0" cellspacing="0" bordercolor="#996600" bgcolor="#999933">
   <tr>
   <td><div align="right"><a href="#" onClick="show('mail0', 'zeigen');"><font color="#FFFFFF">[schließen]</font></a></div></td>
   </tr>
   </table>
  </div>
  </td></tr> 
<!---teste1----->
<!---teste2----->  
<!---teste3----->
</table>

bensky · 20. Juli 2007

Also ich finde das schon recht elegant

Nun steh ich aber schon wieder bei meinem ursprünglichen Problem, welches ich im ersten Beispiel weggelassen habe da ich versuchen wollte das selber zu lösen, leider bisher ohne erfolg. Ich möchte nicht nur ein, sondern mehrere von diesen Dingern einbinden, so das ich auf eins klicke und das andere wieder zufährt oder wie gehabt auf schließen klicke.

Hier mal mein Code, vielleicht findest du den Fehler ehr als ich

Aber auf jeden Fall schon mal danke für deinen ersten Tipp.

Code:

<script language="JavaScript" type="text/JavaScript">
<!--
var box = new Array();
box[0]  = 'mail0';
box[1]  = 'mail1';

// usw.
function show(id, id2) {
	
	if(document.getElementById(id2).id == 'zeigen') {
		if(document.getElementById(id2).innerHTML == 'Zeigen') {
			document.getElementById(id2).innerHTML = "";
		} else {
			document.getElementById(id2).innerHTML = "Zeigen";
		}
	}
	
	
        if(document.getElementById(id).style.display=="none")
        {
                for(i=0;i<box.length;i++)
                {
                        document.getElementById(box[i]).style.display="none";
                }

                document.getElementById(id).style.display="block";
        }
        else
        {
                document.getElementById(id).style.display="none";
        }
}
//-->
</script>


<table width="650" border="0" cellspacing="0" cellpadding="0">
 
<!---teste0-----> 
  <tr><td>
  <a href="#" onClick="show('mail0', 'zeigen');"><span id="zeigen">Spalte 1 öffnen</span></a>
  </td></tr>
  
  <tr><td>
  <div id="mail0" style="display:none;">
   <table width="650" border="1" cellpadding="0" cellspacing="0" bordercolor="#996600" bgcolor="#999933">
   <tr>
   <td><div align="right"><a href="#" onClick="show('mail0', 'zeigen');"><font color="#FFFFFF">[schließen]</font></a></div></td>
   </tr>
   </table>
  </div>
  </td></tr> 
<!---teste1----->
  <tr><td>
  <a href="#" onClick="show('mail1', 'zeigen');"><span id="zeigen">Spalte 2 öffnen</span></a>
  </td></tr>
  
  <tr><td>
  <div id="mail1" style="display:none;">
   <table width="650" border="1" cellpadding="0" cellspacing="0" bordercolor="#996600" bgcolor="#999933">
   <tr>
   <td><div align="right"><a href="#" onClick="show('mail1', 'zeigen');"><font color="#FFFFFF">[schließen]</font></a></div></td>
   </tr>
   </table>
  </div>
  </td></tr> 
<!---teste2----->  
<!---teste3----->
</table>

Quaese · 20. Juli 2007

Hi,

mein Vorschlag, das Problem zu lösen:
Gib allen relevanten Elementen zu einer Toggle-Einheit ein eindeutiges ID-Präfix. Ergänzt wird dies durch
beschreibende Suffixes ("_link", "_toggle"). An die Funktion wird nun nur noch das Präfix übergeben.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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 type="text/javascript">
<!--
var strOldPreId = null;

function show(strPreId){
  if(strPreId != strOldPreId){
    if(strOldPreId != null){
      // Offene Togglebox schliessen
      document.getElementById(strOldPreId+"_toggle").style.display = "none";
      document.getElementById(strOldPreId+"_link").style.display = "";
    }

    document.getElementById(strPreId+"_toggle").style.display = "block";
    document.getElementById(strPreId+"_link").style.display = "none";
    strOldPreId = strPreId;
  }else{
    document.getElementById(strPreId+"_toggle").style.display = "none";
    document.getElementById(strPreId+"_link").style.display = "";
    strOldPreId = null;
  }
}
// -->
</script>

</head>
<body>
<table width="650" border="0" cellspacing="0" cellpadding="0">
  <tr><td>
  <a href="#" onClick="show('mail0');" id="mail0_link" title="Spalte 1 öffnen">Spalte 1 öffnen</a>
  </td></tr>

  <tr><td>
  <div id="mail0_toggle" style="display:none;">
   <table width="650" border="1" cellpadding="0" cellspacing="0" bordercolor="#996600" bgcolor="#999933">
   <tr>
   <td><div align="right"><a href="#" onClick="show('mail0');"><font color="#FFFFFF">[schließen]</font></a></div></td>
   </tr>
   </table>
  </div>
  </td></tr>
  <tr><td>
  <a href="#" onClick="show('mail1');" id="mail1_link" title="Spalte 2 öffnen">Spalte 2 öffnen</a>
  </td></tr>

  <tr><td>
  <div id="mail1_toggle" style="display:none;">
   <table width="650" border="1" cellpadding="0" cellspacing="0" bordercolor="#996600" bgcolor="#999933">
   <tr>
   <td><div align="right"><a href="#" onClick="show('mail1');"><font color="#FFFFFF">[schließen]</font></a></div></td>
   </tr>
   </table>
  </div>
  </td></tr>
</table>
</body>
</html>

Ciao Quaese

bensky · 20. Juli 2007

Man, das funktioniert ja 1000 mal besser als meine Idee. Ich danke dir vielmals!
Sehr geile Umsetzung

Gruß

✔ Div ein- & ausblenden per onClick

bensky

Erfahrenes Mitglied

terravotion

Erfahrenes Mitglied

terravotion

Erfahrenes Mitglied

bensky

Erfahrenes Mitglied

Quaese

Moderator

bensky

Erfahrenes Mitglied

Neue Beiträge