More / Less script not working on "Less"

JavaScript
1

Good Morning,

My script below show the More and will expand, but does not change to less and will not collapse. Any thoughts on the problem? Thanks!


<script language="javascript" type="text/javascript">
function toggle(showHideDiv, switchTextDiv) {
var ele = document.getElementById(showHideDiv);
var text = document.getElementById(switchTextDiv);
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
function toggle2(showHideDiv, switchTextDiv) {
var ele = document.getElementById(showHideDiv);
var text = document.getElementById(switchTextDiv);
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "restore";
}
else {
ele.style.display = "block";
text.innerHTML = "show less";
}
}
function toggle3(contentDiv, controlDiv) {
if (contentDiv.constructor == Array) {
for(i=0; i < contentDiv.length; i++) {
toggle2(contentDiv[i], controlDiv[i]);
}
}
else {
toggle2(contentDiv, controlDiv);
}
}
var counter = 0;
var numBoxes = 3;
function toggle4(showHideDiv) {
var ele = document.getElementById(showHideDiv + counter);
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
if(counter == numBoxes) {
document.getElementById("toggleButton").style.display = "none";
}
}
function showonlyone(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for(var x=0; x<newboxes.length; x++) {
name = newboxes[x].getAttribute("name");
if (name == 'newboxes') {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = 'block';
}
else {
newboxes[x].style.display = 'none';
}
}
}
}
</script>
2

Here’s a jQuery example:

<div class="article">
	<p><a href="#">Expand</a></p>
	<p>......................</p>
</div>

.article p + p { display: none; }

$(".article:first").each(function() {
	var $controller = $(this).find("p:first");
	var $target = $(this).find("p:nth-child(2)");
	
	$controller.find("a").click(function(i) {
		var $this = $(this);
		
		if ($target.is(":hidden")) {
			$target.show();
			$this.text("Collapse"); 
		}
		else { 
			$target.hide();
			$this.text("Expand"); 
		}
		
		return false;
	});
});
3

If I needed to use this script, what would I change? I can’t seem to locate the problem.