Ukrywanie pokazywanie div

2010-11-26 15:27:22 Post #1 user76

 
Chciałbym się zapytać, jak wykonać ukrywanie elementu, jeżeli jeszcze jeden został kliknięty.
Oto funkcja js
1
2
3
4
5
6
7
8
function ShowText(id) {
document.getElementById(id).style.display = 'block';
}

function HideText(id) {
document.getElementById(id).style.display = 'none';
}


1
2
3
4
5
6
7
8
9
10
<a href="#\" class=\"panel_user\" onClick=\"ShowText('a'); return false;\"> Napisz...</a>
<div  id=\"b\" class=\"panel_user_form2\">
<a onClick=\"HideText('a'); return false;\" style=\"font-size:10px; \">Zamknij</a>
</div>

<a href=\"#\" class=\"panel_user\" onClick=\"ShowText('b'); return false;\"> Napisz...</a>
<div  id=\"b\" class=\"panel_user_form2\">
<a onClick=\"HideText('b'); return false;\" style=\"font-size:10px; \">Zamknij</a>
</div>


Znalazłem to http://www.quirksmode.org/js/events_order.html, ale to nie rozwiązało niczego

2010-11-26 16:06:19 Post #2 user76

 
js div <- google pierwsza pozycja, w sumie rozwiązanie gotowe

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function showonlyone(thechosenone) {
      var newboxes = document.getElementsByTagName("div");
            for(var x=0; x<newboxes.length; x++) {
                  name = newboxes[x].getAttribute("name");
                  if (name == 'newboxes') {
                        if (newboxes[x].id == thechosenone) {
                        newboxes[x].style.display = 'block';
                  }
                  else {
                        newboxes[x].style.display = 'none';
                  }
            }
      }
}



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<table>
   <tr>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader1" href="javascript:showonlyone('newboxes1');" >collapse</a>
         </div>
         <div name="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px;">Div #1</div>
      </td>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader2" href="javascript:showonlyone('newboxes2');" >collapse</a>
         </div>
         <div name="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #2</div>
      </td>
      <td>
         <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
            <a id="myHeader3" href="javascript:showonlyone('newboxes3');" >collapse</a>
         </div>
         <div name="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #3</div>
      </td>
   </tr>
</table>

Odpowiedz