ugrás a tartalomhoz

Adatbázisból lenyíló lista

Ballon · 2013. Ápr. 27. (Szo), 21.33
Sziasztok!

Már régóta olvasom az oldalt sosem kérdeztem még, ellenben sok probléma megoldásra talált, és Én is egy egyenlőre megoldatlan problémába futottam:/. Remélem tudtok segíteni.

Szóval, adatbázisból kérek le adatokat, és js-sel csináltam egy "show / hide" mezőt, ami kattintásra lenyílik a lényegi tartalom résszel, majd ismételt kattintással eltűnik.
Eddig ez működik, viszont ha egynél több rekordom van a táblában, akkor mindig csak az első rekordra dobja ki ezt a "show / hide" mezőt, ami így nem túl hatékony.
(Feltételezem, valahol az id átadás környékén száll el a dolog, és azért kapom mindig az első sort, független attól mire kattintok, de ezt nem sikerült megcsinálnom..)

A JS:
  1. <script type="text/javascript">  
  2.  function unhide(divID) {  
  3.  var item = document.getElementById(divID);  
  4.  if (item) {  
  5.  item.className=(item.className=='hidden')?'unhidden':'hidden';  
  6.  }  
  7.  }  
  8.  </script>  
És a php rész.
  1. while ($sor = mysql_fetch_assoc($eredmeny))   
  2. $section.= "<article class=\"tablak\">  
  3.        <header>  
  4.         <hgroup>  
  5.             <h1 id=\"cim\">{$sor['cim']}</h1>  
  6.          </hgroup>  
  7.      </header>  
  8.        <ul>  
  9.          
  10.            <li><img src=\"images/{$sor['kep']}\" alt=\"{$sor['kep']}\" title=\"{$sor['kep']}\" /></li>  
  11.            <li>{$sor['esemeny']}</li>  
  12.            <a href=\"javascript:unhide('tartalom');\">Tovább..</a></li>  
  13.            <p id=\"tartalom\" class=\"hidden\">{$sor['tartalom']}\n  
  14.            <li>{$sor['datum']}</li>  
  15.               
  16.     </ul>  
Tehát a {$sor['tartalom']} mindig az első sor eredményét adja vissza, hiába van több adatom az adatbázisban.
Nem találtam erre megfelelő megoldást, az id-t pedig nem sikerült úgy hozzáadnom, hogy működjön.

A segítséget előre is köszönöm!
 
1

Egyedi

Poetro · 2013. Ápr. 27. (Szo), 22.03
Legközelebb te színezd a kódodat kérlek.

Mivel a document.getElementById pontosan egy elemet választ ki, és az az első a megadott id-vel rendelkező elem, ezért bővítened az elemek id-jét, hogy mindegyik egyedi legyen. Remélem minden $sor-nak van egy egyedi azonosítója, és ezzel lehet rá hivatkozni:
  1. <li>  
  2.   <a href="javascript:unhide('tartalom-${sor['id']}');">Tovább..</a>  
  3.   <p id="tartalom-${sor['id']}" class="hidden">{$sor['tartalom']}</p>  
  4. </li>  
2

Működik

Ballon · 2013. Ápr. 27. (Szo), 22.27
El sem hiszem, de végre úgy működik, mint ahogy Én szerettem volna:).
Ezer hála, két napja bújom a fórumokat és próbálkozok mindennel, de nem sikerült ezidáig.
A színezésre legközelebb pedig ügyelek, és köszönöm a gyors választ:).