Show/hide more info

ALL FOR YOU WOLFEH

by mich

HTML

<div class="infobox">
    <span class="more_info" onclick="showInfo(this, 'info_container')">Show more info</span>
    <div id="info_container" class="info hidden">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempus nibh vitae lectus auctor iaculis. Nunc auctor leo sit amet leo lacinia a vestibulum lorem cursus. Donec ac metus a tortor pellentesque rutrum sit amet eget turpis.
    </div>
    <noscript>
        <div class="info">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempus nibh vitae lectus auctor iaculis. Nunc auctor leo sit amet leo lacinia a vestibulum lorem cursus. Donec ac metus a tortor pellentesque rutrum sit amet eget turpis.
        </div>
    </noscript>
</div>

CSS

.more_info { text-decoration: underline; }
.info { color: #555; }
.hidden { display: none; }
.shown { display: block; }
.infobox { border: solid 1px #444; padding: 3px;}

JavaScript

function showInfo(el, infoCont) {
    if (document.getElementById(infoCont)) {
        var cont = document.getElementById(infoCont);
        if (cont.getAttribute('class')=='info hidden') {
            cont.setAttribute('class', 'info shown');
            el.innerHTML = 'Hide info';
        }
        else {
            cont.setAttribute('class', 'info hidden');
            el.innerHTML = 'Show more info';
        }
    }
}