Simple animated toggle with jQuery Posted in: Tutorials, Webdesign, jQuery Comments (2)

We all know about jQuery. Powerful and very popular JavaScript framework with many useful and great plugins. But the variety of plugins has created one bad behavior among webdevelopers. When they need to create some effect, or function, they are often looking for solution in plugins, instead of trying to do that on their own. This simple search for simplified coding is creating mess in code, and forcing you to compromises in your layout, styling, or even website design. In this tutorial, we will create few lines of code, that can replace very popular plugin called Animated Collapsible DIV, or most of the plugins creating tabs.

Demo presentation

474x

Tutorial files

24.93KB 247x

First, we need to decide, how the animation will be triggered, and by what object. I’ve choose the solution of creating your own attributes (yeah, now you can’t masturbate over 100% W3C validation result you hypocritical bastard ;)), so the triggering object can be almost any tag. Animation will start after click on any object with my custom attribute “toggle”, and animated will be object with id equals toggle value. The whole HTML will look like this:

<a href="#" toggle="myObject">Click me</a>

<div id="myObject">
content ...
</div>

Easy, huh? And as I already wrote, you can add this custom attribute to any object, like this:

<a href="#" toggle="myObject">Click me</a>
<div toggle="myObject">Click me</div>
<span toggle="myObject">Click me</span>
<h1 toggle="myObject">Click me</h1>

<div id="myObject">
content ...
</div>

All objects with attribute “toggle”, which is addressing to triggered object ID, are live buttons now.

“But, what if I need to show one object, but close few others with some group, or something?”

Nothing can be easier. We can add to targeted object another custom attribute called “group”, and give it the name of group as a value, so all the objects with this group will slide up, when another object is sliding down. Here is the HTML:

<a href="#" toggle="bread1">I want some bread</a>

<div id="bread" group="breakfast">
content ...
</div>

<a href="#" toggle="bread2">What about milk?</a>

<div id="milk" group="breakfast">
content ...
</div>

So, now, when we know how we want this to work, we can jump to creating our jQuery snippet.
We need to trigger the click() function, when any object with the attribute “toggle” is clicked.

$("[toggle]").click( function() {

});

Now, we need to define some variables to work with. Read the descriptions next to them.

$("[toggle]").click( function() {

  var targetObjId = $(this).attr("toggle"); // get the ID of targeted object from "toggle" attribute value
  var targetObj = $("[id="+targetObjId+"]"); // find and target the needed object into variable
  var targetObjGroup = $(targetObj).attr("group"); // check, if tehre is any group reference on targeted object

});

We have our variables, so lets do some magic and finish the snippet. Again, read the comments in code.

$("[toggle]").click( function() {

  var targetObjId = $(this).attr("toggle");
  var targetObj = $("[id="+targetObjId+"]");
  var targetObjGroup = $(targetObj).attr("group");

  if( targetObjGroup ) // if there is some reference to group, run this
  {
      $("[group="+targetObjGroup+"]").not(targetObj).slideUp(); // slide up (hide) all objects with refered group, but not our targetObj
      $(targetObj).slideDown(); // slide down (animated show function) our targetObj
  }
  else // if  there is no reference for group, run this
  {
      if( $(targetObj).is(":hidden") ) $(targetObj).slideDown(); // if our targetObj is hidden, slide him down
      else $(targetObj).slideUp(); // in other case, slide him up
  }

  return false; // in case that triggering object is an <a> tag, we don't want to href="" got executed by browser

});

And thats it. This 19 lines of code can simply replace the whole Animated Collapsible DIV plugin. Interesting huh?

But this is not over yet :) In case, that you want to use this snippet as a tabs switcher, you have to do some changes, but you want to leave this snipped like it is, so simply copy paste it, and change the attribute to “showtab”. Here is the new snipped, with highlighted lines and explanations.

$("[showtab]").click( function() { // changed attribute

  var targetObjId = $(this).attr("showtab"); // changed attribute
  var targetObj = $("[id="+targetObjId+"]");
  var targetObjGroup = $(targetObj).attr("group");

  if( targetObjGroup )
  {
      $("[group="+targetObjGroup+"]").not(targetObj).hide(); // in case of hiding tab, we don want to animate sliding, so it wouldn't mess with height of surrounding elements
      $(targetObj).fadeIn(); // fadeIn() animation is way better in tabs switching
  }
  else
  {
      if( $(targetObj).is(":hidden") ) $(targetObj).fadeIn(); // in case, that there is only one tab, just toggle it
      else $(targetObj).fadeOut();
  }

  return false;

});

If you need to change style of triggering button after click, just create a css class called “active” with needed changes, and toggle this class to button after if().

$("[toggle]").click( function() {

  var targetObjId = $(this).attr("toggle");
  var targetObj = $("[id="+targetObjId+"]");
  var targetObjGroup = $(targetObj).attr("group");

  if( targetObjGroup )
  { ... }
  else
  { ... }

  $(this).toggleclass('active'); // <- thats what I'm talking about

  return false;

});

Or add this class with addclass(), and remove with removeclass() whenever in code you need.

I hope, that this tutorial will be useful for someone, and remember: Try to create some functions & features yourself before finding the solution among plugins. That way, you will gain more experience, and know-hows.

As bonus, here are 2 simple snippets for “show” and “hide” attributes, for better understanding.

$("[show]").click( function() {

  var targetObjId = $(this).attr("show");
  var targetObj = $("[id="+targetObjId+"]");

  $(targetObj).slideDown();

});

$("[hide]").click( function() {

  var targetObjId = $(this).attr("hide");
  var targetObj = $("[id="+targetObjId+"]");

  $(targetObj).slideUp();

});

If you have any questions, do not hesitate to ask. Comments are always welcome.

Demo presentation

474x

Tutorial files

24.93KB 247x