Having problems making a gallery with lists, jquery and a lot of toggling

Question

So I've been googling around, but just havn't found any good solution for this layout yet.

What Im trying to do is like a gallery. First thumbs, then a large below the clicked thumb.

The problem is to separate different events.

1. A click with no visible div. (Slide down selected div)
2. A click with a visible div. (Transition to new div. Hide old, then show the new one or something)
3. A click with an already selected div. (Slide up selected div)

Been struggling around with different solutions, but either it's glitchy or sometimes it doesn't react to clicks at first.

Basic structure so far:

<ul>
    <li id="case1">Thumb1</li>
    <li id="case2">Thumb2</li>
    <li id="case3">Thumb3</li>
</ul>

<div id="case1box">Content</div>
<div id="case2box">Content</div>
<div id="case3box">Content</div>

Then repeating that snippet. Any better solution, as it's UL(3xLI) then DIV, UL(3xLI) then DIV?

Any thoughts on the toggling and how to solve it?

---

Default state:

---

When clicked:

Answer 1

I'll respond to your behavior one by one and in pseudo code. i'll assume you know enough jquery until further notice :)

A click with no visible div. (Slide down selected div) - easy, put a class and id on your lis. then bind the toggle function to that class:

 $(".classofli").toggle(function() {
   //get id of current li using attr('id'), parse the number, something like picture_1 or whatever
   //$("#"+idofdivtoslide).slideToggle();
 })

that takes care of item 1 and 3 already(A click with an already selected div. (Slide up selected div)

as for item 2: A click with a visible div. (Transition to new div. Hide old, then show the new one or something)

have a variable that keeps your last selected div and a function that closes open divs(the ones with the larger image).

var lastSelected;

//in your toggle function, check if the id of your current thing was the last you clicked, if yes, just call slideToggle. if no, close all open divs, and call slide toggle on current one.
//don't forget to set the lastSelected variable to the id of the item you clicked!

Hope that points you to the right direction

Answer 2

Im not sure exactly how you have your layout set up, but it should matter for the sake of this post, as it is the jQuery we are trying to perfect. I used tables quickly lay this out for you.

Check out the live demo: http://jsfiddle.net/pNaCH/1/

Here's the general overview of it. The key is adding classes to the different items.

JS

$('.thumb').click(function(){
    var id = $(this).attr('id');
    $('.large:visible').slideUp('fast');
    $('#' + id + 'box').slideDown('fast');
});

HTML

<table>
<tr><td>

    <ul>
        <li id="case1" class="thumb">Thumb1</li>
        <li id="case2" class="thumb">Thumb2</li>
        <li id="case3" class="thumb">Thumb3</li>
    </ul>

</td></tr><tr><td>    

    <div id="case1box" class="large">Content1</div>
    <div id="case2box" class="large">Content2</div>
    <div id="case3box" class="large">Content3</div>

</td></tr><tr><td>

    <ul>
        <li id="case4" class="thumb">Thumb4</li>
        <li id="case5" class="thumb">Thumb5</li>
        <li id="case6" class="thumb">Thumb6</li>
    </ul>

</td></tr><tr><td>    

    <div id="case4box" class="large">Content4</div>
    <div id="case5box" class="large">Content5</div>
    <div id="case6box" class="large">Content6</div>

</td></tr>
</table>