ShowHide несколько li> blockquote #Quote

Question

Я пытаюсь получить его, поэтому, если вы нажмете «Котировку», он скрывается и показывает полный обзор.

Этот текущий код работает только с первым элементом списка. Кажется, я не понимаю. Вероятно, это нечто очевидное, я просто не знаю jquery.

http://jsfiddle.net/TacoFiesta/L3a70h38/2/

<li><blockquote> 
     <q id="Quote"><?php echo $rv['Quote'] ?></q> 
     <q id="Review"><?php echo $rv['Review'] ?></q> 
     <img src="images/reviews/<?php echo $rv['Image'] ?>"> 
     <cite> 
     - <?php echo $rv['Name']; ?> 
     - <?php echo $rv['Location']; ?> 
     - <?php echo $rv['reviewDate']; ?> 
     - <?php echo $rv['Site']; ?> 
     </cite> 
</blockquote></li> 

$(document).ready(function(){ 
    $("#Review").click(function(){ 
    $("#Quote").show(); 
    $("#Review").hide(); 
    }); 
    $("#Quote").click(function(){ 
    $("#Review").show(); 
    $("#Quote").hide(); 
    }); 
}); 

Спасибо

Answer 1

Как j08691 (редактирование: и KoenW) сказал, вы должны использовать классы вместо этого, так как идентификаторы должны быть уникальными ... Вы могли найти способ, чтобы получить вокруг этого (найдите родительский элемент и выполните поиск внутри него для этого идентификатора), но это приведет к победе в назначении классов и идентификаторов.

попробовать что-то вроде этого, вместо: http://jsfiddle.net/q7rypnxp/1/

(После изменения идентификаторов классов в HTML):

$(document).ready(function(){ 
    $(".Review").click(function(){ 
    $(this).siblings(".Quote").show(); 
    $(this).hide(); 
    }); 
    $(".Quote").click(function(){ 
    $(this).siblings(".Review").show(); 
    $(this).hide(); 
    }); 
}); 

Answer 2

Значение атрибута id является уникальным для страницы. Для этого вам нужно использовать классы (или разные уникальные идентификаторы).

Вот раздвоенный jsfiddle: http://jsfiddle.net/KoenW/n1fxhkkk/1/

Answer 3

Измените ваш id="Quote" на class="Quote". Сделайте то же самое для id="Review "

Затем измените вам Jquery код на следующее:..

$(document).ready(function(){ 

    $(".Review").click(function(){ 
    $(this).prev(".Quote").show(); 
    $(this).hide(); 
    }); 

    $(".Quote").click(function(){ 
    $(this).next(".Review").show(); 
    $(this).hide(); 
    }); 
});