Trying to fire off a function affecting an element from its child, sort of
<p>I'm trying to create an accordion like blog function, where at first you see a set of rows (100px to be precise), and when you click the blog header the blog post expands to its full height. </p>

<p>This is what I have so far: </p>

<p>HTML:</p>

<pre><code>                    &lt;ul class="blog"&gt;

                        &lt;li class="list-item"&gt;
                            &lt;div class="list-item-left"&gt;
                                &lt;h2 class="expand"&gt;Project Eden&lt;/h2&gt;

                                &lt;time&gt;07.08.2012&lt;/time&gt;
                            &lt;/div&gt;
                            &lt;div class="list-item-right"&gt;
                                &lt;p&gt;"Sed ut perspiciatis unde &lt;/p&gt;                                   
                            &lt;/div&gt;
                            &lt;div class="list-item-whitespace"&gt;&lt;/div&gt;
                        &lt;/li&gt;

                        &lt;li class="list-item"&gt;
                            &lt;div class="list-item-left"&gt;
                                &lt;h2&gt;Project Eden&lt;/h2&gt;

                                &lt;time&gt;07.08.2012&lt;/time&gt;
                            &lt;/div&gt;
                            &lt;div class="list-item-right"&gt;
                                &lt;p&gt;"Sed ut perspiciatis unde&lt;/p&gt;
                            &lt;/div&gt;
                            &lt;div class="list-item-whitespace"&gt;&lt;/div&gt;
                        &lt;/li&gt;

&lt;/ul&gt;
</code></pre>

<p>jQuery: </p>

<pre><code>var $listItems = $('.list-item');
var closedHeight = 100;
var slideSpeed = 1000;

$(".list-item").click(function() {
  if($(".list-item:animated").length) 
    return false;
}).toggle(function() { 
        var openHeight = $(this).parents("div:first").find(".list-item-right").height();
    $(this).animate({height:openHeight}, slideSpeed,"easeOutExpo");
    $(this).children('.list-item-whitespace').css({'display':'none'});
}, function(){
        $(this).animate({height:100}, slideSpeed,"easeOutExpo");
        $(this).children('.list-item-whitespace').css({'display':'block'});  
});
</code></pre>

<p>So basically what we're doing (to my understanding, I'm quite the newbie when it comes to jQuery!): </p>

<p>We're storing some information in our variables, and then we define a function which will expand the .list-item to the actual height of .list-item-right , and when we click it again it will revert back to its "closed" height of 100px. </p>

<p>Now, what I want to do is to not have the .toggle event, or .click event fire off when clicking .list-item.</p>

<p>Instead, I want it to fire off ONLY when you click the .expand class, or .list-item-left h2 (if you will). </p>

<p>If this makes any sense to anyone, please do tell me where I'm at a loss. </p>

<p>Best regards,
K. </p>
