Moi osaisko joku auttaa tälläisessa dynaamisten nettisivujen teossa.
Mulla on nettisivuilla neljä checkboxia, kun laitan yhteen tai useampaan rastin ilmestyy näytölle sarake/sarakkeet joka sisältävät tekstiä. Nämä kaikki neljä saraketta ovat rinnakkain.
Ongelmana on se, että tällä hetkellä nämä sarakkeet ilmestyy aina samaan paikkaan, esim. jos jätän ensimmäisen rastittamatta jää näytölle tyhjä kohta tai jos jätän kolmannen rastittamatta jää näytölle tyhjä kohta 2 ja 4 sarakkeen väliin.
Idena olisi se, että kuinka saisin nämä sarakkeet järjestykseen jos valitsisin vaikka esim. toisen ja neljännen näkyviin, niin ne asettuisivat näytölle oikein; eli näiden väliin ei jäisi tyhjää saraketta ja tavallaan tässä tapauksessa toinen sarake menisi näytöllä 1 sarakkeen paikalle ja 4 sarake menisi 2 sarakkeen paikalle. Alla koodi:
<html>
<head>
<title>test</title>
<LINK href="css/style_test.css" type="text/css" rel="stylesheet">
<!--SHOW/HIDDEN CHECKBOXs-->
<script type="text/javascript">
if(!document.getElementById && document.all)
document.getElementById = function(id){ return document.all[id]}
function showHide (id)
{
var style = document.getElementById(id).style
if (style.visibility == "hidden")
style.visibility = "visible";
else
style.visibility = "hidden";
}
</script>
</head>
<body>
<input value="1" name="1" type="checkbox" onClick="showHide('1');" />1<br>
<input value="2" name="2" type="checkbox" onClick="showHide('2');" />2 <br>
<input value="3" name="3" type="checkbox" onClick="showHide('3');" />3 <br>
<input value="4" name="4" type="checkbox" onClick="showHide('4');" />4 <br>
<h4>otsikko</h4>
<div class="sarakkeet">
<div id="1" style="visibility: hidden;">
<div class="text">
<h4>1</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Morbi quis purus elit, eu elementum enim. Nam pharetra
lacus a enim tempus placerat. Mauris nec augue enim, nec
rutrum arcu. Sed eleifend consectetur ante, faucibus feugiat
</div>
</div>
</div>
<div class="sarakkeet">
<div id="2" style="visibility: hidden;">
<div class="text">
<h4>2</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Morbi quis purus elit, eu elementum enim. Nam pharetra
lacus a enim tempus placerat. Mauris nec augue enim, nec
rutrum arcu. Sed eleifend consectetur ante, faucibus feugiat
</div>
</div>
</div>
<div class="sarakkeet">
<div id="3" style="visibility: hidden;">
<div class="text">
<h4>3</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Morbi quis purus elit, eu elementum enim. Nam pharetra
lacus a enim tempus placerat. Mauris nec augue enim, nec
rutrum arcu. Sed eleifend consectetur ante, faucibus feugiat
</div>
</div>
</div>
<div class="sarakkeet">
<div id="4" style="visibility: hidden;">
<div class="text">
<h4>4</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Morbi quis purus elit, eu elementum enim. Nam pharetra
lacus a enim tempus placerat. Mauris nec augue enim, nec
rutrum arcu. Sed eleifend consectetur ante, faucibus feugiat
</div>
</div>
</div>
</body>
</html>Style:
.sarakkeet{
float: left;
margin-top: 0px;
margin-left: 1px;
margin-right: 0px;
}
.text{
width: 220px;
font-size: 11px;
margin-right: 70px;
}Mod. korjasi kooditagien kielet!
Käyttämäsi tyyli "visibility: hidden" on väärä, laita piilotukseen "display: none" ja vastaavasti näyttämiseen "display: block".
Ei kannata tehdä turhaan sisäkkäisiä divejä. Tuossakin riittäisi luultavasti yksi per sarake:
<div class="sarake text" id="sarake-1" style="display: none">
On myös parempi olla sotkematta eri kieliä (CSS, JS, HTML) ja käyttää myös piilotukseen luokkaa:
<div class="sarake text piilossa" id="sarake-1">
JS:llä voisi sitten poistaa elementin piilossa-luokan, kun se pitää näyttää.
Ok, kiitos avusta, nyt toimii oikein.
Aihe on jo aika vanha, joten et voi enää vastata siihen.