シンプルなタブ

久しぶりの投稿になりますね。

今回はシンプルなタブを作成してみました。タブの入れ子もできるようになっています。
jQuery UIのTabsを利用すればよいのですが、デザインの調整などを考えると自前のほうが楽だったりするので。

今回はCodePenを利用してみました。

htmlの構成としては.tabs内に.tabでタブを記述し、.panels内に.panelでコンテンツを記述します。タブに設定されたdata-target属性で指定されたコンテンツを表示します。
cssは、.panelに設定しているdisplay属性のみが必須となり、あとは必要に応じてデザインを変更できます。

CodePenの仕様でdata-target属性を利用していますが、href属性を利用するともっとシンプルにできますね。
jsのtoggleのコードがモヤモヤするのですが、なにかいい書き方ありませんかね。。。