JQuery toggle с неизвестным количеством элементов

Question

У меня есть динамически созданный контент, где может быть 2 или может быть 200 DIV - каждый div имеет некоторый контент, который я хочу переключить, и стрелку для показа содержимого.

Я могу заставить toggle и т. Д. Работать нормально, но когда он переключает, он переключает все (т. Е. Все элементы с именем класса - как и должно быть), но я хочу, чтобы он переключил соответствующий.

<div id="outer"> 
    <div class="inner"> 
     <div class="left"> 
      <div class="expanded"> 
       12345 
      </div> 
     </div> 
     <div class="right"> 
      <div class="arrow-down"></div> 
     </div> 
    </div> 
    <div class="inner"> 
     <div class="left"> 
      <div class="expanded"> 
       12345 
      </div> 
     </div> 
     <div class="right"> 
      <div class="arrow-down"></div> 
     </div> 
    </div> 
    <div class="inner"> 
     <div class="left"> 
      <div class="expanded"> 
       12345 
      </div> 
     </div> 
     <div class="right"> 
      <div class="arrow-down"></div> 
     </div> 
    </div>  
</div> 

я попытался предложения от toggling dynamically created divs in jquery использовать на и от Toggle dynamically created divs использовать следующие/пред но когда я использую это ничего не происходит, и нет ничего в Devtools, чтобы помочь

Может кто-нибудь мне точку в правильном так что, когда я нажимаю на каждую стрелку, появляется только развернутое окно? http://jsfiddle.net/pgJf4/

Благодаря

Answer 1

Вы можете нацелить расширенный элемент в пределах того же элемента inner

$(".arrow-down").click(function() { 
    $(this).closest('.inner').find('.expanded').toggle("slow"); 
}); 

Демо: Fiddle

• .closest()

Answer 2

нас е это, чтобы получить целевой элемент

$(".arrow-down").click(function() { 
    $(this).parent().parent().find('.expanded').toggle("slow"); 
});