マウスをのっけて文字を切替

あいうえお 


<span id="test1" style="display: inline; cursor: hand;" onclick="test2.style.display='inline', this.style.display='none'">あいうえお</span>
<span id="test2" style="display: none; cursor: hand;" onclick="test1.style.display='inline', this.style.display='none'">かきくけこ</span>



＜ＨＴＭＬ＞
<aside class="side_menu">
	<input id="Panel34" type="checkbox">
	<label for="Panel34">ブログ記事　</label>
	<div class="cp_container">
		<ul><?php dynamic_sidebar(); ?></ul>
	</div>
</aside>



＜ＣＳＳ＞
/*パネル表示*/
.side_menu *, .side_menu *:before, .side_menu *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.side_menu {
	width: 100%;
}
.side_menu label {
	font-weight: bold;
	position: relative;
	display: block;
	width: 100%;
	padding: 0.3em 1em;
	cursor: pointer;
	transition: all 0.3s;
	text-align: left;
	color: #FFFFFF;
	background-color:000000;
}
.side_menu label:before{
	font-family: "Font Awesome 5 Free";
	content: ' \f039';
	padding-right:5px;
}
.side_menu label:hover {
	transition: all 0.3s;
	color: #ffffff;
	background: #555555;
}
.side_menu label::after {
	font-family: "Font Awesome 5 Free";
	content: ' \f107';
}
.side_menu label:hover::after {
	color: #ffffff;
}
.side_menu input:checked ~ label::after {
	font-family: "Font Awesome 5 Free";
	content: ' \f106';
}
.side_menu input:checked ~ label:hover::after {
	color: #ffffff;
}
.side_menu input {
	display: none;
}
.side_menu .cp_container {
	position: relative;
	z-index: 10;
	overflow: hidden;
	height: 0;
	margin-top: -1px;
	transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
	background: rgba(255, 255, 255, 0.5);
}
.side_menu input:checked ~ div {
	transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
}
/* 続きを読むを押すと表示されるテキストの高さ */
.side_menu input:checked ~ div.cp_container {
	height: auto;
}
/* 中身のULの体裁 */
.side_menu ul{margin-left:10px; list-style:none;}
.side_menu ul li li{list-style:disc;}
.side_menu h2.widgettitle{margin-top:20px;}

簡単設定：https://copypet.jp/963/


＜ＨＴＭＬ＞
<div class="cp_actab">
<input id="cp_tabfour021" type="checkbox" name="tabs">
<div class="cp_plus">+</div>
	<label for="cp_tabfour021">スマートロッカーとはどの様なロッカーですか?</label>
	<div class="cp_actab-content">一般的なダイアル式のロッカーとは違い、電子制御式ロッカーでアプリで操作します。24時間365日利用出来ます。</div>
</div>



＜ＣＳＳ＞
/*質問*/
.cp_qa *, .cp_qa *:after, .cp_qa *:before {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_qa {
	overflow-x: hidden;
	margin: 0 auto;
	color: #333333;
}
.cp_qa .cp_actab {
	padding: 20px 0;
	/*border-bottom: 1px dotted #cccccc;*/
}
.cp_qa label {
	font-size: 1.2em;
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 15px 10px 15px 48px;
	cursor: pointer;
	background-color:#d2eaff;
}
.cp_qa .cp_actab-content {
	font-size: 1em;
	position: relative;
	overflow: hidden;
	height: 0;
	margin: 0 40px;
	padding: 0 14px;
	-webkit-transition: 0.4s ease;
	        transition: 0.4s ease;
	opacity: 0;
}
.cp_qa .cp_actab input[type=checkbox]:checked ~ .cp_actab-content {
	height: auto;
	padding: 14px;
	opacity: 1;
}
.cp_qa .cp_plus {
	font-size: 2.4em;
	line-height: 100%;
	position: absolute;
	z-index: 5;
	margin: 3px 0 0 10px;
	-webkit-transition: 0.2s ease;
	        transition: 0.2s ease;
}
.cp_qa .cp_actab input[type=checkbox]:checked ~ .cp_plus {
	-webkit-transform: rotate(45deg);
	        transform: rotate(45deg);
}
.cp_qa .cp_actab input[type=checkbox] {
  display: none;
}
https://copypet.jp/502/ 

<div class="hidden_box">
<label for="label2">この体験談をもっと読む <i class="fa fa-caret-down" aria-hidden="true"></i></label>
<input type="checkbox" id="label2"/>
<div class="hidden_show">
	<!--非表示ここから-->

	<!--ここまで-->
</div>
</div>




/*--------------------------------------------------------
体験をもっと読む
--------------------------------------------------------*/
/*全体*/
.hidden_box {
    margin: 2em 0;/*前後の余白*/
    padding: 0;
}

/*ボタン装飾*/
.hidden_box label {
    background-image:url(../images/br-taiken2.gif);
	background-repeat:no-repeat;
	padding:10px 10px 20px 10px;
	font-size:120%;
	font-weight:bold;
    cursor :pointer;
	margin-left:auto!important;
	margin-right:auto!important;
	text-align:center;
	display:block;
	width:80%;
}

/*ボタンホバー時*/
.hidden_box label:hover {
    
}

/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.2s;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}