DIV elementide peitmine ja näitaminePanin JavaScripti DIV CSS:display olekut muutma ja peitsin uudise teksti pealkirja taha.
Kliki hallidel pealkirjaribadel või piltidel, et sisu peita/näidata.
Kuidas töötab
Kuna DIV iD on unikaalne, kasutan lehe automatiseerimiseks lisaks NAME väärtust.
Allolev skript lisab kõigile NAME=RIDA elementidele onclick funktsiooni, mis
hakkab P STYLE DISPLAY:NONE | DISPLAY:BLOCK väärtust vahetama.
CSS kood
<style type="text/css">
html { overflow-y: scroll; }
body { select: none; }
.hide { display: none; }
.p {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
#news {
height: 22px;
padding: 1px;
background: #CCC;
margin: -1px;
border: 1px solid #999;
font-size: 1.06em;
}
</style>
CSS lisaväärtuseduser-select: none vähendab tahtmatut tekstimärgistamist DIV klikkimisel
overflow-y: scroll lubab lehe pikkust vertikaalsuunas muuta
margin: -1px viib raamistiku piirjooned kohakuti
<script type="text/javascript">
function butt(i) {
document.getElementsByName('rida')[i].onclick = function() {
var el = document.getElementsByTagName('p')[i];
el.style.display = el.style.display == 'none' ? 'block' : 'none';
}
}
arr=document.getElementsByName('rida');
for(var i=0; i < arr.length; i++) { butt(i); }
</script>