Boostrap is the most widely used front-end framework. It comes with jQuery, the most famous javascript library. Let’s achieve something super simple using both.
If you’re using Boostrap 3 and jQuery, toggling the visibility of an element on click event is dead simple. We rely on two Boostrap classes: .show and .hide (read more).
Copy and paste the following in your javascript file:
$(‘.toggle’).click(function (event) {
event.preventDefault();
var target = $(this).attr(‘href’);
$(target).toggleClass(‘hidden show’);
});
Example markup:
<a href=”#credits” class=”toggle btn btn-primary”>Click on me to reveal the hidden treasure</a>
<div id=”credits” class=”well hidden”>
<h1>I’m the hidden treasure :)</h1>
<p>Whilst most Japanese people are aware of English swear words and want to know more, they’re not quite sure on how they’re used and the role they play.</p>
<div class=”embed-responsive embed-responsive-16by9″>
<iframe width=”853″ height=”480″ src=”https://web.archive.org/web/20150919080046if_///www.youtube.com/embed/T9-OWfS2Vy4″ frameborder=”0″ allowfullscreen=””></iframe>
</div> </div>
Whilst most Japanese people are aware of English swear words and want to know more, they're not quite sure on how they're used and the role they play.
The code is pretty self explanatory, don’t you think? Anyway, feel free to leave a comment if you’re struggling with this or if you have suggestions.