ugrás a tartalomhoz

Archívum - Május 15, 2017

Dátum
  • Minden
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

Lenyíló szövegdobozok készítése

Dinnye · Május. 15. (H), 14.59
Sziasztok!

Abban szeretném a segítségeteket kérni, hogy hogyan készíthetnék lenyíló szövegdobozokat div-ből vagy table-ből valami egyszerű srcip-tel vagy minimal js-sel.

Egy nagyon primitív hírfolyamot szeretnék készíteni, ahol egymás alatt kinyitható szövegdobozok sorakoznának. Ebben a lenyíló részben lenne a tartalom. A lényeg, hogy ne csak egyetlen szövegdobozzal működjön, hanem bármennyivel.

Valami ilyesmire gondolok

<script> function rejto(x)
{
if (document.getElementById("rejt"+x).style.display=="none")
{
document.getElementById("rejt"+x).style.display="block" document.getElementById("rejt"+x).style.visibility="visible"
}

else
{
document.getElementById("rejt"+x).style.display="none" document.getElementById("rejt"+x).style.visibility="hidden"
}
}

for(j=1;j<4;j++)
{
document.getElementById("rejt"+j).style.display="none" document.getElementById("rejt"+j).style.visibility="hidden"
}
</script> 

<table border="1" cellspacing="0" style="border-collapse: collapse" width="100%">     

<tr>
<td onclick="rejto(1)">1</td>  
</tr>
<tr id="rejt1">
<td>1a</td>
</tr>

<tr >
<td onclick="rejto(2)">2</td>
</tr>   <tr id="rejt2">
<td>2a</td>
</tr>

<tr>
<td onclick="rejto(3)">3</td>
</tr>
<tr id="rejt3">
<td>3a</td>
</tr>

</table>
forrás: https://prog.hu/tudastar/18014/lenyilo-tablazat

Ez már majdnem az, amire én gondolok, csak annyi kellene hozzá, hogy a lenyíló dobozok alapból rejtve legyenek a lap betöltésekor, és csak kattintásra bukkanjanak elő, mert jelenleg alapból minden látszik és így túl terjedelmes.
A kinézettől most tekintsetek el. :)

Választok előre is köszönöm!