Avatar billede rasmus_damberg Nybegynder
21. oktober 2005 - 12:39 Der er 7 kommentarer og
1 løsning

Åben og lukke funktion

Heya..

Jeg har en åben og lukke funktion, hvor i jeg mangler en funktion, der gør, at når jeg åbner siden som standard, så er alle boxene lukket ned.

Derefter skal man BÅDE kunne åbne OG lukke dem ved at klikke på +/-.

Here goes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
    <script type="text/javascript">
    objArr = new Array('box1','box2','box3');

    function toggle(objName){
        for(i=0;i<objArr.length;i++){
            tObj=document.getElementById(objArr[i]);
            tObj.style.display = (objArr[i]==objName) ? "block" : "none" ;
        }
    }

    function init(){
        dHash = document.location.hash;
        tName = (dHash.indexOf("#")!=-1) ? dHash.substr(1) : objArr[0] ;
        toggle(tName);
    }
   
    window.onload = init;
    </script>
</head>

<body>

<!-- block 1 -->
<table border="0" cellpadding="0" cellspacing="0" width="150" height="20" bgcolor="#aaaaaa">
<tr>
    <td align="right"><a href="#box1" onclick="toggle('box1')">[+/-]</a></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="150" height="150" bgcolor="#999999" id="box1">
<tr>
    <td>&nbsp;</td>
</tr>
</table>
<!-- block 1 -->
<br>
<!-- block 2 -->
<table border="0" cellpadding="0" cellspacing="0" width="150" height="20" bgcolor="#aaaaaa">
<tr>
    <td align="right"><a href="#box2" onclick="toggle('box2')">[+/-]</a></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="150" height="150" bgcolor="#999999" id="box2">
<tr>
    <td>&nbsp;</td>
</tr>
</table>
<!-- block 2 -->
<br>
<!-- block 3 -->
<table border="0" cellpadding="0" cellspacing="0" width="150" height="20" bgcolor="#aaaaaa">
<tr>
    <td align="right"><a href="#box3" onclick="toggle('box3')">[+/-]</a></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="150" height="150" bgcolor="#999999" id="box3">
<tr>
    <td>&nbsp;</td>
</tr>
</table>
<!-- block 3 -->


</body>
</html>
Avatar billede horsmark Nybegynder
21. oktober 2005 - 16:53 #1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
    <script type="text/javascript">
    objArr = new Array('box1','box2','box3');

    function toggle(objName){
        for(i=0;i<objArr.length;i++){
            tObj=document.getElementById(objArr[i]);
            tObj.style.display = (objArr[i]==objName) ? "block" : "none" ;
        }
    }

    function init(){
        dHash = document.location.hash;
        if( dHash.indexOf("#")!=-1) toggle( dHash.substr(1) )
    }
 
    window.onload = init;
    </script>
</head>

<body>

<!-- block 1 -->
<table border="0" cellpadding="0" cellspacing="0" width="150" height="20" bgcolor="#aaaaaa">
<tr>
    <td align="right"><a href="#box1" onclick="toggle('box1')">[+/-]</a></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="150" height="150" bgcolor="#999999" id="box1" style="display:none">
<tr>
    <td>&nbsp;</td>
</tr>
</table>
<!-- block 1 -->
<br>
<!-- block 2 -->
<table border="0" cellpadding="0" cellspacing="0" width="150" height="20" bgcolor="#aaaaaa">
<tr>
    <td align="right"><a href="#box2" onclick="toggle('box2')">[+/-]</a></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="150" height="150" bgcolor="#999999" id="box2" style="display:none">
<tr>
    <td>&nbsp;</td>
</tr>
</table>
<!-- block 2 -->
<br>
<!-- block 3 -->
<table border="0" cellpadding="0" cellspacing="0" width="150" height="20" bgcolor="#aaaaaa">
<tr>
    <td align="right"><a href="#box3" onclick="toggle('box3')">[+/-]</a></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="150" height="150" bgcolor="#999999" id="box3" style="display:none">
<tr>
    <td>&nbsp;</td>
</tr>
</table>
<!-- block 3 -->


</body>
</html>
Avatar billede horsmark Nybegynder
21. oktober 2005 - 16:55 #2
ved ikke om jeg misforstod men så må du lige sige til :-)
Avatar billede rasmus_damberg Nybegynder
21. oktober 2005 - 17:05 #3
Ja okay det hjalp jo lidt, men jeg skal kunne åbne OG lukke ved at trykke på +/-...
Avatar billede rasmus_damberg Nybegynder
21. oktober 2005 - 17:06 #4
Det du har gjort er jo bare at lukke dem alle som standard ved at fjerne linien:
toggle(tName);

Så der skal simpelthen tilføjes en mulighed for at åbne og lukke - men hvordan? :)
Avatar billede roenving Novice
22. oktober 2005 - 05:54 #5
Måske sådan ?-)

-- og bemærk, at jeg er lidt doven, så jeg foretrak at overskue style-reglerne via et stylesheet:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <title>Untitled</title>
    <script type="text/javascript">
    objArr = new Array('box1','box2','box3');

    function toggle(objName){
        var state = document.getElementById(objName).style.display != "block";
        for(i=0;i<objArr.length;i++){
            tObj=document.getElementById(objArr[i]);
            tObj.style.display = (objArr[i]==objName && state) ? "block" : "none" ;
        }
    }
/* Blokken er udkommenteret og kan fjernes
    function init(){
        dHash = document.location.hash;
        tName = (dHash.indexOf("#")!=-1) ? dHash.substr(1) : objArr[0] ;
        toggle(tName);
    }
   
    window.onload = init;
Her slutter blokken !-)
*/
    </script>
<style type="text/css">
table{border:0;border-collapse:collapse;width:150px;}
.myTable{height:150px;background:#999;display:none;}
.myTable td{margin:0;border:0;padding:0;}
</style>
</head>

<body>

<!-- block 1 -->
<table style="height:20px; background:#aaa">
<tr>
    <td align="right"><a href="#box1" onclick="toggle('box1')">[+/-]</a></td>
</tr>
</table>
<table class="myTable" id="box1">
<tr>
    <td>&nbsp;</td>
</tr>
</table>
<!-- block 1 -->
<br>
<!-- block 2 -->
<table style="height:20px; background:#aaa">
<tr>
    <td align="right"><a href="#box2" onclick="toggle('box2')">[+/-]</a></td>
</tr>
</table>
<table class="myTable" id="box2">
<tr>
    <td>&nbsp;</td>
</tr>
</table>
<!-- block 2 -->
<br>
<!-- block 3 -->
<table style="height:20px; background:#aaa">
<tr>
    <td align="right"><a href="#box3" onclick="toggle('box3')">[+/-]</a></td>
</tr>
</table>
<table class="myTable" id="box3">
<tr>
    <td>&nbsp;</td>
</tr>
</table>
<!-- block 3 -->


</body>
</html>
Avatar billede rasmus_damberg Nybegynder
24. oktober 2005 - 12:45 #6
Sådan! it works... den ska du da ha point for :)
Avatar billede roenving Novice
24. oktober 2005 - 12:51 #7
Oki '-)
Avatar billede roenving Novice
25. oktober 2005 - 17:20 #8
-- og tak for point ;~}
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