Having some trouble with .animate()
<p>I'm having some trouble trying to toggle multiple items.</p>

<p>Here's a summary of what I'm trying to achieve:</p>

<ul>
<li>There are 5 divs (let's call them
trigger-div) and there are 5 other
divs that corresponds with each
trigger-div (let's call it
content-div)</li>
<li>When I click a trigger-div1, it's
corresponding content-div1 will pop
up with .animate()</li>
<li>When I click on another trigger-div2,
the opened content-div1 will close
with .animate() toggle width and
after it's done closing, the
corresponding content-div2 will open
with .animate().</li>
<li>Same goes with the other trigger-div. For example, when I click trigger-div3, content-div2 will close and content-div3 will open after.</li>
</ul>

<p>Here's the code I have so far</p>

<pre><code>&lt;script&gt;
$(document).ready(function() {
var div_id;
var tile_object;
var ele_about = 0;
var ele_career = 0;
var ele_restaurant = 0;
var ele_contact = 0;
var ele_blog = 0;

var toggle_check = function (tile_object, div_id) {
 if (ele_about == 1){
 animate_close("ele_about", tile_object, div_id, "#tile-blog"); 
 } 
 else if (ele_career==1){
 animate_close("ele_career", tile_object, div_id, "#tile-career-content");
 }
 else if (ele_restaurant==1){
 animate_close("ele_restaurant", tile_object, div_id, "#tile-restaurant-content");
 }
 else if (ele_contact==1){
 animate_close("ele_contact", tile_object, div_id, "#tile-contact-content");
 } 
 else if (ele_blog==1){
 animate_close("ele_blog", tile_object, div_id, "#tile-blog");
 } 
 else { 
 animate_open(tile_object, div_id); 

 }
}

var animate_close = function (tile_close, tile_open, div_id, div_close){
 $(div_close).animate({
 width: "toggle",
 }, 600, "linear", function (){ animate_open(tile_object, div_id); }
 ); 

 tile_close = 0;
}

var animate_open = function (tile_object, div_id) {
 $(div_id).animate({
 width: "toggle",
 }, 600);

 tile_object = 1;
 alert(ele_about)
}

$("#tile-about").click( function (){
 toggle_check(ele_about, "#tile-blog"); 
});

$("#tile-career").click( function (){
 toggle_check("ele_career", "#tile-career-content");
});

$("#tile-restaurant").click( function (){
 toggle_check("ele_restaurant", "#tile-restaurant-content");
});
}); &lt;/script&gt;
</code></pre>

<p>And here's the HTML</p>

<pre><code>&lt;a id="trigger-about" href="#"&gt;&lt;div id="tile-about" class="tile-about-inactive"&gt;&lt;/div&gt;&lt;/a&gt;
&lt;div id="tile-career" class="tile-career-inactive"&gt;&lt;/div&gt;
&lt;div id="tile-restaurant" class="tile-restaurant-inactive"&gt;&lt;/div&gt;&lt;div id="tile-contact" class="tile-contact-inactive"&gt;&lt;/div&gt;

&lt;div id="tile-blog" class="div-hide"&gt;
blog content
&lt;/div&gt;

&lt;div id="tile-about-content" class="div-hide"&gt;
career content
&lt;/div&gt;

&lt;div id="tile-career-content" class="div-hide"&gt;
career content
&lt;/div&gt;

&lt;div id="tile-restaurant-content" class="div-hide"&gt;
restaurant content
&lt;/div&gt;

&lt;div id="tile-contact-content" class="div-hide"&gt;
contact content
&lt;/div&gt;
</code></pre>

<p>"div-hide" class is just a "display:none" css to hide the content initially and the "tile--active" is for my hover effect, which works fine.</p>

<p>After running this, for some reason, the "ele_" variable doesn't transition into the "toggle_check()" and "animate_open()" functions. I noticed this because the alert(ele_about) keeps returning a 0 value.</p>

<p>Please help! I'm stumped :(</p>
