javascript/CSS Element Sichtbar bzw. unsichtbar machen

CreamyCewie

Photoshop-Künstler
Hi.

Ich habe ein DIV-Element mit dem Namen SubCat1
Ich will bei klick auf einen <a></a> Link prüfen ob diese DIV sichtbar ist, oder nicht.
Wenn Sie sichtbar ist, soll sie Unsichtbar werden, ansonsten sichtbar.

Wie kann ich das lösen?

Derzeit wollt ich es wenigstens Sichtbar machen, mittels
HTML:
<script type="Text/Javascript">
function Sub1Show() {
document.getElementById('SubCat1').style.display='block';
</script>

einblenden, und mittels
HTML:
 <a href="#show" onclick="Sub1Show()">Kategorie 1</a>
wollte ich es aufrufen, nur passiert gar nix :(


Was kann ich nun machen?


Danke & LG

Creamy
 
Versuche es mal so:

HTML:
<script type="Text/Javascript">
function Sub1Show() {
if(document.getElementById('SubCat1').style.display=='block')
document.getElementById('SubCat1').style.display='hidden';
else
document.getElementById('SubCat1').style.display='block';

</script>
 
Ist es scope mäßig überhaupt für das Script sichtbar?

Gib mal
javascript:alert(document.getElementById('SubCat1'));
in die Adresseingabezeile ein. Wenn da nicht "[object HTMLDivElement]" oder was ähnliches ausgegeben wird: Problem.
 
Ich sehe gerade, das von einem Div-Container mit Namen "SubCat1" sprichst, das Script benötigt aber eine ID "SubCat1".

Richtig wäre also <div id="SubCat1"> und nicht <div name="SubCat1">

Check das mal bitte.:)
 
Aaaah...
<a href="#show" onclick="Sub1Show()">Kategorie 1</a>

onclick auf einen Link geht nicht.

Nimm das.
<a href="javascript:Sub1Show()">Kategorie 1</a>
 
Ist es scope mäßig überhaupt für das Script sichtbar?

Gib mal
javascript:alert(document.getElementById('SubCat1'));
in die Adresseingabezeile ein. Wenn da nicht "[object HTMLDivElement]" oder was ähnliches ausgegeben wird: Problem.

Da wird nix ausgegeben, also klappt der Aufruf der Funktion nicht?
 
Vielleicht musst Du Deinem Div-Container die CSS-Parameter erst noch vorgeben.

Sonst hat es ja beim ersten Klick kein Attribut und wird somit auf jeden Fall angezeigt.

z.B:
<div id="SubCat1" style="display: hidden">

Dann wäre es zuerst unsichtbar und müsste mit einem Klick sichtbar werden.
 
Ich hab den Fehler jetz gefunden, es hat ne }-Klammer gefehlt^^

HTML:
 function Sub1Show() {
                if(document.getElementById('SubCat1').style.display=='block')
            {document.getElementById('SubCat1').style.display='hidden';}
            else
            {document.getElementById('SubCat1').style.display='block';}}

Allerdings funktioniert nur ein Teil.

Das DIV erscheint.
Wenn ich aber nochmal draufklicke, sollte es wieder unsichtbar sein, das tut es nicht.
 
element steht für dein Objekt.
HTML:
<script language="JavaScript" type="text/javascript">
<!--
function toggleDiv(element){
 if(document.getElementById(element).style.display == 'none')
  document.getElementById(element).style.display = 'block';
 else
       document.getElementById(element).style.display = 'none';
}
//-->
</script>
Fertig
 
Ich hab jetzt
HTML:
<!--
function toggleDiv(SubCat1){
 if(document.getElementById(SubCat1).style.display == 'none')
  document.getElementById(SubCat1).style.display = 'block';
 else
       document.getElementById(SubCat1).style.display = 'none';
}
//-->
aufgerufen mit
HTML:
javascript:toggleDiv(SubCat1)

jetzt passiert gar nix mehr
 
javascript:toggleDiv('SubCat1')

Beim Aufruf Anführungszeichen setzen, denn Du übergibst den String und keine Variable. In der function kannst Du dann überall SubCat1 durch str ersetzen. In str ist dann der Wert SubCat1 gespeichert.

Code:
function toggleDiv(str){
   var elem = document.getElementById(str).style.display;
   elem = (elem == 'none')?'block':'none'; 
}

Code:
javascript:toggleDiv('SubCat1')
 
Zuletzt bearbeitet:
Das freut zu lesen :)

... nur so am Rande:
Auf- und zuklappen kann man auch völlig ohne Javascript, wenn man nicht gerade den IE<8 unterstützen muss. Für IE 5 bis 7 könnte man ja ein über einen "conditional comment" eingebundenes JS nachladen.

Schaut einfach in den Sourcecode dieser Seite - englischer Text, sorry, weil es ursprünglich für woanders gemacht wurde - aber Code ist Code ;)

... für die ganz neuen Browser könnte man ja noch ein paar transitions (translate etc.) hinzupacken, damit es animiert auf und zu geht :D
 
Ah ok danke. Ich werd mir die Site mal ansehen.

Aber ich hab nochein problem.
Das script funktioniert, aber erst beim 2ten mal wo ich den link anklicke...


Aufruf:
HTML:
<a href="#" onclick="return toggleMe('SubCat1'); return false">
Script:
HTML:
function toggleMe(item){
		  var e=document.getElementById(item);
		  if(!e)return true;
		  if(e.style.display=="none"){
			e.style.display="block"
		  } else {
			e.style.display="none"
		  }
		  return true;
		}

Woran kann das liegen?
Danke & lg CreamyCewie
 
Zuletzt bearbeitet:
Oben