Question

My website has a main image that changes depending on what thumbnails you click on. For a certain main picture, I want text specific to that image to populate. The text starts out as display:none; and then I have it revealed with .show();. Nothing seems to be happening with my code, so any help would be much appreciated. The jquery is:

$(document).ready(function() {
jQuery.fn.exists = function() {
    return this.length > 0;
};
if ($("div.bigimage a[href*='karina']").exists()) {
    $("ul li.karina").show();
    $("ul li.natalia").hide();
    $("ul li.celeste").hide();
}
else if ($("div.bigimage a[href*='natalia']").exists()) {
    $("ul li.karina").hide();
    $("ul li.natalia").show();
    $("ul li.celeste").hide();
}
else if ($("div.bigimage a[href*='celeste']").exists()) {
    $("ul li.karina").hide();
    $("ul li.natalia").hide();
    $("ul li.celeste").show();
}
else {
    $("ul li.karina").hide();
    $("ul li.natalia").hide();
    $("ul li.celeste").hide();
}

});​

the html it is trying to select is:

​<div class="bigimage">
<li>
<a href="http://cdn.shopify.com/s/files/1/0103/5102/products/Natalia_1024x1024_IMG_5760.jpg?4679">picture here</a></li>
</div>

<ul>
<li id="model-name" class="karina">Karina is 5'7" and is wearing a size 34 C/D Regular</li>
            <li id="model-name" class="celeste">Celeste is 5'8" and is wearing a size 34 C/D Regular</li>
            <li id="model-name" class="natalia">Natalia is 5'10" and is wearing a size 34 A/B Tall</li>
</ul>​​​​​​

Answer 1

Your problem is a result of case sensitivity: you are looking for natalia but the link url contains Natalia. There is also a much shorter way to write your code:

$("ul li").hide(); // hide all
var url = $("div.bigimage a")[0].href;
if (url.indexOf("Karina") > -1) {
    $("ul li.karina").show();
}
else if (url.indexOf("Natalia") > -1) {
    $("ul li.natalia").show();
}
else if (url.indexOf("Celeste") > -1 ) {
    $("ul li.celeste").show();
}