Drop down description box
HTML
<div id="newContainer">
<div class="hidden">
</div>
<div id="initialContent">
<a href="#" class="resource 1">
<h2>resource 1</h2>
</a>
<a href="#" class="resource 2">
<h2>resource 2</h2>
</a>
</div>
<div id="briefDescription">
<div class="resource 1">Badgers are short-legged omnivores</div>
<div class="resource 2">The honey badger</div>
<ul>
<li><a href="#" id="moreInfo">Full description</a>
</li>
</ul>
</div>
<div id="fullDescription">
<div class="resource 1">Badgers are short-legged omnivores in the family Mustelidae which also includes the otters, polecats, weasels and wolverines. The 11 species of badger are grouped in three subfamilies: Melinae, Mellivorinae and Taxideinae.</div>
<div class="resource 2">The honey badger, also known as the ratel, is a species of mustelid native to Africa, Southwest Asia, and the Indian Subcontinent.</div>
<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 a {
text-decoration:none;
display:inline-block;
margin-left:25px;
margin-top:-10px;
}
#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 () {
getClassName();
displayContent();
infoMsgRemove();
removeInfo();
moreInfo();
});
var briefInfo = $('#briefDescription');
var moreInfo = $('#moreInfo');
var fullInfo = $('#fullDescription');
var selectedClass = chosenClass;
var createdBriefInfo = newBriefInfo;
function getClassName() {
$('a').click(function () {
var chosenClass = $(this).attr('class');
var selectedClass = chosenClass;
alert(selectedClass + ' chosen');
briefInfo.addClass(chosenClass);
var newBriefInfo = briefInfo.addClass(chosenClass);
var createdBriefInfo = newBriefInfo.hasClass(chosenClass);
alert('class added'+ briefInfo.text());
});
}
function showOnly(){
$('#initialContent').children().hide().filter(createdBriefInfo).show();
alert('shown')
}
function displayContent() {
$('#initialContent').click(function (e) {
showOnly();
if (briefInfo.is(':hidden')) {
alert('hidden');
createdBriefInfo.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('fast');
moreInfo.show('li');
});
}