Avatar billede gregblach Nybegynder
24. juni 2007 - 23:37 Der er 7 kommentarer og
2 løsninger

Dynamiske folde-ud texter

Hej Experter,

Kan i ikke hurtigt sætte mig på sporet af hvordan man bygger dynamiske folde-ud texter på en hjemmeside? Går ud fra at det laves ved hjælp af DHTML og ikke i Javascript eller CSS?

Jeg har ikke lige noget exempel at henvise til, men skal bruge det da nogle sider er blevet meget lange, og jeg vil gerne øge overskueligheden ved at stille det op som en form for menupunkter, hvor texten så foldes ud/vises, når der klikkes på overskriften/emnet.

Håber spørgsmålet giver mening.

/G
Avatar billede mikkelk Nybegynder
24. juni 2007 - 23:40 #1
Avatar billede gider_ikke_mere Nybegynder
25. juni 2007 - 01:30 #2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Simpel menu</title>
<meta venstremenu af rosenving>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.menupunkt{font-family:tahoma,verdana,arial,sans-serif;
cursor:pointer;color:#800000;
background:#fff;font-weight:800;
font-style:italics;
font-size:10px;width:250px;}
.menu{display:none;padding-left:5px;}
.menu a{text-decoration:none;}
.menu a:link{color:black;}
.menu a:visited{color:green;}
.menu a:hover{color:red}
.menu a:active{color:red}

</style>
<script language="javascript" type="text/javascript">
function showMenu(d){
  var id = d.id.substring(5);
  divs = document.getElementsByTagName('DIV');
  for(i=0;divs.length>i;i++){
    if(divs[i].id.indexOf('menu')==0&&divs[i].id!='menu'+id){
      divs[i].style.display='none';
      document.getElementById('o'+divs[i].id+'pic').src = "plus.gif";
    }
  }
  st = document.getElementById('menu'+id).style;
  st.display = (st.display!='block')?'block':'none';
  document.getElementById(d.id+'pic').src = (st.display=='block')?"minus.gif":"plus.gif";
}
</script>
</head>
<body>
<div id="omenu1" class="menupunkt" onclick="showMenu(this);">
<img id="omenu1pic" src="plus.gif" height="10" width="10">
Punkt 1
  <div id="menu1" class="menu" onclick="event.cancelBubble=true">
    <a href="#" onclick="return false;">Underpunkt 1</a><br>
    <a href="#" onclick="return false;">Underpunkt 2</a><br>
    <a href="#" onclick="return false;">Underpunkt 3</a><br>
    <a href="#" onclick="return false;">Underpunkt 4</a>
  </div>
</div>
<div id="omenu2" class="menupunkt" onclick="showMenu(this);">
<img id="omenu2pic" src="plus.gif" height="10" width="10">
Punkt 2
  <div id="menu2" class="menu" onclick="event.cancelBubble=true">
    <a href="#" onclick="return false;">Underpunkt 1</a><br>
    <a href="#" onclick="return false;">Underpunkt 2</a><br>
    <a href="#" onclick="return false;">Underpunkt 3</a><br>
    <a href="#" onclick="return false;">Underpunkt 4</a>
  </div>
</div>
<div id="omenu3" class="menupunkt" onclick="showMenu(this);">
<img id="omenu3pic" src="plus.gif" height="10" width="10">
Punkt 3
  <div id="menu3" class="menu" onclick="event.cancelBubble=true">
    <a href="#" onclick="return false;">Underpunkt 1</a><br>
    <a href="#" onclick="return false;">Underpunkt 2</a><br>
    <a href="#" onclick="return false;">Underpunkt 3</a><br>
    <a href="#" onclick="return false;">Underpunkt 4</a>
  </div>
</div>
<div id="omenu4" class="menupunkt" onclick="showMenu(this);">
<img id="omenu4pic" src="plus.gif" height="10" width="10">
Punkt 4
  <div id="menu4" class="menu" onclick="event.cancelBubble=true">
    <a href="#" onclick="return false;">Underpunkt 1</a><br>
    <a href="#" onclick="return false;">Underpunkt 2</a><br>
    <a href="#" onclick="return false;">Underpunkt 3</a><br>
    <a href="#" onclick="return false;">Underpunkt 4</a>
  </div>
</div>
<div id="omenu5" class="menupunkt" onclick="showMenu(this);">
<img id="omenu5pic" src="plus.gif" height="10" width="10">
Punkt 5
  <div id="menu5" class="menu" onclick="event.cancelBubble=true">
    <a href="#" onclick="return false;">Underpunkt 1</a><br>
    <a href="#" onclick="return false;">Underpunkt 2</a><br>
    <a href="#" onclick="return false;">Underpunkt 3</a><br>
    <a href="#" onclick="return false;">Underpunkt 4</a>
  </div>
</div>
</body>
</html>
Avatar billede gider_ikke_mere Nybegynder
25. juni 2007 - 01:32 #3
Avatar billede roenving Novice
25. juni 2007 - 02:58 #4
Ja, det laves i dhtml, dvs. kombinationen af html, javascript og css ...
Avatar billede gregblach Nybegynder
26. juni 2007 - 14:36 #5
mikkelk > Ja, lige netop sådan noget der. Jeg tester og vender tilbage.

akyhne > Det var ikke en menu jeg ledte efter, men ellers tak for buddet. ;o)
Avatar billede gider_ikke_mere Nybegynder
26. juni 2007 - 18:30 #6
Avatar billede gregblach Nybegynder
27. juni 2007 - 08:04 #7
akyhne > Ved nærmere eftersyn, så har du ret. ;o)


Begge to > Smider i ikke et svar - så må i dele pointene.
Avatar billede gider_ikke_mere Nybegynder
27. juni 2007 - 08:09 #8
Ok.
Avatar billede mikkelk Nybegynder
27. juni 2007 - 09:49 #9
:-) Udmærket. Ja, akyhnes er jo basalt set helt samme princip, så den må jo være lige så god...
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