JSFiddle - React, Tailwind, and code Playground

by cgtrman

HTML

<body>
	<main id="jdom">
		<div>&nbsp;</div>
		<div><p>Click the link below to expand this message</p></div>
    <div class="hide"><p>Hello!</p></div>
		<a href="javasctipt:void();">Show more</a>			
		
		<div>&nbsp;</div>
		<div><p>Click the link below to expand this message</p></div>
    <div class="hide"><p>BOOP</p></div>
		<a href="javasctipt:void();">Show more</a>
			
    <div>&nbsp;</div>
		<div><p>Click the link below to expance this message</p></div>
		<div class="hide"> 
			<p>Things to do when you're bored</p>
			<ul>
				<li>Go for a walk</li> 
				<li>Try your hand at painting.</li>
				<li>Listen to music</li>
			</ul>
		</div>
		<a href="javasctipt:void();">Show more</a>			
	</main>
</body>

CSS

* {
	margin: 0;
	padding: 0;
}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 87.5%;
	width: 650px;
	margin: 0 auto;
	padding: 15px 25px;	
	*/ border: 3px solid blue; */
}
h1 { 
	font-size: 150%;
}
h2 {
	font-size: 120%;
	padding: .25em 0 .25em 25px;
}
div.hide {
	display: none;
}
ul {
	padding-left: 45px;
}
li {
	padding-bottom: .4em;
}
p, a {
	padding-bottom: .4em;
	padding-left: 25px;
}
a, a:focus, a:hover {
	color: blue;
}

JavaScript

$(document).ready(function(){

  $('a').on( "click", function(){
    $(this).prev("div").toggleClass('hide');
    if($(this).text() == 'Show more')
    {
       $(this).text('Show Less');
    }
    else
    {
       $(this).text('Show more');
    }
  });
});