artsen
jQuery Fun!
So I was playing around with jQuery this weekend and wanted to do something fairly simple. A good hour or so later I was finally able to walk away from the computer comfortably with a completed 4 button navigation that upon click swaps the contents of the div. Each div has a close button so you can go back to the normal state whenever you want.
The HTML:
<div id=”wrapper”>
<div id=”icons”>
<a href=”#testa”><div id=”test1″>a</div></a>
<a href=”#testb”><div id=”test2″>b</div></a>
<a href=”#testc”><div id=”test3″>c</div></a>
<a href=”#testd”><div id=”test4″>d</div></a>
</div> <div id=”content”>
<div id=”testa”><p><a class=”close” href=”#”>close</a>
<br />content a</p></div>
<div id=”testb”><p><a class=”close” href=”#”>close</a>
<br />content b</p></div>
<div id=”testc”><p><a class=”close” href=”#”>close</a>
<br />content c</p></div>
<div id=”testd”><p><a class=”close” href=”#”>close</a>
<br />content d</p></div>
</div>
</div>
Pretty simple. A main wrapper to hold the whole thing, an icon wrapper to hold the anchored divs and a content wrapper holding the content divs. One part to pay close attention to is the a’s href value in the icon wrapper, for each navigation button the anchor tag is linked to the id name of the class related to that body content.
(EX. <a href=”#test1″>Link 1</a> and <div id=”test1″>content test 1</div>) In the example, you will see the links href is the same value as the div’s id. Another part to note would be the <a class=”close” href=”#”>close</a> tag, we will talk more about this later. Ok cool now on to..
The Css:
I decided not to post all of the css because I used quite a bit for styling (sizes, colors, etc) all of those are not important and will likely change depending on what you want to use it for. The only really important part is…#content { position: relative; }
#content div { position: absolute; top: 0; left: 0; }
What this does is make the content id relative so that we can absolutely position the inner divs on top of each other. These divs that we are stacking are the ones that we will be switching between later, after we finish writing our jQuery.
The jQuery Breakdown:
Finally, the fun stuff. Now, before we jump right in let’s think through exactly what we want this to accomplish. First, we want the divs to all be invisible when we load the page:$(function () {
$(‘#content div’).hide();
});
Then we want switch the div when the icons anchor tag is clicked. We will do this by creating a variable that will hold the string value of the anchor tags href value, then fading that div into view.
$(function () {
$(‘#content div’).hide();$(‘#icons a’).click(function () {
var contentToLoad = $(this).attr(‘href’);
$(contentToLoad).fadeIn();
return false;
});
});
Cool, but we aren’t done yet, because they don’t go away when you click on another. So we will need to create a way to know which anchor tag is clicked, let’s fix that by adding the class to the anchor tag called “active”, this class will have no properties in css (unless you want it to).
Let’s start this by checking to see if the class active has been added to the anchor tag that was just clicked and if so end the function, this is to check if that content is already visible and preventing it from trying to fade it in again.
$(function () {
$(‘#content div’).hide();
$(‘#icons a’).click(function () {
if ($(this).hasClass(‘active’) == true) {
return false;
} else {
var contentToLoad = $(this).attr(‘href’);
$(contentToLoad).fadeIn();
return false;
});
});
Close but not quite yet, we still need to remove the active class from the previous active anchor tag and add that class to the new active anchor tag. After that, we will have to remove the old content, then our new content can fade in with no problem.
$(function () {
$(‘#content div’).hide();
$(‘#icons a’).click(function () {
if ($(this).hasClass(‘active’) == true) {
return false;
} else {
$(‘a.active’).removeClass(‘active’);
$(this).addClass(‘active’);
$(‘#content div’).fadeOut();
var contentToLoad = $(this).attr(‘href’);
$(contentToLoad).fadeIn();
return false;
});
});
Awesome our tabs work just fine. Now, remember that bit of code from earlier for the close button? <a class=”close” href=”#”>close</a> Let’s get that working. Let’s start it off by creating a new function that will work when the anchor tag with class close is clicked, when it is, it will remove the active class and then fade the content out.
The FINAL jQuery:
$(function () {
$(‘#content div’).hide();
$(‘#icons a’).click(function () {
if ($(this).hasClass(‘active’) == true) {
return false;
} else {
$(‘a.active’).removeClass(‘active’);
$(this).addClass(‘active’);
$(‘#content div’).fadeOut();
var contentToLoad = $(this).attr(‘href’);
$(contentToLoad).fadeIn();
return false;
}
});
$(‘#content a.close’).click(function () {
$(‘#content div’).fadeOut();
$(‘a.active’).removeClass(‘active’);
});
});
There ya go, swapping divs with icons and a working close button. This ended up being a little more difficult than originally thought, but a fun exercise none the less.
The JSFiddle: JSFiddle