ugrás a tartalomhoz

"Bővebben" gomb egyszerűen

emesemese · 2011. Okt. 3. (H), 16.28
Sziasztok!

Szeretnék egy "bővebben" gombot rakni cikkek alá. Van ( lesz ) egy kisebb blog rész az oldalamon, amibe 8-10 cikket tervezek majd rakni, tehát keveset. És azt szeretném megoldani, hogy a magán a blog főoldalon szerepeljen az összes cikk "lista nézetben" tehát minden cikknek az elejéből mondjuk 5-6 sor aztán "bővebben" gomb, majd kinyílik a teljes cikk. Az nem kikötés, hogy minden cikkből pontosan mennyi sor / karakter.

Hasonló mint a joomla rendszerben a <hr id="system-readmore">
Egy sima vonalat szúr be és ami alatta van, az rejtve van. Bele lestem ebbe is de ez nekem túl komplex, sorokat is számol illetve más is funkciói is vannak.

Nekem egy tök egyszerű megoldás kellene ez a vonalas trükk tetszetős. Hogyan tudnám ez megoldani php-ban, hogy ami a vonal alatt van az rejtve legyen?

Ha erre van más megoldásotok arra is nyitott vagyok.

Köszönöm szépen a válaszokat / segítséget

Üdv: Emese
 
1

Sehogy

Poetro · 2011. Okt. 3. (H), 16.42
A PHP nem jelenít meg, és nem rejt el adatokat. A PHP csak kiköpi az adatot, és te úgy és abban jeleníted meg, amiben akarod. Ha böngészőben akarod, akkor leginkább CSS szükséges hozzá.
2

Én egyszerűen javascript-ből

H.Z. v2 · 2011. Okt. 3. (H), 16.44
Én egyszerűen javascript-ből csinálnám. Minden cikket önálló ID-vel ellátott DIV-be/SPAN-be tennék és a "bővebben..." szövegre ráhúznék egy függvényhívást, ami kicseréli a DOM-ban az adott ID-hez tartozó elem innerHTML-jét a bővített verzióra.

Illetve a másik, talán kulturáltabb megoldás, hogy kiraknám mind a szűkített, mind a bővebb változatot úgy, hogy a bővebb-hez hozzárendelnék egy DISPLAY:HIDDEN CSS attribútumot és a "bővebben"-re kattintva ezt cserélném ki mondjuk DISPLAY:BLOCK-ra, a szűkítettnél meg fordítva: ilyenkor cserélném a DISPLAY-t HIDDEN-re.
Illetve, hogy pontos legyek itt is a DOM-ban kellene turkálni, de most nem jut eszembe, hogy pontosan mit is kellene átírni (odáig tudom, hogy document.getElementById("xxx").style<ide nem tudom, mi kell> - talán style.display="hidden", illetve ... ="block"?)
4

Annyi kiegészítéssel, hogy

bb0072 · 2011. Okt. 3. (H), 16.48
Annyi kiegészítéssel, hogy display:none

Hidden az nem lehet a display. :P
7

Mivel kevertem össze? Van

H.Z. v2 · 2011. Okt. 3. (H), 17.06
Mivel kevertem össze? Van olyan eltüntetési lehetőség, hogy a helye ottmarad, csak a tartalma nem jelenik meg és van olyan, hogy a helyét sem tartja fenn a böngésző. Én ez utóbbit akartam javasolni.
(bocs, agyilag épülök lefelé, egyre jobban :( )
8

visibility:hidden; - el

emesemese · 2011. Okt. 3. (H), 17.10
visibility:hidden; - el
5

Igen köszi ez jól hangzik,

emesemese · 2011. Okt. 3. (H), 16.59
Igen köszi ez jól hangzik, már használtam ilyesmit táblázatoknál bizonyos sorok eltüntetésére nem is tudom miért nem jutott eszembe. köszi
3

Kinyílik?

Schmidi · 2011. Okt. 3. (H), 16.47
Mit takar a "kinyílik"?

Ott, azon az oldalon megjelenik a további tartalom?
Akkor CSS-re és JavaScriptre lesz szükséged.
Pl. display: none és display: block váltogatása, vagy jQuery és .toggle() használata.

Ha a "Bővebben" gombra kattintva egy önálló oldalra akarsz navigálni, ami csak az adott cikket tartalmazza, akkor a főoldalon csak a cikk elejét jeleníted meg, a gombod pedig egy egyszerű link, ami egy olyan oldalra navigál ami a teljes tartalmat megmutatja.

A rövid bevezetőt többféleképpen is előállíthatod, lehet eleve külön mező az adatbázisban, vagy X karakter/szó után is elvághatod a szöveget.
6

pontosan ezt :)

emesemese · 2011. Okt. 3. (H), 17.04
pontosan ezt :)
9

Ha már itt a jó megoldás,

Pepita · 2011. Okt. 3. (H), 21.42
azért van még alternatíva...
Én a fent leírt esetben azért, hogy a csík is meglegyen, CSS-ben class-t használnék, azonosítani id-t.
CSS pl.:
div.lenyilo {
border: 2px solid rgb(szín);
height: 0;
}
A document.getelementbyid(kinyitanó id-je).style.height="auto"; nyitja ki, és - ha kell - a document.getelementbyid(kinyitanó id-je).style.border="0"; eltünteti a "csíkot".
A js utasításban valami nagybetűs, de fejből nem tudom.