インターコード現実逃避担当の下っ端です。

大手ブログでも昨今はjQueryが（色々制限はありますが）使えるようになってきたようで、
色々な機能を実装できるようになりましたね。

今回はjQueryが全く使えなかったブログ時代を思い出し、
私の今の知識を総動員して無理やりCSSでjQueryっぽい機能を実装させる実験的なことをしようと思います。

まずHTMLを制作。書いたコードはこんな感じです。

<div style="text-align: center;">
<em style="font-size: 160%; font-style: normal; margin-bottom: 10px;">インターコードにお仕事を頼みたいですか？</em>
<div id="radio_block" class="clearfix">
<input type="radio" name="rad" checked /><div class="box">いつでもご連絡おまちしています！<div id="contact_block" class="clearfix" style="margin-top: 10px;"><dl><dt>お電話でも！</dt><dd><i class="material-icons"></i>06-6357-1517</dd></dl><dl><dt>チャットワークでも！</dt><dd><a href="https://www.chatwork.com/intercord" target="_blank"><img src="http://intercord.jp/control-panel/wp-content/uploads/2016/04/ChatWork_Hz-300x62.png" alt="チャットワーク" width="300" height="62" /></a></dd></dl></div></div><input type="radio" name="rad" /><div class="box">残念です。ぜひ次回はご検討ください！<br><br>ホームページ制作以外にも<br>
<span style="font-size: 108%;">「ホームページ運用・保守管理」「システム開発」「SEO対策」<br>「CI・VI・印刷物のデザイン」「パッケージデザイン」<br>「出張/電話 パソコンサポート」「出張パソコン教室/レッスン」</span>など<br>いろいろやってます！<br><br>詳しくは<a href="/service/hp/" target="_blank">業務内容ページ</a>から各事業ページをご覧ください。</div>
</div></div>

それに合わせてCSSを作るとこんな感じになります。

#radio_block .box{
	border: 1px solid #333;padding: 15px;
	text-align: center;
	position: relative;
	display: none;
}#radio_block .box:last-child{
	border-color: red;
}
#radio_block .box:before,
#radio_block .box:after{
	display: block;
	top: -29px;
	height: 30px;
	width: 50%;
	line-height: 30px;
	text-align: center;
	position:  absolute;
    border-radius:5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
}
#radio_block .box:before,
#radio_block .box:last-child:after{
	color: #fff;
	content: "はい";
	left: -1px;
	background:#a9bd04;
}
#radio_block .box:after,
#radio_block .box:last-child:before{
	content: "いいえ";
	color: #333;
	background:#eee;
	right: -1px;
}
#radio_block .box:last-child:before{
	content: "いいえ";
	left:inherit;
	right: -1px;
	color: #fff;
	background:#a9bd04;
}
#radio_block .box:last-child:after{
	content: "はい";
	right:inherit;
	left: -1px;
	color: #333;
	background:#eee;
	z-index: -1;
}
#radio_block {
	position: relative;
	padding-top: 45px;
}
#radio_block input{
	position: absolute;
	top: 0;
	display: block;
	width: 50%;
	height: 30px;
	border: 1px solid #333;
	opacity: 0;
}
#radio_block .box + input{
	right: 0;
}#radio_block input:checked + .box{
	display: block;
}

動いてるのを見たいという方はこちらからどうぞ！
CSSだけでタブ切り替え機能を作ってみた【jQuery不要】

今回の仕様を簡単に説明すると、
inputのラジオボタンがcheckされるとその直ぐ後のdiv.boxが表示される
といった感じです。
意外と簡単ですよね。
ただ途中で改行タグが入ったりするとうまく動作しないことがあるので、その辺りだけが注意点です。