Home/ Questions/Q 3487870
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T11:12:06+00:00

An update to before, here’s what I’m dealing with: <body> <div class=header> <img class=imgLogo

  • 0

An update to before, here’s what I’m dealing with:

<body>
<div class="header"> <img class="imgLogo" src="img/vegtablelogo.jpg"> </div>
<div id="thumbsContainer">
  <div class="thumb" id="carrotThumb"> <img id="showCarrot" class="imgThumb" src="img/carot.jpg" onClick=setupVeg("showCarrot", "carrotBig") /> </div>
  <div class="hidden" id="carrotBig"> <img class="imgBig" src="img/carot.jpg" /> </div>
  <div class="thumb" id="brocThumb"> <img id="showBroc" class="imgThumb" src="img/brocoli.jpg" onClick=setupVeg("showBroc", "brocBig") /> </div>
  <div class="hidden" id="brocBig"> <img class="imgBig" src="img/brocoli.jpg" /> </div>
</div>
<!-- end thumbs container --> 

<script>
var active = "";

function setupVeg(thumbVeg, hiddenVeg) {
    $("#" + thumbVeg).click(function() {
        if (active != hiddenVeg) {
            $("div.hidden").hide("fast");
            $("#" + hiddenVeg).show("fast", function() {});
            active = hiddenVeg;
        }
        else {
            $("div.hidden").hide("fast");
            active="";
        }
    });
}

$("div.hidden").click(function () {
    $("div.hidden").hide("fast");
    isAnyBig=false;
});

</script>
</body>

This code is not working unfortunately. I have borrowed from suggested solution below.

Would be nice if it did work!
Any suggestions, most welcome.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok I have found a neat(ish) sollution, dependent on each hidden DIV being the .next() one. If it isn’t it won’t work but should be fine generally though. Hacked!

    <div class="header"> <img class="imgLogo" src="img/vegtablelogo.jpg"> </div>
<div id="thumbsContainer">
  <div class="thumb" id="carrotThumb"> <img id="showCarrot" class="imgThumb" src="img/carot.jpg" /> </div>
  <div class="hidden" id="carrotBig"> <img class="imgBig" src="img/carot.jpg" /> </div>
  <div class="thumb" id="brocThumb"> <img id="showBroc" class="imgThumb" src="img/brocoli.jpg" /> </div>
  <div class="hidden" id="brocBig"> <img class="imgBig" src="img/brocoli.jpg" /> </div>
</div>
<!-- end thumbs container --> 

<script>
var active = "";

$("div.thumb").click(function() {
    var thumbVeg = $(this).attr("id");
    var hiddenVeg = $(this).next().attr("id");
    setupVeg(thumbVeg, hiddenVeg);
});



function setupVeg(thumbVeg, hiddenVeg) {
    if (active != hiddenVeg) {
        $("div.hidden").hide("fast");
        $("#" + hiddenVeg).show("fast", function() {});
        active = hiddenVeg;
    }
    else {
        $("div.hidden").hide("fast");
        active="";
    }
}

$("div.hidden").click(function () {
    $("div.hidden").hide("fast");
});

</script>
    • 0