Experienced developers can probably skip this post.
However, if you’re like me: currently responsible for development and maintenance of a church website having no actual training (I was a music major in college), this kind of stuff might be useful.
As a web admin, I’m constantly being asked by my bosses to add stuff to our website. Sometimes I have enough influence to persuade them why we shouldn’t. Occasionally my supervisor is able to say “roll it up and smoke it”.
Sometimes there are perfectly legit things that you need to add to your carefully crafted web design.
For example: I recently got asked to add audio podcasts to our church’s media page. Sounds like a great idea, but my designer and bestie Jeremy had worked very hard to keep our website clean and adding a large list of items with media players seemed like it might clutter things up.
The answer: Adding a show/hide function to our podcasts list.
I’m guessing there might be things on your website that you’d like to be selectively displayed; contact forms, exhaustive lists, scripture references for your statement of faith, all of which can be shown or hidden using the following code.
I decided to use jQuery because most likely you will be selecting classes which in Javascript itself requires a utility code. jQuery has built in class slectors and quite frankly, it’s already loaded into half the websites I see these days (including the best coded WordPress theme ever)
Here’s how to show/hide an element.
First, find the section of your site you would like to show/hide and determine its parent (the element containing what you want to show/hide)
In this example I have a list of “podcasts” inside a div tag with the class “.podcasts”.
[cc lang=”html”]
Sermon Audio Podcasts
- A Podcast with media
- Another Podcast with media
[/cc]
Next, hide the element (in this case the list) inside its tag using “style=”display: none;”. This, of course, assumes that you want your element to load already hidden on your page.
After that, either in the header of your document or in a linked .js file, use jQuery selectors to get the parent class of your element (the h2 title in this case) and change the cursor to a pointer (telling your user the parent element is “clickable”).
[cc lang=”javascript”]
$(“.podcasts > h2”).hover(function() {
$(this).css(‘cursor’, ‘pointer’);
});
[/cc]
Finally, to the same element, add a .click event that includes a conditional statement that looks to see if your element is hidden (it should be if you completed step two) and .show method to the hidden elements and otherwise adds the .hide method. It sounds more complicated than it is.
[cc lang=”javascript”]
.click(function() {
if (!$(‘.podcasts > ul’).is(‘:visible’)) {
$(‘.podcasts > ul’).show();
} else {
$(‘.podcasts ul’).hide();
}
});
[/cc]
And that’s it. The completed code could look something like this.
[cc lang=”javascript”]
$(document).ready(function() {
$(“.podcasts > h2”).hover(function() {
$(this).css(‘cursor’, ‘pointer’);
}).click(function() {
if (!$(‘.podcasts > ul’).is(‘:visible’)) {
$(‘.podcasts > ul’).show();
} else {
$(‘.podcasts ul’).hide();
}
});
});
[/cc]
Check out the following JSFiddle link to play around with it.
If you’re passionate about separating your logic from your design, you can accomplish the same thing by adding and removing classes to your elements in the same classes. In this example all of the “show” and “hide” methods are done using CSS. Technically it’s more work and, honestly, who’s looking to write more code?
[cc lang=”javascript”]
$(document).ready(function()
//On Click Event
$(“.podcasts > h2”).click(function() {
if ($(‘.podcasts’).hasClass(‘podcasts-hide’)) { $(‘.podcasts’).removeClass(“podcasts-hide”).addClass(“podcasts-show”);
}else {
$(‘.podcasts’).removeClass(“podcasts-show”).addClass(“podcasts-hide”);
}
});
});
[/cc]
[cc lang=”css”]
.podcasts {background-color: #E5E5E5; font-size: 18px; margin: 10px 10px 30px 10px; padding: 5px; color: #6D6C6C;}
.podcasts h2 {font-style: bold;font-size: 22px;}
.podcasts-show h2, .podcasts-hide h2 {cursor: pointer; padding-left: 32px; background: url(http://files.droplr.com/files/17490304/zrvH.minus.png) no-repeat left center;}
.podcasts-show h2:hover, .podcasts-hide h2:hover {color: #999;}
.podcasts-hide ul{display: none;}
.podcasts-hide h2 {background-image: url(http://files.droplr.com/files/17490304/pRdP.plus.png)}
[/cc]
Show/Hide Using CSS and jQuery on JSFiddle
Josiah says
Great run down! Here’s a link I came across about improving performance by using jQuery to change the css directly – rather than .show() & .hide():
(for what it’s worth)
http://www.learningjquery.com/2010/05/now-you-see-me-showhide-performance#more-1114
Brian Notess says
Wow, that’s a significant difference. 29ms for .show .hide and 11 for .addClass, .removeClass.
Definitely worth taking into account (and avoiding .toggle).