Ken Binney wrote:
May I ask what your suggestion would be for how .to apply this technique more than once on the same page?
I haven't tested this on IE 8 or earlier, but it certainly works in a modern browser:
Give the paragraphs that will have hidden material a class called "hasMore". The elements that will be hidden should have the class "more" (if more than one paragraph is to be hidden, wrap them in a <div>, and apply the "more" class to the <div>). Then adapt the styles like this:
.trigger {
text-decoration: underline;
color: blue;
cursor: pointer;
}
.more {
transition: ease-out .7s;
overflow: hidden;
}
.more.closed {
height: 0;
-webkit-transform: translateY(-600px);
transform: translateY(-600px);
margin-bottom: 0;
}
.more.open {
-webkit-transform: translateY(0);
transform: translateY(0);
max-height: 600px;
}
.more + p {
margin-top: 0;
}
Change the block of JavaScript like this:
<script>
var hasMore = document.getElementsByClassName('hasMore'),
more = document.getElementsByClassName('more');
for (var i = 0; i < hasMore.length; i++) {
var trigger = document.createElement('span');
trigger.id = 'trigger_' + i;
trigger.innerHTML = 'Show more';
trigger.className = 'trigger';
hasMore[i].appendChild(trigger);
more[i].className = 'more closed';
if (trigger.addEventListener) {
trigger.addEventListener('click', toggleDiv, false);
} else if (trigger.attachEvent) {
trigger.attachEvent('onclick', toggleDiv);
} else {
trigger.onclick = toggleDiv;
}
}
function toggleDiv(e) {
var target = e.target || window.event.srcElement,
id = target.id.substring(target.id.indexOf('_') + 1),
trigger = document.getElementById('trigger_' + id);
trigger.innerHTML = (trigger.innerHTML == 'Show less') ? 'Show more' : 'Show less';
more[id].className = (more[id].className == 'more open') ? 'more closed' : 'more open';
}
</script>