dante dante - 8 months ago 47
jQuery Question

jQuery show() doesn't work after hide()

I'm trying to display div with content after click on image, but when my page is loaded and I try to click then nothing happens. Interesting that if my page is loading with not hidden content and then I'll do hide() and after that show() id console then it works perfectly. What am I doing wrong?

$(document).ready(function() {

var first = $(".content-flowers").children()[0];
var second = $(".content-flowers").children()[1];
var third = $(".content-flowers").children()[2];

var firstImg = $(".flower-image")[0];
var secondImg = $(".flower-image")[1];
var thirdImg = $(".flower-image")[2];


/*$(".flower-image").click(function () {


Last commented function works also good, but that function loads all three divs with content, I want in order to after click on 1 image the first div with content will display


You've said the commented-out version works other than that it does all three at the same time, but the earlier version does not work.

They do very different things. Your un-commented-out code looks at the children of the .content-flowers elements:

var first = $(".content-flowers").children()[0];

But your commented-out version works on the .content-flowers elements themselves:


I suspect it's the .children() part that's making it fail. I think you want:

var first = $(".content-flowers")[0];
// No .children() here ----------^

...as the minimal change.

That said, though, the whole thing can be dramatically simpler:

$(document).ready(function() {

    // Get the flower images
    var images = $(".flower-image");

    // When a flower image is clicked...    
    images.on("click", function() {
        // Determine its index relative to the others...
        var index = images.index(this);

        // And show that content