jQuery: Basic Show, Hide and Toggle
As you may have guessed, I’m not properly trained in the coding languages found throughout the web. Most, if not all of my knowledge has come from reading blogs, books and asking on Twitter. With this in mind, I’ve decided to post a few blog entries regarding the basics of using the jQuery library. Today, I’m going to look at two simpler functions to learn the basic syntax and use of jQuery. These are to show() hide() and toggle().
Show and Hide are pretty self-explanatory; when used they either reveal or remove an element from displaying. Toggle, as I understand it, works a bit differently by revealing those that are hidden and hiding those that are revealed. To the code.
$(document).ready(function() {
//we'll put the new code here
});
For this example, we’ll hide a sentence a bit further down the page. To select a given element, one must use the jQuery syntax of
$('css-selector')
Given that this sentence will be given it’s own class, we’ll refer to it as $(‘div.showhidetoggle’). To attach our selected element to the above .ready(function(){}); we must adapt the jQuery syntax to this:
$(document).ready(function() {
$('div.showhidetoggle').hide();
});
Unfortunately, the doc.ready tells this command to run on load, but given that I like all sentences to show up, we’ll move it to a button instead so that you can toggle it. Go on and check out the:
It’s a simple concept but there’s so many applications for creating truly ‘eye-candy’ experiences. Just check out my portfolio to see the toggle button in action.
