toggle divs с jquery

Question

У меня есть следующий html, и я хочу использовать jQuery для переключения отображения/видимости дочерних divs в div product-preview-wrapper. Это нужно сделать, выбрав, какой из них можно показать, выбрав OPTION_one, OPTION_two или OPTION_three из деления product-image-wrapper. Также OPTION_one должен быть выбран по умолчанию во время выполнения (скрыть STUFF_two и 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> 

Я знаю, что есть что-то с индексированием, но я не мог обогнуть его. Мне также нужна функция, позволяющая различное количество контента ... там всегда будет 3 дочерних divs для переключения.

Я играл с переключением, скрывал & шоу и css ('display', 'none') и немного упал с моим опытом.

Я не размещал здесь свой код попытки, так как он не работал и в любом случае является полным беспорядком.

Любые рекомендации/направления с этим были бы высоко оценены.

C

Answer 1

Не используйте то же самое id для нескольких элементов. id является уникальным!

После того, как вы исправить это, использовать .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(); 

Answer 2

toggle должен работать. Попробуйте настроить отображение div как встроенное, а затем использовать переключатель.