Lees meer link

[sanma]

Hallo,

Ik wil graag een lees meer link maken waarbij er extra tekst verschijnt ik heb dit werkend gekregen via dit script:

<script type="text/javascript">
  function kadabra(zap) {
   if (document.getElementById) {
   var abra = document.getElementById(zap).style;
    if (abra.display == "block") {
    abra.display = "none";
    } else {
    abra.display= "block";
   }
   return false;
   } else {
   return true;
  }
  }
</script>

<table>
     <tr><td align=\"right\" height=\"22\" colspan=\"3\"><a href=\"#\" onclick=\"return kadabra('readmore');\"> meer ></a></td></tr>
     <tr><td height=\"22\" colspan=\"3\">
     <p id=\"readmore\">
     De extra tekst die verschijnt bij het klikken op lees meer.<BR>
     </p>
     </td></tr>
</table>

Mijn CSS

#readmore {
display: none;
padding: 5px;
font-size: 12px;
}

Dit werkt opzich wel enkel wil ik via mysql_fetch_assoc in PHP een lijst tabel genereren waarbij hij alle records onder elkaar zet als ik dit doe dan zet hij wel in elke entrie een lees meer link maar de extra tekst verschijnt enkel in de eerste cel maar als je bij rij 4 bijvoorbeeld op leesmeer klikt wil ik dat gelijk daaronder de tekst verschijnt.

Hopelijk weet iemand hier raad mee!

 

[That Guy]

dat komt omdat elk id uniek moet zijn. Je kan wel steeds je Javascript naar 'readmore' aanroepen, maar dat is de eerste, dus de 1e cell.

je moet dus in je php code (wel handig als je die ook geeft) eventjes elke row een unieke id geven.

Overgens kan je Javascript dingetje best wel wat korter:[js]function toggle(id)
{
var handle = document.getElementById(id);

handle.style.display = (handle.style.display == 'block') ? 'none' : 'block';
}[/js]




:thumb:

 

[Supersnail]

Waarschijnlijk is het probleem dat je het id "readmore" gebruikt voor elk record in de tabel waar op "lees meer" wordt geklikt. Dit mag niet (een id moet uniek zijn) en werkt niet (enkel de eerste wordt gebruikt). Wat ik in dergelijke gevallen meestal doe is een nummer toevoegen aan het id. Dus in dit geval "readmore1", "readmore2", "readmore3" etc. Zo aan de code te zien wordt dit door PHP geprint en is het dus vrij eenvoudig een getal achter "readmore" te zetten dit steeds te verhogen.

[edit]That Guy was me voor.[/edit]

 

[sanma]

Hallo,

Dat heb ik voor een deel ook geprobeerd maar dan pakt hij de style niet van de CSS of ik moet in de CSS readmore1 enzo zette.

Ik heb nu:

<script type="text/javascript">
function toggle(id)
{
   var handle = document.getElementById(id);

   handle.style.display = (handle.style.display == 'block') ? 'none' : 'block';
}
</script>

<table>
<tr><td align=\"right\" colspan=\"3\"><a href=\"#\" onclick=\"return toggle('readmore');\"> meer ></a></td></tr>
     <tr><td>
     <p id=\"readmore\">

     De extra tekst die verschijnt bij het klikken op lees meer.<BR>

     </p>
     </td></tr>

In mijn style.css heb ik:
# readmore {
display: none;
}

Waar moet ik nu die ID verhogen ik heb wel een variabele voor id dat is $id. deze is uniek voor elke record maar weet niet waar ik die moet plaatsen, als ik readmore verander naar readmore1 werkt het niet

 

[Frats]

Ik zou van je styling een Class maken (met een . ipv een #) en elk van je elementen die Class meegeven, dan werkt het gewoon netjes overal.

 

[sanma]

Ik heb er nu een ID aan meegegeven en nu verschijnt de tekst van de juiste rij echter is nu alles uitgeklapt standaard en als ik 2x op meer> klik klapt hij wel in:

<script type="text/javascript">
function kadabra(zap)
{
   var handle = document.getElementById(zap);

   handle.style.display = (handle.style.display == 'block') ? 'none' : 'block';
}
</script>

<table>
     <tr><td align=\"right\" colspan=\"3\"><a href=\"#\" onclick=\"return kadabra('readmore[".$info['id']."]');\"> meer ></a></td></tr>
     <tr><td colspan=\"3\">
     <p id=\"readmore[".$info['id']."]\">
     De extra tekst die verschijnt bij het klikken op lees meer.<BR>
     </p>
</table>

Bij $info[id] haalt hij de ID uit de database als ik deze echo in de rij komt dit er netjes te staan dus dat werkt.

 

[Supersnail]

Zoals Frats al zei kan je het ook een class meegeven. Classes mag je wel vaker gebruiken. Dan wordt het dus:

<p id=\"readmore[".$info['id']."]\" class=\"readmore\">

Je css wordt dan

. readmore {
display: none;
}