divのトグルをスライディングする要素をクリックする

Question

jqueryを使用してdivのアコーディオンスタイルの開閉をしようとしています。しかし何らかの理由でjqueryのnext（）が動作していないようです。私はタイトルがクリックされたとき、他のすべてのdivはクリックされたもの以外は閉じなければならない。

HTMLコード -

<div class="office-row"> 
    <h3 class="office-title">Title</h3> 
</div> 
<div class="office">sadasd</div> 
<div class="office-row"> 
    <h3 class="office-title">Title</h3> 
</div> 
<div class="office">sadasd</div> 
<div class="office-row"> 
    <h3 class="office-title">Title</h3> 
</div> 

デモ - https://jsfiddle.net/v3hc19np/1/

任意のヘルプは高く評価されます。

Answer 1

他の人によると、タイトルに隣接する$.next('div')が存在しないので、私は.officeを移動して、その要素が現在それに隣接しているようにしました。オリジナルのHTMLで更新されました。

$(function() { 
 
    var $titles = $('.office-title'), 
 
     $offices = $('.office'); 
 
    $titles.on('click', function() { 
 
    var $target = $(this).parent('.office-row').next('.office'); 
 
    $target.slideToggle(); 
 
    $offices.not($target).slideUp(); 
 
    }); 
 
});

.office { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="office-row"> 
 
    <h3 class="office-title">Title</h3> 
 
</div> 
 
<div class="office">sadasd</div> 
 
<div class="office-row"> 
 
    <h3 class="office-title">Title</h3> 
 
</div> 
 
<div class="office">sadasd</div> 
 
<div class="office-row"> 
 
    <h3 class="office-title">Title</h3> 
 
</div> 
 
<div class="office">sadasd</div>

Answer 2

ソリューション：

あなたのdiv要素は、このように次の（ 'DIV'）が見つかりませんでした、正しくネストされていませんでした。

<div class="office-row"> 
    <h3 class="office-title">Title</h3> 
    <div class="office">sadasd</div> 
</div> 
<div class="office-row"> 
    <h3 class="office-title">Title</h3> 
    <div class="office">sadasd</div> 
</div> 
<div class="office-row"> 
    <h3 class="office-title">Title</h3> 
    <div class="office">sadasd</div> 
</div> 

デモ：：ここではどのようにすべきだ照会のための作業コードさ https://jsfiddle.net/v3hc19np/5/

Answer 3

私たちができたループ要素とここに機能トグル使用し、その後なしのjQueryを使用してそれらを表示し、

$('.office-title').click(function() { 
    $(".office").each(function(index,obj){ 
     $(obj).hide(); 
    }); 
    $(e.target).parent().next().slideToggle(); 
    return false; 
    });