expand / collapse af linkoversigt..

Du skal lave noget tabeller som du kan skjule vha. af noget javascript. Jeg har et lille eks. her. Så kan du prøve at lege lidt med det.. :)

<script language="javascript">
<!--

var prev;
prev = '0';

function ShowHide(id) {

    if ( prev == '0' ) {
        prev = id;
    }
    if (( prev != '0' ) && ( prev != id )) {
        document.all(prev).style.display = 'none';
        prev = id;
    }

    if ( document.all(id).style.display == 'none' ) {
        document.all(id).style.display = '';
    } else {
        document.all(id).style.display = 'none';
    }
}
-->
</script>


<script language="javascript">
<!--

var prev;
prev = '0';

function ShowHide(id) {

    if ( prev == '0' ) {
        prev = id;
    }
    if (( prev != '0' ) && ( prev != id )) {
        document.all(prev).style.display = 'none';
        prev = id;
    }

    if ( document.all(id).style.display == 'none' ) {
        document.all(id).style.display = '';
    } else {
        document.all(id).style.display = 'none';
    }
}
-->
</script>



        <TABLE STYLE="cursor: hand;" onclick="java script:ShowHide('1');">
          <tr>
            <td>tryk her 1</td>
          </tr>
          </TABLE>
         
        <TABLE id="1" style="display:none;">
          <TR>
              <td>skjult tekst 1<br><br></td>
          </TR>
        </TABLE>
       
          <TABLE STYLE="cursor: hand;" onclick="java script:ShowHide('2');">
          <tr>
            <td>tryk her 2</td>
          </tr>
          </TABLE>
         
        <TABLE id="2" style="display:none;">
          <TR>
              <td>skjult tekst 2<br><br></td>
          </TR>
        </TABLE>

hov, det blev lige kopieret en gang for meget..
Håber selv du kan hitte ud af det! :)

Her er lige et andet bud, som egentlig bruger samme teknik (style.display), men på en lidt mere cool måde - og så skulle der også være en chance for mac- og mozillabrugere...

=== I HEAD ====
<style>
.head {cursor:pointer;cursor:hand;}
.section {display:none;}
</style>
<script type='text/javascript'>
var expandedSection;
function expandcollapse (headElement) {
  var section = headElement.nextSibling;
  //næste linie er for en sikkerheds skyld hvis der sku snige sig
  //en kommentar el. lignende ind mellem 'head' og 'section'
  while (section.nodeName.toLowercase() != 'div') section = section.nextSibling;
  section.style.display = 'block';
  if (!!expandedSection) expandedSection.style.display = 'none';
  expandedSection = section;
}
</script>

=== Længere nede... eksempel på kategori ====
<div class='head' onclick='expandcollapse(this)'>England</div>
<div class='section'><ul>
<li>link 1</li>
<li>link 2</li>
</ul></div>