i/infoアイコン：これをクリックするとテキストが表示されます。これはCSSで行うことができますか？

Question

例：https://www.hatched.co.uk/let/pricing

iアイコンをクリックすると、テキストが表示されます。私はまったく同じことを達成したい。これはCSSでできますか？もしそうなら、どうですか？そうでなければ、私はJavaScriptを推測しています。もしそうなら、どうですか？

Answer 1

クリックだけでなく、CSSを使用して、ホバー上でテキストを切り替えることができます。

そのため、jQueryを使用することを強くお勧めします。 $ .click関数を使用してハンドラを設定し、$ .toggleを使用してテキストを表示/非表示にすることができます。

jQueryのも、あなたはラベルの内容を使用し、その後、あなたはfor属性を介して入力フィールドにlabelタグを結合する「のチェックボックスハック」を使用してこれを行うことができます関数にJquery Sliding

Answer 2

をスライドに組み込まれています（あなたのアイコン）を使用してチェックボックスを操作し、:checked擬似クラスと兄弟セレクタを使用して、他の要素（隠しテキスト）の表示を切り替えます。

.text,input { 
 
    display: none; 
 
} 
 
input:checked ~ .text { 
 
    display: block; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div> 
 
    <input id="twitter" type="checkbox"> 
 
    <label for="twitter"><i class="fa-twitter fa"></i></label> 
 
    <div class="text">twitter</div> 
 
</div> 
 
<div> 
 
    <input id="facebook" type="checkbox"> 
 
    <label for="facebook"><i class="fa-facebook fa"></i></label> 
 
    <div class="text">facebook</div> 
 
</div>

、または同じ技術を使用して、あなたがクリックしたリンク上のクラスを切り替えて同じことを行うためにはJavaScriptを使用することができます。ここで

var icons = document.getElementsByTagName('i'); 
 
for (var i = 0; i < icons.length; i++) { 
 
    icons[i].addEventListener('click',function() { 
 
    this.classList.toggle('active'); 
 
    }); 
 
}

.text,input { 
 
    display: none; 
 
} 
 
.active + .text { 
 
    display: block; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div> 
 
    <i class="fa-twitter fa"></i> 
 
    <div class="text">twitter</div> 
 
</div> 
 
<div> 
 
    <i class="fa-facebook fa"></i> 
 
    <div class="text">facebook</div> 
 
</div>