Skjul eller vis tabel eller tabel-row

Jeg har lavet det ved at lave hele menu strukturen i lister indeni lister og så smidt noget javascript på som folder det hele sammen.

Selv om OleBole ikke kan lide det, så er jquery ganske god til dette.

kan du vise mig det?

Lav en liste med lister inden i lister, giv den yderste id'en 'sitemap' (f.eks.), desuden forventes det at punktet som har underpunkter har en href som ender på # (dette kan man også programmere sig udenom)

Så skulle følgende kunne gøre det (smides i headeren)

<script type="text/javascript" src="/jquery/1.2/jquery.js"></script>

<script type="text/javascript">
// sjkul underpunkterne når javascript aktivt
    document.write("<style type=\"text/css\">\#sitemap li ul { display:none; }</style>");

function enableClickableMenu() {
    $("#sitemap").find("ul").hide();
    $("#sitemap").find("a[href$=#]").click(
    function() {
        var X = $(this).parent().children("ul");
        $(this).parent().parent().find("ul").not(X).hide();
        $(this).parent().children("ul").toggle();
        return false;
    }
    );
}

$(document).ready(function() {
    enableClickableMenu();
});

</script>

jquery kan frit downloades på nettet

<ole>

<style type="text/css">
#menu {
    width: 140px;
}
#menu div {
    color: #000;
    background: #ededed;
}
#menu, #menu ul {
    font: 12px/1.2em tahoma, arial, sans-serif;
    list-style: none;
    padding: 0;
    margin: 0;
    cursor: default;
}
#menu ul {
    padding-left: 20px;
    display: none;
    background: #cccccc;
}

#menu li a, #menu li a:visited {
    height: 1.4em;
    padding: 1px 5px 0 10px;
    display: block;
    text-decoration: none;
    color: #000;
    background: #efefef;
}
#menu li a:hover, #menu li a:active {
    text-decoration: none;
    color: #f0f0f0;
    background: #666666;
}

#menu li a.head, #menu li a.head:visited {
    height: 1.4em;
    padding: 1px 5px 0 10px;
    display: block;
    text-decoration: none;
    color: #000;
    background: #dedede;
}
#menu li a.head:hover, #menu li a.head:active {
    text-decoration: none;
    color: #f0f0f0;
    background: #999999;
}
</style>

<script type="text/JavaScript">
var oActMenu = null;
function toggleItem(e) {
    e = e ? e : window.event;
    var oSrcElm = e.srcElement ? e.srcElement : e.target;
    var oThisSub = oSrcElm.parentNode.getElementsByTagName("ul")[0];
    if (oActMenu) {
        if (oActMenu==oThisSub) return;
        oActMenu.style.display = "none";
    }
    oActMenu = oThisSub;
    var css = oActMenu.style;
    css.display = css.display!="block" ? "block" : "none";
    oSrcElm.blur();
    if (e.stopPropagation) e.stopPropagation();
    if (e.preventDefault) e.preventDefault();
    e.cancelBubble = true;
    e.returnValue = false;
}
window.onload = function() {
    var aHeads = document.getElementById("menu").getElementsByTagName("a");
    for (var i=0,j=aHeads.length; i<j; i++) {
        if (aHeads[i].className!="head") continue;
        if (aHeads[i].attachEvent) aHeads[i].attachEvent("onclick", toggleItem);
        else if (aHeads[i].addEventListener) aHeads[i].addEventListener("click", toggleItem, false);
        else aHeads[i].onclick = toggleItem;
    }
}
</script>

<ul id="menu">
    <li><a href="#" class="head">Punkt 1</a>
        <ul>
            <li><a href="side1_1.html">Punkt 1.1</a></li>
            <li><a href="side1_2.html">Punkt 1.2</a></li>
            <li><a href="side1_3.html">Punkt 1.3</a></li>
            <li><a href="side1_4.html">Punkt 1.4</a></li>
        </ul>
    </li>
    <li><a href="#" class="head">Punkt 2</a>
        <ul>
            <li><a href="side2_1.html">Punkt 2.1</a></li>
            <li><a href="side2_2.html">Punkt 2.2</a></li>
            <li><a href="side2_3.html">Punkt 2.3</a></li>
        </ul>
    </li>
    <li><a href="#" class="head">Punkt 3</a>
        <ul>
            <li><a href="side3_1.html">Punkt 3.1</a></li>
            <li><a href="side3_2.html">Punkt 3.2</a></li>
            <li><a href="side3_3.html">Punkt 3.3</a></li>
            <li><a href="side3_4.html">Punkt 3.4</a></li>
            <li><a href="side3_5.html">Punkt 3.5</a></li>
        </ul>
    </li>
    <li><a href="#" class="head">Punkt 4</a>
        <ul>
            <li><a href="side4_1.html">Punkt 4.1</a></li>
            <li><a href="side4_2.html">Punkt 4.2</a></li>
            <li><a href="side4_3.html">Punkt 4.3</a></li>
        </ul>
    </li>
</ul>

/mvh
</bole>

- njaahhh  :)

function toggleItem(e) {
    e = e ? e : window.event;
    var oSrcElm = e.srcElement ? e.srcElement : e.target;
    var oThisSub = oSrcElm.parentNode.getElementsByTagName("ul")[0];
    if (oActMenu!=oThisSub) {
        if (oActMenu) oActMenu.style.display = "none";
        oActMenu = oThisSub;
        var css = oActMenu.style;
        css.display = css.display!="block" ? "block" : "none";
    }
    oSrcElm.blur();
    if (e.stopPropagation) e.stopPropagation();
    if (e.preventDefault) e.preventDefault();
    e.cancelBubble = true;
    e.returnValue = false;
}

der er ikke mulihed for at lave noget tilsvarende i tabeller?

Hvorfor tabeller?

øhhh syntes bare det er lettere at formatere. spacing, border osv. Måske bare mig der ik er så vant til lister

nåh men det virker jo så tak for det