Use the code below to have expandable/collapsable text sections within a publish page

NB: You will notice 3 similar functions - an individual function must be called for each expanding/collapsing section of text. The example below uses the terms ‘Read more...’ and ‘Hide...’ for show/collapse but these can be edited as you wish.

<script language=”javascript” type=”text/javascript”>

function toggle() {

var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
  		ele.style.display = "none";
	text.innerHTML = 'Read More ';
	}
else {
	ele.style.display = "block";
	text.innerHTML = 'Hide ';
}

} function toggle1() {

var ele = document.getElementById("toggleText1");
var text = document.getElementById("displayText1");
if(ele.style.display == "block") {
  		ele.style.display = "none";
	text.innerHTML = 'Read More ';
	}
else {
	ele.style.display = "block";
	text.innerHTML = 'Hide ';
}

}

function toggle2() {

var ele = document.getElementById("toggleText2");
var text = document.getElementById("displayText2");
if(ele.style.display == "block") {
  		ele.style.display = "none";
	text.innerHTML = 'Read More ';
	}
else {
	ele.style.display = "block";
	text.innerHTML = 'Hide ';
}

}

</script>

<p><style type=”text/css”>

</style></p>

<p><strong>Lorem Ipsum</strong></p>

<div style=”display: none;” id=”toggleText”> Lorem ipsum dolor sit amet, hendrerit vel anim pede, massa tincidunt, libero platea potenti aenean dolore nulla elit, enim eu dolor, venenatis odio posuere cras. Ante dui. Auctor eget tortor sapien ut, sed sollicitudin sed rutrum fames tincidunt, volutpat dignissimos sagittis per sem, odio dui libero nisl. In vestibulum, dictum vestibulum. Cum proin egestas, class vitae metus vestibulum. In fermentum erat nunc vitae, lectus aliquam vel nulla, vel proin tempus dictum enim et quam, lacinia non facilisis ullamcorper fringilla, ac curae hymenaeos in tempor non id. Amet velit integer ridiculus. Amet molestie luctus ac vitae accumsan.</div>

<p><a id=”displayText” href=”javascript:toggle();”><strong>Read More</strong></a><strong>... </strong></p>

<p><strong>Lorem Ipsum 1</strong></p> <div style=”display: none;” id=”toggleText1”>Lorem ipsum dolor sit amet, hendrerit vel anim pede, massa tincidunt, libero platea potenti aenean dolore nulla elit, enim eu dolor, venenatis odio posuere cras. Ante dui. Auctor eget tortor sapien ut, sed sollicitudin sed rutrum fames tincidunt, volutpat dignissimos sagittis per sem, odio dui libero nisl. In vestibulum, dictum vestibulum. Cum proin egestas, class vitae metus vestibulum. In fermentum erat nunc vitae, lectus aliquam vel nulla, vel proin tempus dictum enim et quam, lacinia non facilisis ullamcorper fringilla, ac curae hymenaeos in tempor non id. Amet velit integer ridiculus. Amet molestie luctus ac vitae accumsan.</div>

<p><a id=”displayText1” href=”javascript:toggle1();”><strong>Read More</strong></a><strong>... </strong></p>

<p><strong>Lorem Ipsum 2</strong></p>

<div style=”display: none;” id=”toggleText2”>Lorem ipsum dolor sit amet, hendrerit vel anim pede, massa tincidunt, libero platea potenti aenean dolore nulla elit, enim eu dolor, venenatis odio posuere cras. Ante dui. Auctor eget tortor sapien ut, sed sollicitudin sed rutrum fames tincidunt, volutpat dignissimos sagittis per sem, odio dui libero nisl. In vestibulum, dictum vestibulum. Cum proin egestas, class vitae metus vestibulum. In fermentum erat nunc vitae, lectus aliquam vel nulla, vel proin tempus dictum enim et quam, lacinia non facilisis ullamcorper fringilla, ac curae hymenaeos in tempor non id. Amet velit integer ridiculus. Amet molestie luctus ac vitae accumsan.</div>

<p><a id=”displayText2” href=”javascript:toggle2();”><strong>Read More</strong></a><strong>... </strong></p>