For many web developers, jQuery is the most awesome JavaScript library out there. For me, it has turned JavaScript from being a nightmare into a power tool. I love JavaScript now, where as before I truely hated it. Takes all the hassel out of most compatibility issues across browsers. I spend less time debuging it and more time writing it. While I'm on my goal to write more blog posts, I'm going to share a few jQuery tricks.
Today's trick is using a better toggle method than the standard toggle function. Don't get me wrong, it works great, but only if it is the only method for "toggling" the given element. Traditionally you pass is several functions, typically two. Function #1 that executes the first time that the event is fired, and a second function that fires the second time you click on it.
The problem arrises if you want to have more control over who, what, and where executes the toggles. Lets say you have a hidden div that is rather large, and a link above it that says "More Information." You click the link, it fires Function A and it slides down the div. Since it is so big, at the bottom you of the div you put a link that says "Close." The user clicks this link, and it hides the div again. The problem is the toggle function isn't away that another part of the website hid the div. So if the user clicks "More Information", it will still call Function #2, which will re-display the hiding annimation.
How do we solve this problem? Instead of using the toggle function, we write our own like so:
-
<h2>Better Toggle Method</h2>
-
<div id="new">
-
<a href="#" class="toggle">Toggle More</a>
-
<div class="more" style="display:none;">
-
<p>More Text Here</p>
-
</div>
-
</div>
-
<script type="text/javascript">
-
// Assign Events on Page Ready
-
$(document).ready(function(){
-
// Create Toggle Function
-
$('#new .toggle').click(function(){
-
// If display is none, that means it is hidden
-
if($('#new .more').css('display') == 'none')
-
{
-
$('#new .more').slideDown();
-
}
-
// Second Click
-
else
-
{
-
$('#new .more').slideUp();
-
}
-
});
-
-
// Create Close Function
-
$('#new .close').click(function(){
-
$('#new .more').slideUp();
-
});
-
});
-
</script>
If you want to see an example of the old method, as well as the new method in action, you can see them here. Hopefully this can help you out.
Related Posts
- Presentation: Real Life Scaling Here are my slides for the presentation that I gave at the Utah Open Source Conference on Friday. It was an awesome conference, and I am glad that I was able to be involved. Real Life Scaling: A Tale of Two Websites View more presentations from Justin Carmony. If you...
- “Nerfing” a PHP Object I was trying to think of something with PHP I could blog about that would be short and sweet. Then I thought of something that a good friend of my taught me: nerfing objects. The Problem Many times while working with PHP and bigger frameworks, you'll have classes that extend...
- Memcached: Simple, Effective, and Powerful Realizing once again I haven't written a blog post for quite some time, I thought I would just write a few smaller posts on things I've learned these last few months. Hopefully I can get back into the habit of blogging regularly again. This last month I finally broke down...
2 Responses
Comments RSS Feed.
Nice improvement to the toggle function.
hi, I have trouble with this nice function in my wordpress. can somebody help me how it could work? When I click on the link only a new page with the post is opened?! JQuery is enabled and other plugins with jquery work in my wordpress