Oprettet tor. d. 02. september 2010 kl. 18:15:40

Christian_Bundgaard
Christian_Bundgaard (2.075 point. Point ude: 400)
www.focusonit.dk

Show/hide funktion - lille problem

Hej,

Nok ret nemt spørgsmål, men der gives alligevel 50 point. Jeg er ved at lave en show/hide funktion, men der er stadig lidt problemer. Jeg vil gerne have, at der starter med at stå "Læs mere..." på show-funktionen, og derefter "Skjul teksten..." på samme funktion, men nu gør den det jo bare modsat. Jeg har googlet lidt, men jeg synes ikke de er vildt effektive. Til sidst prøvede jeg at lave lidt om på et af dem - problemet med de scripts jeg fandt var, at den kun bytter teksten ud med første ID.

Nok snak. Nu til kode - andre rettelser er også velkomne.

I headeren...:

----------
<script type="text/javascript">
function showHide(id) {
var ele = document.getElementById(id);
if(ele.style.display == "block") {
    ele.style.display = "none";
}
else {
    ele.style.display = "block";
}
</script>
// Jeg valgte at fjerne den funktion jeg prøvede at lave til at skifte teksten, da den ikke virkede.
----------


og brug af det...:

----------
<h2>Eksempel</h2>
Eksempel... <br />
Eksempel... <br />

<div id="n1" style="display: none;">
Uendelige linjer... <br />
Uendelige linjer... <br />
Uendelige linjer... <br />
Uendelige linjer... <br />
</div>

<br />

<a href="#" onclick="showHide('n1');">Læs mere...</a>

----------

Den virker fint, det er bare det med teksten... Hvis du stadig er i tvivl er det link-teksten, jeg snakker om.

Håber på hurtigst svar,
CB

Skrevet tor. d. 02. september 2010 kl. 19:07:48| #1

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>

Skrevet tor. d. 02. september 2010 kl. 19:12:41| #2

ggxdg
ggxdg (5.680 point)
<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...

Skrevet tor. d. 02. september 2010 kl. 19:14:00| #3

ggxdg
ggxdg (5.680 point)
T4NKER's løsning er ret så meget mere elegant :P

Skrevet tor. d. 02. september 2010 kl. 19:15:34| #4

ggxdg
ggxdg (5.680 point)
Ville man så i stedet for alt det med id osv kunne bruge
this.parent?

Skrevet tor. d. 02. september 2010 kl. 19:17:51| #5

ggxdg
ggxdg (5.680 point)
d'oh.. bare glem hvad jeg sagde... linket er jo for hulen ikke child af div'en :P

Skrevet tor. d. 02. september 2010 kl. 19:51:30| #6

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 ;)

Skrevet tor. d. 02. september 2010 kl. 19:57:39| #7

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.

Skrevet tor. d. 02. september 2010 kl. 20:33:31| #8

ggxdg
ggxdg (5.680 point)
"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>

Skrevet tor. d. 02. september 2010 kl. 20:55:46| #9

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 : )

Skrevet tor. d. 02. september 2010 kl. 21:03:13| #10

"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  : )

Skrevet tor. d. 02. september 2010 kl. 22:05:49| #11

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 :)

Skrevet tor. d. 02. september 2010 kl. 22:08:34| #12

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 ;)

Skriv et indlæg




Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] [img]link til billede[/img]
Web- og emailadresser omdannes automatisk til links

Log ind

   

   

Seneste spørgsmål

Muligvis script-konfllikt i jquery. Min slider vises...

Oprettet den 9. februar 2012 kl. 23.00
Peterjakobsen giver 30 point for svar | Giv et svar »

Nybegynder i Flash, hjælp til kørende billede visning?

Oprettet den 8. februar 2012 kl. 15.19
Majaseidelin giver 15 point for svar | Giv et svar »

skjul textarea (ved print) hvis det er tomt

Oprettet den 7. februar 2012 kl. 10.28
dotcom1 giver 60 point for svar | Giv et svar »

Seneste guides

Installer win 7
Den gode bruger


   




Tips & Tricks fra PC World

Teaser billede

Gør dig selv en tjeneste: Køb et ordentligt SD-kort

Der kan være meget stor hastighedsforskel på to umiddelbare ens SD-kort. Se her hvad du skal være opmærksom på, når du køber ekstra hukommelse til din mobil, tablet eller kamera.


Anmeldelser fra PC World

Teaser billede

Test: Denne super-tablet er iPads hårdeste konkurrent

Eee Pad Transformer Prime er frygtindgydende med sin quadcore processor og evne til at trylle sig om til bærbar. Apple bør kigge i bagspejlet, for Asus' tablet-pc kommer buldrende - og gør det...


Seneste blogindlæg

Teaser billede

Tvangslukke spørgsmål: Hvad er den bedste løsning?

Hej Vi har mange åbne spørgsmål på Eksperten. Vi ville gerne tvangslukke dem - så et spørgsmål efter f.eks. 6 måneder lukkes. Men der er et par uklarheder som ville være gode at få lidt input til:...


Nyheder fra PC World

Teaser billede

Gratis flysimulator fra Microsoft

Den legendariske Flight Simulator fra Microsoft genopstår den 29. februar - og denne gang er spillet gratis.


Nyheder fra Computerworld

Teaser billede

Bank: Derfor er login uden NemID helt i orden

Der er ikke hold i påstanden om sikkerhedsproblemer i forbindelse med bankkunders login uden brug af NemID, lyder det fra Nykredit Bank.


Kurser
Samarbejdspartnere

Udgiver · © 2012 IDG Danmark A/S · Hørkær 18 · 2730 Herlev · Tlf.: 77 300 300 · Fax: 77 300 301 · Brug af personoplysninger