переключая DIV в этом JQuery

Question

Это мой код

<div class="dish"> 
    <div class="arrow"></div> 
    <div class="title">рисовая каша с филе индейки и брокколи</div> 
    <div class="add"></div> 
    <div class="dish-info"> 
     <div class="info-left"> 
      <div class="dish-thumbnail"> 
       <img class="thumbnail" src="images/dish-pic.png" /> 
       <div class="dish-time"> 
        <span class="time">45</span> <span class="minutes">мин</span> 
       </div> 
      </div> 
      <div class="dish-information"> 
       <h1>ингридиенты</h1> 
       <p>700 г филе индейки</p> 
       <p>1 лукавица репчатого лука</p> 
       <p>1 морковь</p> 
       <p>200 г риса «Арборио»</p> 
       <p>1/2 л воды</p> 
       <p>50 мл сливок 20%</p> 
       <p>200 г брокколи</p> 
       <p>1 пучок укропа</p> 
       <p>Соль, перец по вкусу</p> 
      </div> 
     </div> 
     <div class="info-right"> 
      <p>1. Филе индейки вымыть, нарезать мелкими кусочками. Лук и морковь почистить и нарезать мелкими кубиками.</p> 
      <p>2. Положить нарезанную индейку в чашу мультиварки, залить водой и включить программу «СУП» на 1 час.</p> 
      <p>3. После завершения программы «СУП» вынуть индейку из бульона.</p> 
      <p>4. Бульон процедить и снова залить в чашу мультиварки, посолить, добавить укроп.</p> 
      <p>5. Брокколи разобрат на соцветия. Добавить в бульон индейку, промытый рис и мелко нарезанные лук и морковь. Включить программу «КРУПЫ» на 30 минут.</p> 
      <p>6. После завершения программы добавить сливки, перемешать и поставить на программу «КРУПЫ» еще на 10 минут.</p> 
      <div class="add-dish"></div> 
     </div> 
     <div class="clear"></div> 
    </div> 
</div> 

Есть много .dish и .dish-info. При нажатии на .arrow. Он должен переключать .dish-info в том же div. Не должно отображаться все .dish-info s, только тот, на который нажимается стрелка. Как я могу это сделать?

Answer 1

Попробуйте JQuery-скрипт:

$(".arrow").click(function() { 
    $(this).nextAll('.dish-info').toggle(); 
}); 

Вот demo

Вы можете найти более подробную информацию о nextAll-метода here

Answer 2

Вы можете использовать .siblings(selector) как dish-info ДИВ является родственных связей от arrow

$(".arrow").click(function() { 
    $(this).siblings(".dish-info").toggle(); 
}); 

DEMO

Answer 3

$(.arrow).on('click', function() 
{ 
    var _this = $(this); 
    _this.parent().last().toggle(); 
});