Das was du möchtest, wird sich alleine mit css nicht umsetzen lassen. Aber hier eine simple Alternative.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tooltipp</title>
<style>
article {
background:#aaa;
margin:1px 0;
padding:0;
}
article h3 {
margin:0;
padding:3px;
}
article p {
margin:0;
padding:10px;
background:#eee;
display:none;
}
input {
display:none;
}
label {
padding:5px;
margin:0px;
display:inline-block;
background:#eee;
cursor:pointer;
}
input:nth-of-type(1):checked ~ article:nth-of-type(1) p,
input:nth-of-type(2):checked ~ article:nth-of-type(2) p,
input:nth-of-type(3):checked ~ article:nth-of-type(3) p,
input:nth-of-type(4):checked ~ article:nth-of-type(4) p {
display:block;
}
input:nth-of-type(1):checked ~ label:nth-of-type(1),
input:nth-of-type(2):checked ~ label:nth-of-type(2),
input:nth-of-type(3):checked ~ label:nth-of-type(3),
input:nth-of-type(4):checked ~ label:nth-of-type(4) {
background:#aaa;
}
</style>
</head>
<body>
<input type="radio" id="b1" name="auswahl"><label for="b1">Tolltip 1</label>
<input type="radio" id="b2" name="auswahl"><label for="b2">Tolltip 2</label>
<input type="radio" id="b3" name="auswahl"><label for="b3">Tolltip 3</label>
<input type="radio" id="b4" name="auswahl"><label for="b4">Tolltip 4</label>
<article>
<h3>Text 1</h3>
<p>text von Link 1</p>
</article>
<article>
<h3>Text 2</h3>
<p>text von Link 2</p>
</article>
<article>
<h3>Text 3</h3>
<p>text von Link 3</p>
</article>
<article>
<h3>Text 4</h3>
<p>text von Link 4</p>
</article>
</body>
</html>
Alles anzeigen
Habe mal versucht dein Vorhaben mit css umzusetzen. Wenn ich es richtig verstanden habe, soll Box4 nur bein ersten Seitenaufruf einzeln aufklappen. Ansonsten nicht?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tooltipp</title>
<style>
article {
background:#aaa;
margin:1px 0;
padding:0;
}
article h3 {
margin:0;
padding:3px;
}
article p {
margin:0;
padding:10px;
background:#eee;
display:block;
}
input {
display:none;
}
label {
padding:5px;
margin:0px;
display:inline-block;
background:#eee;
cursor:pointer;
}
input:nth-of-type(1):checked ~ label:nth-of-type(4),
input:nth-of-type(1):checked ~ article:nth-of-type(2) p,
input:nth-of-type(1):checked ~ article:nth-of-type(3) p,
input:nth-of-type(1):checked ~ article:nth-of-type(4) p {
display:none;
}
input:nth-of-type(2):checked ~ label:nth-of-type(4),
input:nth-of-type(2):checked ~ article:nth-of-type(1) p,
input:nth-of-type(2):checked ~ article:nth-of-type(3) p,
input:nth-of-type(2):checked ~ article:nth-of-type(4) p {
display:none;
}
input:nth-of-type(3):checked ~ label:nth-of-type(4),
input:nth-of-type(3):checked ~ article:nth-of-type(1) p,
input:nth-of-type(3):checked ~ article:nth-of-type(2) p,
input:nth-of-type(3):checked ~ article:nth-of-type(4) p {
display:none;
}
input:nth-of-type(5):checked ~ article:nth-of-type(1) p,
input:nth-of-type(5):checked ~ article:nth-of-type(2) p,
input:nth-of-type(5):checked ~ article:nth-of-type(3) p {
display:none;
}
input:nth-of-type(5) ~ label:nth-of-type(5),
input:nth-of-type(4) ~ article:nth-of-type(4) p {
display:none;
}
input:nth-of-type(4):checked ~ article:nth-of-type(4) p,
input:nth-of-type(5):checked ~ article:nth-of-type(4) p {
display:block;
}
input:nth-of-type(1):checked ~ label:nth-of-type(5),
input:nth-of-type(2):checked ~ label:nth-of-type(5),
input:nth-of-type(3):checked ~ label:nth-of-type(5) {
display:inline-block;
}
input:nth-of-type(1):checked ~ label:nth-of-type(1),
input:nth-of-type(2):checked ~ label:nth-of-type(2),
input:nth-of-type(3):checked ~ label:nth-of-type(3),
input:nth-of-type(4):checked ~ label:nth-of-type(4),
input:nth-of-type(5):checked ~ label:nth-of-type(5) {
background:#aaa;
}
</style>
</head>
<body>
<input type="radio" id="b1" name="auswahl"><label for="b1">Tolltip 1</label>
<input type="radio" id="b2" name="auswahl"><label for="b2">Tolltip 2</label>
<input type="radio" id="b3" name="auswahl"><label for="b3">Tolltip 3</label>
<input type="radio" id="b4" name="auswahl"><label for="b4">Tolltip 4</label>
<input type="radio" id="b5" name="auswahl"><label for="b5">Tolltip 4</label>
<article>
<h3>Text 1</h3>
<p>text von Link 1</p>
</article>
<article>
<h3>Text 2</h3>
<p>text von Link 2</p>
</article>
<article>
<h3>Text 3</h3>
<p>text von Link 3</p>
</article>
<article>
<h3>Text 4</h3>
<p>text von Link 4</p>
</article>
</body>
</html>
Alles anzeigen
