Drop down description box

by dvjc

HTML

<div id="newContainer">
    <div class="hidden">
         <h2><xsl:value-of select="/Properties/Data/Group[@Name='Header']/Datum[@Name='Title']"/></h2>

    </div> <a href="#" id="initialContent">
		<h2>resource 1</h2>
    </a>

</div>
<div id="briefDescription">
    <p>Description</p>
    <ul>
        <li><a href="#" id="moreInfo">Full description</a></li>
    </ul>
</div>
<div id="fullDescription">
    <p>Full Description</p>
    <ul>
        <li><a href="#" id="noInfo">Remove description</a>
        </li>
        <li><a href="#" id="lessInfo">Less description</a></li>
    </ul>
</div>

CSS

#newContainer {
    width:96%;
    height:auto;
    border-style:solid;
    border-width:2px;
}
#newContainer .scrollBox {
    width:200px;
    height:auto;
    margin:2px;
    padding:2px;
    border-style:solid;
    border-width:2px;
    text-align:center;
}
#newContainer ul li, #briefDescription ul li, #fullDescription ul li {
    display:inline-block;
    padding:2px;
    text-decoration: none;
}
#newContainer ul li a {
    text-decoration:none;
}
#newContainer .descriptionShort {
    width:96%;
    border-style:solid;
    border-width:2px;
}
#newContainer .descriptionMore {
    width:96%;
    border-style:solid;
    border-width:2px;
}
#briefDescription {
    position:inherit;
    display:none;
}
#fullDescription {
    position:inherit;
    display:none;
}

JavaScript

$(document).ready(function () {
    displayContent();
    infoMsgRemove();
    removeInfo();
    moreInfo();
});

var briefInfo = $('#briefDescription');
var moreInfo = $('#moreInfo');
var fullInfo = $('#fullDescription');

function hideAll(){

    $('#initialContent').click(function (e){
        fullInfo.hide();
        briefInfo.hide();
        alert('all hidden');
    });
}

function displayContent() {

    $('#initialContent').click(function (e) {

        if (briefInfo.is(':hidden')) {
            briefInfo.slideDown('fast');
            moreInfo.show('li');
        } else {
            fullInfo.slideDown('fast');
            moreInfo.hide('li');
        }
        e.preventDefault();
    });
}

function moreInfo(){

    $('#moreInfo').click(function(){
        if (fullInfo.is(':hidden')){
            fullInfo.slideDown('fast');
            moreInfo.hide('li');
        } 
    });
}

function infoMsgRemove() {

    $('#noInfo').click(function () {
        fullInfo.hide();
        briefInfo.hide();
        alert('msg hidden');
    });
}

function removeInfo() {

    $('#lessInfo').click(function () {
        fullInfo.slideUp('slow');
        moreInfo.show('li');
    });
}