コニファ・ロゴ

csstest: CSS3 :target疑似クラスを使い、CSSだけで要素の表示非表示のトグル風切り替え

サンプル(最下段)は、テキストが短縮されていて、下側の「続きを表示」をクリックすると、隠されたテキストを表示、という良くあるパターンです。これをCSS3の :target疑似クラスを主に使って、CSSだけで作成してみました。

サンプルのhtmlソース

<div id="sample01">
    [ダミーテキスト1]ポイントカードを発行し、商品の購入者に対し、次回以降の買い物の際に支払いの
    一部に充当できるポイントを提供する場合は、景品ではなく値引。
</div>
<a href="#sample01">続きを表示</a>
<a href="#sample02">続きを隠す</a>
<span id="sample02"> </span>

 

サンプルのCSSソース

#sample01  {
	width:800px;
	margin:0 auto;
	padding:8px 10px 10px; 
	text-align:left;
	border:1px solid #bbf;
	color:#666;
	}
#sample01 ~ a  {
	display:none;
	}
#sample01 + a  {
	display:inline;
	}
#sample01:target::after  {
	content:"取引通念上妥当と認められる基準に従い、取引の相手方に対し、支払うべき対価を減額する
	こと又は割り戻すことは、値引と認められる経済上の利益に該当し、景品表示法上の景品類には該当
	しません。";
	color:green;
	}
#sample01:target ~ a  {
	display:inline;
	}
#sample01:target + a  {
	color:#aaa;
	pointer-events: none;
	}

 

「id="sample01"」のdiv要素に弟要素であるa要素を2つ続けています。CSSの9行目から14行目で、隣接セレクタと間接セレクタを使い、2つの弟a要素を非表示に、続いて最初のa要素のみを表示させています。

最初のa要素である「続きを表示」をクリックすると、ページ内リンクで、「id="sample01"」のdiv要素に飛びます。すると、:target疑似クラスと:after擬似要素により、続きのテキストを表示(確認用に緑色文字にしています)します。15行目から20行目。

同時に、21行目以降で、:target疑似クラスと隣接セレクタと間接セレクタを使い、9行目からの2つのa要素のスタイルを逆にしています。このとき、2つのa要素を表示させ、最初のa要素のみを非表示にさせようとしましたが、なぜか引きずられて2つとも非表示になってしまいます。そこで、最初のa要素のみを薄消し状態の色で表示したままにしています。

続きのテキストを表示した状態で、「続きを隠す」をクリックすると、「id="sample02"」へ移動するため、:target疑似クラスが聴かなくなり、スタイルが元に戻ります。

 

サンプル

[ダミーテキスト1]ポイントカードを発行し、商品の購入者に対し、次回以降の買い物の際に支払いの一部に充当できるポイントを提供する場合は、景品ではなく値引。
続きを表示 続きを隠す  

 

 

 

戻るボタン