Dette burde gøre det..
<script>
function showHide(theLink,id)
{
var ele = document.getElementById(id);
if(ele.style.display == "block")
{
ele.style.display = "none"
theLink.innerHTML = "Læs mere..."
}
else
{
ele.style.display = "block"
theLink.innerHTML = "Klap i"
}
}
</script>
...
<a href="#" onclick="showHide(this,'n1');">Læs mere...</a>
<script type="text/javascript">
function showHide(id) {
var ele = document.getElementById(id);
if(ele.style.display == "block") {
ele.style.display = "none";
document.getElementById(id+"a").innerHTML = "Læs mere...";
}
else {
ele.style.display = "block";
document.getElementById(id+'a').innerHTML = "Skjul";
}
</script>
<a id="'n1a'" href="#" onclick="showHide('n1');">Læs mere...</a>
ved ikke lige om det funker...
T4NKER's løsning er ret så meget mere elegant :P
Ville man så i stedet for alt det med id osv kunne bruge
this.parent?
d'oh.. bare glem hvad jeg sagde... linket er jo for hulen ikke child af div'en :P
Fantastisk, det virker. Mange tak for hjælpen - jeg vil gerne lære, så hvis du har en forklaring på det, er den velkommen. Men under alle omstændigheder får du hele 50 point ;)
Lige en tilføjelse, er det muligt at gøre, så når man trykker, bliver man det samme sted på siden, som man var i forvejen? Det er lidt irriterende, at siden går helt op til toppen.
"this" fungerer lidt på samme måde som "document.getElementById(id)", den refererer bare til det aktive element i stedet for at referere til et fast tag.
".innerHTML" ændrer teksten i et tag.
I mit kode-stykke, giver jeg "anchor'en" (<a>) en id, for at kunne kalde den med document.getElementById(id+'a'), men i stedet for at skulle tilføje id'er bruger man bare "this"
Mit kluntede forsøg:
document.getElementById(id+'a').innerHTML = "Læs mere...";
<a id="n1a" href="#" onclick="showHide('n1');">Læs mere...</a>
T4NKER's elegante kode:
showHide(theLink,id) {
...
theLink.innerHTML = "Læs mere...";
//(this.innerHTML = "Læs mere...";)
...
}
<a href="#" onclick="showHide(this,'n1');">Læs mere...</a>
Jada. Den "hopper" kun fordi det er et "rigtigt link" (med href i) du klikker på.
href="#" betyder faktisk at browseren skal hoppe til det "bogmærke" som hedder .. ingenting?!?
- Panik! hvad skal vi gøre, hvad skal vi GØRE.. OK, vi lader som om han bad om at starte forfra.
Så i stedet for href="#" og derefter onclick="yadayada" kan du slå det sammen i ét:
<a href="java script:showHide(this,'n1')">Læs mere...</a>
NB: "java script" skal være ét ord (bliver delt i 2 af Eksperten.dk)
Hvordan det virker... hm.. bum bum.
Der er nu 2 parametre i kaldet af funktionen:
- Dels this, som er en "pointer" til det element (linket) som indeholder funktions-kaldet selv.
- Dels, som før, id'et på den div du vil fifle med.
Funktionen finder først frem til div'en vha. id'et.
- ser efter om den står åben (display==block) - hvis ja: lukker den.
hvis ikke: så åbnes den.
innerHTML er ALT som måtte eksistere indeni det element som pointeren peger på.
Altså imellem <a..> og </a> <= Altså " og " her : )
"anchor" ja, det var dét det hed - ikke "bogmærke"
Vi havde begge ideen med innerHTML (svært uden)
- "elegant" er måske at stramme den : )
Lige som jeg ville have det! Og jeg der gik og troede det var så forbandet svært - jeg googler det, og en halv dag efter har jeg en perfekt løsning takket være jer :)ggxdg beklager du ikke fik en lille del af pointene - I har begge været gode, men det var jo Tanker der kom med løsningerne ;) Tak for hurtige svar :)
Forresten så virker din sidste idé, Tanker, kun med onclik i stedet for href. Href ændrer ikke på "Læs mere.../Skjul resten...". Kom ved et tilfælde til at bruge onclick i starten ;)