Hilfe
Neues Thema
Antworten
für einen Teil einer Website brauche ich eine nicht(!) JS-basierte Lösung, einen Bereich ein- und ausklappen zu können. Das habe ich gefunden und entsprechend umgesetzt, allerdings habe ich nun das Problem, dass ich die betreffenden Teile nicht in einer einzigen Zeile angeordnet bekomme, sondern das Zeug untereinander steht(wahrscheinlich wegen den <div>s).
<!DOCTYPE html>
<html>
<head>
<title>###</title>
<meta charset="UTF-8">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style type="text/css">
html, body, div, p { margin: 0em; padding: 0em; background-color: #fff; font-size: 100%}
#header {text-align: center; margin:0;padding:0}
#header h3 {background-color: #fff; color: #000;margin:0; padding:1.5em 0em}
#header h1, h4, h5 { background-color: #fff;color:#000; margin: 0;padding:0}
#header h1 {padding-top:.5em;}
#header h4 {padding: .5em 0 1em 0;color: #000}
#header a, a:visited {color: white;}
#header p {background-color: #fff; color:#000; padding: 1em 0em}
#nav {background-color: #fff; color: darkred; padding:0 0 0 6.5em;margin: 0}
#nav .row ul li {display: inline}
#nav {display: inline; clear: both}
a {text-decoration: none}
a:visited {color: inherit}
.row { vertical-align: top; height:auto !important; }
.list {display:none; }
.show {display: none; }
.hide:target + .show {display: inline; }
.hide:target {display: none; }
.hide:target ~ .list {display:inline; }
@media print { .hide, .show { display: none; } }
</style>
</head>
<body>
<div id="header"><h3>bla bla</h3><h1>deluxe bla</h1><h4>jajablabla</h4><p>###<br><a href="#oink?" target="_blank">dududo</a><br>###</p></div>
<div id="nav">
<div class="row">
<a href="#show_1" class="hide" id="show_1"><h3>1</h3></a>
<a href="#hide_1" class="show" id="hide_1"><h3>1</h3></a>
<div class="list">
<ol style="list-style: decimal-leading-zero">
<li>###<span style="text-align: right;float: right">?</span></li>
<li>###<span style="text-align: right;float: right">?</span></li>
<li>###<span style="text-align: right;float: right">?</span></li>
<li>###<span style="text-align: right;float: right">?</span></li>
</ol>
</div>
<div class="row">
<a href="#show_2" class="hide" id="show_2"><h3>2</h3></a>
<a href="#hide_2" class="show" id="hide_2"><h3>2</h3></a>
<div class="list">
<ol style="list-style: decimal-leading-zero">
<li>---<span style="text-align: right;float: right">?</span></li>
<li>---<span style="text-align: right;float: right">?</span></li>
<li>---<span style="text-align: right;float: right">?</span></li>
<li>---<span style="text-align: right;float: right">?</span></li>
</ol>
</div>
</div>
</div>
</div>
</body>
</html>
Das Ziel ist es, 1&2 (natürlich Alibitexte) auf einer Zeile zu haben und den versteckten Inhalt jeweils darunter ein-/ausblenden zu können.
Ich hab schon divs hin- und hergeschoben und am CSS gespielt, bekomme es aber nicht hin. Kann jemand helfen oder wäre das überhaupt nicht (ohne JS) zu realisieren?
Nach oben
.
