i / info icon: click it to reveal text / can this be done with css, and how?

Question

See example: https://www.hatched.co.uk/let/pricing

Click the i icon and it expands to reveal text. I want to achieve the exact same thing. Can this be done with css? If so, how? If not, I am guessing JavaScript. If so, how?

Answer 1

You can only toggle text on hover using CSS, not on click.

For that, I would highly advise that you use jQuery . You could then use the $.click function to set a handler, and use $.toggle to show/hide the text.

Jquery also has a built in sliding function Jquery Sliding

Answer 2

You can do this using the "checkbox hack" where you bind a label tag to an input field via the for attribute, then use the contents of the label (your icon) to manipulate the checkbox, and use the :checked pseudo class and a sibling selector to toggle the display of some other element (your hidden text).

 .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> 

Or using the same technique, you could use javascript to toggle a class on the link you clicked on and do the same thing.

 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>