ugrás a tartalomhoz

Link kibontás script

makgab · 2012. Jún. 3. (V), 21.32
Üdv!

Azt szeretném megtudni, hogy egy linkre kattintva, hogyan lehet kibontani egy <div>-et?
Konrétan itt egy példa (nem reklám, csak most találtam egy ilyet):
Link kibontás kattintással.
A "További feltételek és részletek"-re kattintva jelenik meg a kívánt rész:
<div class="showHideInfoControl">
        <a class="showHideToggler" href="#">További feltételek és részletek</a>
        <div class="showHideInfoContent">
            <div class="contents">
                <ul class="lstSquareMag">
                <li>Az É....
                </li>
                <li>Az Én....</li>
                // ...stb.


Firefox firebug-ban és forrásban látom, hogy <div>-ben van az elrejtett rész és kattintással megjelenik. Egy JS a <div>-et "display: none"-ról átállítja pl. "display: block"-ra, ill. betölt egy másik css-t?
Tudna valaki egy egyszerű kód példát mutatni, hogy ez hogyan működik? A nevezett linken nem látom, hogy hogyan működik, de biztos rossz helyen keresem.

Köszönöm!
G.
‹ Szűkített JS keresés DB Ablak bezár gomb beillesztése hogyan? ›
 ■
1

Most hosszú lenne le írni egy

Karvaly84 · 2012. Jún. 3. (V), 22.11
Most hosszú lenne le írni egy megoldást, vagy nincs kedvem mindéhez.

Az oldalon van jQuery illetve ha jól látom az accordion.js ami implementálja a kérdéses effektust. ha ismered a jQuery-t akkor elég ha az accordion.js-t megnézed. Firebug->Szkript fűl alatt tudod megnézni a betöltött JavaScript fájlokat. Ha viszont érdekel egy fapados keretrendszer nélküli megoldás és tudsz várni még kajálok, sörözök egyet, akkor esetleg rakok össze egyet.
2

Igazából tényleg ennyi

Poetro · 2012. Jún. 3. (V), 22.13
Igazából tényleg ennyi történik, amit leírsz, viszont nem töltődik be egy másik CSS, az a CSS már az oldal része. Csináltam egy egyszerű kis példát.
<!DOCTYPE html>
<html>
<head>
    <title>Link expander</title>
    <meta charset="utf-8" />
    <style type="text/css">
        a + .content {
            height: 0;
            overflow: hidden;
            opacity: 0;
            -webkit-transition: all 0.5s ease-in-out;
            -moz-transition: all 0.5s ease-in-out;
            -o-transition: all 0.5s ease-in-out;
            -ms-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
        }
        a:focus + .content,
        a:active + .content,
        .expanded,
        a + .expanded {
            height: auto;
            opacity: 1;
        }
    </style>
</head>
<body>

<a class="expandable" href="#">További információ</a>
<ul class="content collapsed">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

<script type="text/javascript">
    (function () {
        var links = document.getElementsByTagName('a'),
            i = links.length, link;

        function toggleExpand(e) {
            var target = this,
                sibling = target,
                collapsed = /\bcollapsed\b/,
                className;
            do {
                sibling = sibling.nextSibling;
            } while (sibling && sibling.nodeType !== 1);
            if (sibling) {
                className = sibling.className;
                sibling.className = collapsed.test(className) ?
                    (className.replace(collapsed, '') + 'expanded') :
                    (className.replace(/\bexpanded\b/, '') + 'collapsed');
                target.blur();
            }
            return false;
        }

        while (i--) {
            link = links[i];
            if (link.href && /\bexpandable\b/.test(link.className)) {
                link.onclick = toggleExpand;
            }
        }
    }());
</script>

</body>
</html>
Megjegyzés: Valamiért a kódszínező duplázza a sibling-et.
4

ok

makgab · 2012. Jún. 4. (H), 08.15
köszönöm. tanulmányozom.
3

Poetro megelőzött, úgy hogy

Karvaly84 · 2012. Jún. 4. (H), 01.03
Poetro megelőzött, úgy hogy nem rakok össze semmit :D