"Bővebben" gomb egyszerűen
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
■ 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
Sehogy
Én egyszerűen javascript-ből
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"?)
Annyi kiegészítéssel, hogy
Hidden az nem lehet a display. :P
Mivel kevertem össze? Van
(bocs, agyilag épülök lefelé, egyre jobban :( )
visibility:hidden; - el
Igen köszi ez jól hangzik,
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.
pontosan ezt :)
Ha már itt a jó megoldás,
É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.