jQuery Tip: Better Toggle

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>
    <p><a href="#" class="close">Close</a></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

1. Empowering JavaScript Through jQuery Once I discovered jQuery, my life as a web developer changed. There are few libraries, tools, etc. that I can honestly say have completely changed the way I code. In all honesty, jQuery makes the difficult aspects of JavaScript and turns them into a strength. I recommend it over any...
2. ASP .NET 2.0, GridViews, HyperLinkField, and JavaScript I’ve found some interesting notes on ASP .NET’s GridView, it’s limitations and work arounds. For work I was looking for a way to execute JavaScript from clicking a link on a GridView Cell. An example would be to having a list of transactions and wanting to click a link to...
3. PHP Singletons, Sub-Classing, and HAS-A Relationships I’ve been very busy these last fews weeks and have neglected making any posts. While there are a variety of subjects I’d love to post about, they’ll most likely have to wait until the next year. However, I thought I might be able to throw up a quick example of...
4. CSS – ID vs Class After hacking apart & cleaning up code for the better part of the day, I’ve decided to set the record straight about CSS, IDs, and Classes. The question is “when should I use an ID, and when should I use a class?” Is it that big of a deal? The...
5. Carrington Theme & Hashcash Plug-in Solution I’ve been a huge Hashcash fan since using WordPress. In a nutshell, it requires a browser to process some javascript to generate a number to verify that the browser in-fact read the page. This helps prevent bots from submitting spam comments. The idea is that if a spam bot was...