ShowHide

by unclego

HTML

<div class="link" id="info-1" onclick="displayInfo('1', true);">Бяла роза</div>
<div class="hiddenInfo" id="info-1-d">Цъфнала ми Бяла роза бля бля бля
    <br />Цъфнала ми Бяла роза бля бля бля
    <br />Цъфнала ми Бяла роза бля бля бля</div>
<div class="link" id="info-2" onclick="displayInfo('2', true);">Черна роза</div>
<div class="hiddenInfo" id="info-2-d">Цъфнала ми Черна роза бля бля бля
    <br />Цъфнала ми Черна роза бля бля бля
    <br />Цъфнала ми Черна роза бля бля бля</div>
<div class="link" id="info-3" onclick="displayInfo('2', true);">Пембяна роза</div>
<div class="hiddenInfo" id="info-3-d">Цъфнала ми Пембяна роза бля бля бля
    <br />Цъфнала ми Пембяна роза бля бля бля
    <br />Цъфнала ми Пембяна роза бля бля бля</div>

CSS

.hiddenInfo {
    background-color: #FFFFE0;
    text-align : justify;
    border: 1px solid black;
}
.link {
    cursor: pointer;
    display: block;
    background-image: url('http://icons.iconarchive.com/icons/deleket/rounded-square/16/Button-Info-icon.png');
    background-position: right;
    background-repeat: no-repeat;
}

JavaScript

function displayInfo(id, showHide) {
        var desc = document.getElementById(id + '-d');
        var link = document.getElementById(id);

        if (showHide) {
            desc.style.display = 'block';
            link.onclick = function () {
                displayInfo(id, false);
            };
            link.style.backgroundImage = "url('http://icons.iconarchive.com/icons/deleket/button/16/Button-Close-icon.png')";


        } else {
            desc.style.display = 'none';
            link.onclick = function () {
                displayInfo(id, true);
            };
            link.style.backgroundImage = "url('http://icons.iconarchive.com/icons/deleket/rounded-square/16/Button-Info-icon.png')";

        }
    }

    function hideOnStart() {
        var elements = document.getElementsByTagName('div');
        for (i = 0; i < elements.length; i++) {
            id = elements[i].id;
            className = elements[i].className;

            if ( (id.lastIndexOf("info-", 0) === 0) && (className.indexOf('link') != -1) ) {
                displayInfo(id, false);
            }
        }
    }
    hideOnStart();