Expand/hide text with native JavaScript and CSS:

Try for yourself

Headline here:
Here is the first teaser part of the text. Here is the remaining of the text. It is visible in the HTML code so search engines can read and index it. But the user can only see the text if he/she clicks the expand link.

Expand

JavaScript


<script type="application/javascript">

function openCloseModal(name) {

	let modal = document.getElementById(name);
	let link = document.getElementById(name + '-button');

	if (modal.getAttribute('class') == 'txtHdn') {

		modal.setAttribute('class', 'txtVsb');
		link.innerText = 'Hide';

	} else if (modal.getAttribute('class') == 'txtVsb') {

		modal.setAttribute('class', 'txtHdn');
		link.innerText = 'Expand';
	}
}

</script>

Copy code here:

CSS:


<style>

	.simLink:hover {
		text-decoration: underline;
		cursor: pointer;
	}

	.txtHdn {
		display: none;
		overflow: hidden;
	}

	.txtVsb {
		display: inline;
		overflow: visible;
	}


</style>

Copy code here:

HTML:


<div class="txtBlk">
	<strong>Headline here:</strong><br/>
	Here is the first teaser part of the text. 
	<span id="someKindOfId" class="txtHdn">
		Here is the remaining of the text. It is visible in the HTML code so search engines can read and index it. But the user can only see the text if he/she clicks the expand link.
	</span>
</div>
					
<span onclick="openCloseModal('someKindOfId')" class="text-info simLink" id="someKindOfId-button">Expand</span>

Copy code here: