<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div id="wrap">
 
<div class="txt-show">
ここにデフォルトで表示するテキストを入力します。 
</div>
 
<div class="txt-hide">
ここに「もっと見る」ボタンをクリックで表示するテキストを入力します。 
</div>
 
<button class="more"></button>

</div>
.txt-hide{
display: none;
}

button.more {
width: 120px;
margin: 20px auto;
display: block;
background-color: #666;
color: #fff;
padding:10px 15px;
border: none;
outline: 0;
transition: .5s;
-erbkit-transition: .5s;
}
 
button.more::after {
content: "もっと見る";
transition: .2s;
-erbkit-transition: .2s;
}

button.more.on-click::after{
content: "閉じる";
}

/* この記述は不要です */
#wrap {
width: 300px;
height: 100%;
font-size:13px;
}
$(function(){
	$(".more").on("click", function() {
		$(this).toggleClass("on-click");
		$(".txt-hide").slideToggle(1000);
	});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.