Question

Im using jQuery to create button that will show Photos with absolute position. However, i tried to configure the code with this.

$('#thumbsets li').each(function (i) {
    i = i+1;
    $(this).addClass('ts'+i);
});

$('#web_overview details').each(function (i) {
    i = i+1;
    $(this).addClass('panels'+i).hide();
});

After that, i will create now the main button since i have all specified classes in each class.

$('#web_overview details').each(function (i) {
    i = i+1;
    $(this).addClass('panels'+i).hide(); //Hide all main photos

    // Create button command
    $('.ts'+i).bind({
        click: function() {
            $('.panels'+i).show(); //If clicked photos will show up

            //Fallback for the other photos
        }
    });
});

Now my issue here is, how can i load back again the previous photo if i click .ts1 since .panels2 stuck over the .panels1

Here’s my sample output:

.ts1 -> .panels1 | .ts2 -> .panels2 | .ts1 -> .panels1 (if i click again the .ts1 to load it back on the framebox .panels2 will remain at the top of .panels1.)

Thanks in advance if someone can give me idea on how to fix this.

Answer 1

$('.ts'+i).bind({
    click: function() {
        $('.panels').hide();   //####### Is this what you are missing?  ########
        $('.panels'+i).show(); //If clicked photos will show up

        //Fallback for the other photos
    }
});

You have to hide any visible .panels before opening a new one.

---

But I think you are overcomplicating it… I used too once to assign classes to elements like you do. Why not try with something more simple?

$('.details').hide(); // hide all details

$('#thumbsets li').bind('click',function() {
    var tsLi = $(this).index(); // all elements in collection are indexed
    $('.details').stop().fadeTo(400,0).eq(tsLi).fadeTo(400,1);
});

That’s all!

DEMO JSFiddle