nicht angemeldet
Moin!
Richtige Reihenfolge beim Lernen:
1. HTML
2. CSS
3. Javascript
erst 4. Bibliotheken wie jquery
1.) Dies hier tut was du willst und ist sehr viel kleiner und durchschaubarer:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Toggle Toggle</title>
<script type="text/javascript">
function toggleDisplay(element) {
object=document.getElementById(element);
if (object.style.display=='block') {
object.style.display='none';
} else {
object.style.display='block';
}
}
</script>
<style>
.unsichtbar
{
display: none;
}
.sichtbar
{
display: block;
}
</style>
</head>
<body>
<p><a href="javascript:toggleDisplay('switch')">(Nicht) Anzeigen</a></p>
<p id="switch" class="unsichtbar">Ich bin da ich bin weg</p>
<p>Ich bin immer da</p>
</body>
</html>
2. Dies hier tut auch in etwa was Du willst, geht aber sogar ganz ohne Javascript:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.sitepart {
display:none;
height:0;
overflow:hidden;
transition: height 1s;
}
.sitepart:target {
display:block;
height:300px;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#seite1">Seite 1</a></li>
<li><a href="#seite2">Seite 2</a></li>
</ul>
</nav>
<article class="sitepart" id="seite1">
<h1>Seite 1</h1>
<p>Lorem ipsum dolor sit amet. </p>
<a href="#">(ausblenden)</a>
</article>
<article class="sitepart" id="seite2">
<h1>Seite 2</h1>
<p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
<a href="#">(ausblenden)</a>
</article>
</body>
</html>
JürgenB
Gunnar Bittersmann
Matthias Apsel