collapsible fieldset with smooth to-anchor

by eapo

HTML

<div class="content">
    <div class="fieldset collapsible scroll toggle" id="olcso">
        <div class="legend">Miért ilyen olcsó?</div>
        <div class="content">
            <li>Mert gyorsan dolgozunk,</li>
            <li>előre elkészített elemeket használunk és</li>
            <li>értünk hozzá. Alacsonyan tudjuk tartani az árakat mert</li>
            <li>nem tartunk fent irodát,</li>
            <li>nem költünk fölösleges erőforrásokra, és tudjuk, hogy</li>
            <li>Magyarországon kevés a pénz.</li>
        </div>
    </div>
    <div class="fieldset collapsible scroll toggle" id="szolgaltatas">
        <div class="legend">Mit tartalmaz a szolgáltatás?</div>
        <div class="content collapsed">Szolgáltatásunk a következőket tartalmazza:
            <li>a weboldal megtervezése hozott adatok alapján (képek, szövegek, hivatkozások);</li>
            <li>a weboldal telepítése a megrendelő által biztosított tárhelyre <small>(szükség esetén tudunk biztosítani tárterületet és aldomaineket is)</small>;</li>
            <li>alapvető adatok feltöltése és</li>
            <li>további adatok feltöltésének biztosítása adminisztrációs felületen;</li>
            <li>alapvető űrlapok <small>(kapcsolafelvétel, hírlevél, hozzászólás)</small> elkészítése</li>
            <li>alapvető keresőoptimalizálási módszerek alkalmazása</li>
            <li>közösségi média megosztás lehetőség biztosítása <small>(facebook, twitter, stb..)</small>
            </li>
            <li>tárhely és domain beállítása</li>
            <li><i>[email protected]</i> email címek létrehozása</li>
            <li>statisztikai eszközök beállítása</li>
            <li>hírlevél feliratkozás beállítása</li>
            <li>igény esetén egyéb szolgáltatásokat is nyújtani tudunk...</li>
        </div>
    </div>
    <div class="fieldset collapsible scroll toggle" id="csapat">
        <div class="legend">Kik alkotják a Web7ed Csapatot?</div>
        <div class="content collapsed">
           ...

CSS

#content {
    padding: 20em 0;
}

JavaScript

function smoothScrollTo(element) {
    var thisTop = $($(element).parent()).offset().top;
    $("html, body").animate({
        scrollTop: thisTop + "px"
    }, {
        duration: 600
    });
    $(element).prepend(thisTop + "|");
    return false;
};


$(document).ready(function () {
    $(".collapsible .collapsed").hide();
    $(".collapsible .legend").html(function () {
        var scroll = $(this).parent().hasClass('scroll');
        if (scroll == true) {
            href = "#" + $(this).parent().attr('id');
        } else {
            href = "javascript:void(0)";
        };
        return '<a href="' + href + '">' + $(this).html() + '</a>';
    }).click(function () {
        $(this).parent().children('.content').slideToggle();
    });
    $(".collapsible.scroll .legend").click(function (e) {
        smoothScrollTo(this);
        e.preventDefault();
    });
});