Avatar billede Slettet bruger
04. april 2006 - 13:54 Der er 7 kommentarer og
1 løsning

Collapse og expande tekst

Hej eksperter, jeg har et lille javascript, som gør at jeg kan collapse og expande et tekst-stykke, så det ikke fylder for meget.

Jeg har et span tag, der som start indeholder 1 lille bid af teksten, og når jeg så klikker på mit +, som expand'er teksten, bytter scriptet mit span tag's indhold ud med den fulde tekst.

Teksten som den skal bytte ud med ligger i selve mit link.
<a href="java script:byt(1, 'den lille bid af teksten', 'her er så hele teksten til expand.');">+</a>

Den først er mit id, på mit span tag, og den næste er den lille tekst, og nr. 3 er den fulde tekst.

Men på denne måde er det meget skrøbeligt, og ikke så smart synes jeg selv, hvis nu man vil lave HTML i teksten, så virker det ikke.
Avatar billede jzip Nybegynder
04. april 2006 - 15:02 #1
Hej

Du kan holde teksterne i nogle arrays som du initialisere i onload eventen, herefter kan du hente teksterne ud som du vil:

<html>
<head>
<script type="text/javascript">

var storTekst = new Array();
var lilleTekst = new Array();
   
function init()    {
  storTekst[0] = "<table border=\"1\"><tr><td>Dette er en stor tekst</td></tr></table>";
  lilleTekst[0] = "Lille tekst";
}
   
function byt(id)    {
  var elem = document.getElementById("div"+id);
  if(elem.stor==null)    {
    elem.stor = true;
    elem.innerHTML = storTekst[id];
  }
  else    {
    elem.innerHTML = lilleTekst[id];   
    elem.stor = null;
  }
}
</script>
</head>
<body onload="init();">
...
<a href="java script:byt(0);">+</a><br>
<span id="div0">Lille tekst</span>

...
</body>
</html>
Avatar billede psykochicken Nybegynder
05. april 2006 - 02:00 #2
Hvis du har længere tekster med megen formatering var det måske lettere at lave 2 span´s og vise/skjule dem ex:

<script type="text/javascript">
function showhide(id){
  for(i=1;i<3;i++){
  var a = document.getElementById(id + i);
    if(a.style.display=='none'){
      a.style.display='inline';
    }else{
      a.style.display='none';
    }
  }
}
</script>
<div style="width:300px;">
<a href="#" onclick="showhide('tekst');return false;">+</a>
    <span id="tekst1">
    Her er en teaser...
    </span>
    <span id="tekst2" style="color:red;display:none;">
    Her er den rigtige tekst og der er meget af den....
    </span>
</div>

/psc
Avatar billede Slettet bruger
10. august 2006 - 08:53 #3
Jeg vil sige det er en delere (mellem jer 2 self ;D)...?
Avatar billede psykochicken Nybegynder
11. august 2006 - 00:50 #4
Tak for dit hurtige svar ;o)...men du behøver ikke kaste point efter mig.

/psc
Avatar billede Slettet bruger
12. august 2006 - 14:48 #5
selv tak ;D
Jzip hvad med dig?
Avatar billede jzip Nybegynder
13. august 2006 - 11:34 #6
Hvis du kan bruge scriptet/ideen må du da gerne give lidt kredit, hvis du syntes :-)
Avatar billede Slettet bruger
13. august 2006 - 11:56 #7
iden var okay, så du får points.
Avatar billede Slettet bruger
21. december 2006 - 23:31 #8
/lukker
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester