Question

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.

This is what I have so far:

HTML:

                    <ul class="blog">

                        <li class="list-item">
                            <div class="list-item-left">
                                <h2 class="expand">Project Eden</h2>

                                <time>07.08.2012</time>
                            </div>
                            <div class="list-item-right">
                                <p>"Sed ut perspiciatis unde </p>                                   
                            </div>
                            <div class="list-item-whitespace"></div>
                        </li>

                        <li class="list-item">
                            <div class="list-item-left">
                                <h2>Project Eden</h2>

                                <time>07.08.2012</time>
                            </div>
                            <div class="list-item-right">
                                <p>"Sed ut perspiciatis unde</p>
                            </div>
                            <div class="list-item-whitespace"></div>
                        </li>

</ul>

jQuery:

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'});  
});

So basically what we’re doing (to my understanding, I’m quite the newbie when it comes to jQuery!):

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.

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

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

If this makes any sense to anyone, please do tell me where I’m at a loss.

Best regards,
K.

Answer 1

This is how I would do it. It requires restructuring your html a bit. You enclose the list item contents in a parent div. You use this to find out what the non-overflowed height is.

When you expand a list item you add an open or closed class so that you know the state.

I also got rid of what I imagine was a clearing div and gave the container div overflow: auto which causes the contained elements to self clear.

http://jsfiddle.net/WZVb6/1/

//set all blog posts to 100px to start
$('li.list-item h2').click(function() {
    $this = $(this);
    var nheight = $this.closest('.naturalheight').height();

    if ($this.hasClass('open')) {
        $this.closest('li').animate({
            height: 100
        });
        $this.removeClass('open');
    }
    else {
        $this.closest('li').animate({
            height: nheight
        });
        $this.addClass('open');
    }

});​