[Javascript] Ein + wird zum -

[hemorieder]

Hi,

ich suche eigentlich genau sowas wie auf Computerbase, man hat ein + und daneben ein text, wenn man auf den text oder auf + klickt öffnet sich ein neuer bereich, und das + wird zum -, wenn man dann aufs minus drückt wird aus dem - wieder ein + . Ihr wisst was ich meine

Hat einer von euch dafür den code ? Hab schon versucht mir den bei computerbase zusammen zu suchen, kriegs aber nicht hin.

Danke im vorraus.

mfg

hemorieder

 

[davidbaumann]

Ein Beispiel:

    <li id="li_hardware"><a href="/news/hardware/" onclick="this.blur();return nestedlist_collapse('hardware')" class="collapse"></a><a href="/news/hardware/">Hardware</a>
        <ul>
            <li><a href="/news/hardware/arbeitsspeicher/">Arbeitsspeicher</a></li>
            <li><a href="/news/hardware/chipsaetze/">Chipsätze</a></li>
            <li><a href="/news/hardware/gehaeuse_kuehlung/">Gehäuse &amp; Kühlung</a></li>
            <li><a href="/news/hardware/grafikkarten/">Grafikkarten</a></li>
            <li><a href="/news/hardware/komplettsysteme/">Komplettsysteme</a></li>
            <li><a href="/news/hardware/laufwerke/">Laufwerke</a></li>
            <li><a href="/news/hardware/mainboards/">Mainboards</a></li>
            <li><a href="/news/hardware/monitore_displays/">Monitore &amp; Displays</a></li>
            <li><a href="/news/hardware/multimedia/">Multimedia</a></li>
            <li><a href="/news/hardware/netzwerk_internet/">Netzwerk &amp; Internet</a></li>
            <li><a href="/news/hardware/organizer_pdas/">Organizer &amp; PDAs</a></li>
            <li><a href="/news/hardware/peripherie/">Peripherie</a></li>
            <li><a href="/news/hardware/prozessoren/">Prozessoren</a></li>
            <li><a href="/news/hardware/supercomputer/">Supercomputer</a></li>
        </ul>    
</li>

Formatiert via CSS sodass sie ausgeblendet werden

/* Verschachtelte Listen (z.B. Kategorien in linker Sidebar) */
ul.nested li {
    padding:0;
    background:none;
    font-weight:bold;
    line-height:15px;
}

ul.nested li li {
    padding-left:3px;
    font-weight:normal;
}

ul.nested li.collapsed ul {
    display:none;
}

ul.nested li a.collapse {
    margin-left:0;
    display:block;
    float:left;
    height:13px;
    width:12px;
    background:url(/design/collapse.png) no-repeat 0 -18px;
    text-decoration:none;
}

ul.nested li a.collapse:hover {
    opacity:0.6;
}

ul.nested li.collapsed a.collapse {
    background-position:0 3px;
}

ul.nested li a.neutral {
    background:url(/design/collapse_blank.png) no-repeat 0 3px;



}

Und die Javascript-Funktion zum Ein/Ausblenden

function nestedlist_collapse(name) {
    var el = document.getElementById('li_' + name);
    if (el.className == 'collapsed') {
        el.className = '';
    } else {
        el.className = 'collapsed';
    }
    return false;
}

Noch irgendwelche Fragen?

David