Question

I’m working on a small jQuery thingy and I’m for about 90% done (on my own i might add). But now I hit a wall since my code has gotten a bit bigger and I can’t seem to find my last problem.

http://jsfiddle.net/7TRqh/
On this jsFiddle you can see my project.

I have 3 (or more/less) different div’s that all variable in height. The buttons “meer” and “minder” make the elements slide up/down, this works all fine (allthough the code might be a bit messy).

But the problem is that it only grabs the variable height of the first element. 192px and uses that for all the elements allthough they are much heigher. So there’s something wrong with the variable

        var currentHeight = $('.book').css('height');
            $('.book').css('height','auto');
        var animateHeight = $('.book').css('height');
            $('.book').css('height', currentHeight);

But I can’t really seem to find the mistake, I hope someone over here can help me out with this last little problem.

Answer 1

If you call $('.book') you call all the elements with the class book, and you will only receive the height of the first element (because you are asking for a single value: the height. It cannot return an array.

What you probably need to do is give each different .book element a different id, like book1, book2 and book3. You can now get the height of each of the different books.

---

EDIT:

$('#myID').click (function () {
  // do some expanding
  // let's get the height!
  $(this).css('height'); // this is the height of the current clicked item. 
  $(this).parent.css('height'); // this is the height of the parent of the clicked item.
}

You can also call this function on a group of elements, for example $('.book .meerButton').click(function(){});

The $(this) variable is really nice, if you’ve never seen it before, read something about it in the jQuery docs.