Question

I have the following html and I want to use jQuery to toggle the display/visibility of the child divs in the product-preview-wrapper div. This is to be done by selecting which one to show by selecting OPTION_one, OPTION_two or OPTION_three from the product-image-wrapper div. Also OPTION_one needs to be selected be default at run time (hiding STUFF_two and STUFF_three).

<div class="product-preview-wrapper">
  <div id="wrap">STUFF_one</div>
  <div id="wrap">STUFF_two</div>
  <div id="wrap">STUFF_three</div>
</div>

<div class="product-image-wrapper">
  <div class="product-img-thumb-small">OPTION_one</div>
  <div class="product-img-thumb-small">OPTION_two</div>
  <div class="product-img-thumb-small">OPTION_three</div>
</div>

I know there’s something with indexing but I couldn’t get my head around it. I also need the function to allow for different amounts of content… there wont always be 3 child divs to toggle.

I played with toggle,hide & show and css(‘display’, ‘none’) and fell a bit short with my experience.

I haven’t posted my try code here as it didn’t work and is a total mess anyway.

Any advice/direction with this would be much appreciated.

C

Answer 1

Don’t use the same id for multiple elements. id is unique!

Once you fix that, make use of .index():

$('.product-image-wrapper .product-img-thumb-small').click(function() {
  $('.product-preview-wrapper')
   .children()
   .eq($(this).index())
   .show()
   .siblings()
   .hide();
});

// To load the first one
$('.product-image-wrapper .product-img-thumb-small').eq(0).click();