Avatar billede jackass- Nybegynder
20. juni 2006 - 10:39 Der er 4 kommentarer og
1 løsning

folde-ud tekst

Hej,

Er der nogen der har et eksempel på hvordan man nemmest kan lave "folde-ud" tekst.. altså ligesom de gør med programbeskrivelserne på tv.tv2.dk som fulder sig ud når man klikker på programmet, eller på fx http://www.isohunt.com/torrents.php?ihq=new&ext=&op=and når man klikker på hver entry?

Jeg trækker nogle data ud om brugere.. og man skal så (ved at klikke på rækken) kunne folde den ud og se yderligere detaljer om denne bruger.

På forhånd tak :D

/jack
Avatar billede mm12010 Nybegynder
20. juni 2006 - 10:53 #1
den helt enkle måde:

<style type="text/css">
strong.user{cursor:pointer;}
div.user{display:none;}
</style>

<script type="text/javascript">
function toggleView(user){
  user.nextSibling.style.display=(user.nextSibling.style.display!='block')?'block':'none';
}
</script>

<strong class="user" onclick="toggleView(this);">Brugernavn</strong><div class="user">Brugerinfo</div>
Avatar billede jackass- Nybegynder
20. juni 2006 - 11:17 #2
Det er noget i den retning ja, men et lille issue jeg håber du kan hjælpe med:

Jeg har en tabel, og hver bruger i en row, med 8 kolonner. Når jeg bruger det eksempel du har skrevet, kommer al teksten (i dette tilfælde "Brugerinfo" i kolonne 3 (altså der hvor "Brugernavn" linket er.

Jeg ville gerne, at når man trykker på "Brugernavn", så foldes en ny row ud nedenunder, med colspan="8" sådan at man har hele tabellens bredde til at skrive "Brugerinfo" eller en længere tekst ud i.

Ved du hvad jeg mener? :)
Avatar billede mm12010 Nybegynder
20. juni 2006 - 12:50 #3
det var jo lidt en anden sag men det kan da løses - fx. sådan:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
table{width:500px;}
table,td{border:1px solid red;}
td.user{cursor:pointer;font-weight:bold;}
tr.user_info{display:none;}
</style>
<script type="text/javascript">
function toggleView(user){
  var tr=document.getElementById(user.id+"_info").style;
  var display=!document.all?"table-row":"block";
  tr.display=(tr.display!=display)?display:'none';
}
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0">
  <tr>
    <td class="user" id="user_1" onclick="toggleView(this);">Brugernavn #1</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="user_1_info" class="user_info">
    <td colspan="3">Information bruger #1</td>
  </tr>
  <tr>
    <td class="user" id="user_2" onclick="toggleView(this);">Brugernavn #2</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr id="user_2_info" class="user_info">
    <td colspan="3">Information bruger #2</td>
  </tr>
</table>
</body>
</html>
Avatar billede jackass- Nybegynder
20. juni 2006 - 14:38 #4
Ah ja.. takker.. smider du svar? :)
Avatar billede mm12010 Nybegynder
20. juni 2006 - 14:43 #5
selv tak :o)
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