Problems hiding all children elements

[spelman08]

I'm having some issues creating a list of collapsible elements.My code looks like this:\[code\]<div class="projectscontainer"> <span class="item destproject" title="ID: 384">Kaoweuzax-Xrjamjhxteaq</span><br> <div class="srcprojects"> <div class="arrow-right"></div> <span class="item srcproject" title="ID: 1991">Eovwurxmpgmz 6.b</span><br> </div></div><div class="projectscontainer"> <span class="item destproject" title="ID: 383">Uxiuhbgbt0.5-Rdsopvxc Fucxbhivs</span><br> <div class="srcprojects"> <div class="arrow-right"></div> <span class="item srcproject" title="ID: 1990">Zekgyfrmc-Tpuduwzr Idkudowbi</span><br> </div></div><div class="projectscontainer"> <span class="item destproject" title="ID: 394">Lyxiyp</span><br> <div class="srcprojects"> <div class="arrow-right"></div> <span class="item srcproject" title="ID: 2108">Kdvdz</span><br> </div></div> <div class="srcprojects"> <div class="arrow-right"></div> <span class="item srcproject" title="ID: 2109">Derqi-AA_Boejbvr</span><br> </div> <div class="srcprojects"> <div class="arrow-right"></div> <span class="item srcproject" title="ID: 2110">Yhdju-SkneLxiyuz</span><br> </div>\[/code\]jQuery here:\[code\]$(document).ready(function(){ $(".projectscontainer").click(function(){ $(this).children('.srcprojects').toggle(); });});\[/code\]PHP:\[code\]<?php$result_rules = $db->query("SELECT rules.source_id, rules.destination_id, dest.project AS dest_project, src.project AS src_project, src. pk_id as src_id FROM dbo.FFC_Rules rules INNER JOIN dbo.FFC_Destination dest ON dest.pk_id=rules.destination_id LEFT JOIN dbo.FFC_Source src ON src.pk_id=rules.source_id ORDER BY dest.project ASC");$last_dest = false;$last_src = http://stackoverflow.com/questions/15490077/false;while($row = sqlsrv_fetch_array($result_rules)){ if ($row['destination_id'] !== $last_dest) { $last_dest=$row['destination_id']; echo "<div class='projectscontainer'>"; echo "-<span class='item destproject' title='ID: ".$row['destination_id']."'>".$row['dest_project']."</span>"; echo "<br>"; } echo "<div class='srcprojects'>"; echo "<div class='arrow-right'></div>"; if ($row['src_id'] === null) { echo " Source ID for Destination ID ".$row['destination_id']." is NULL "; } else { echo "<span class='item srcproject' title='ID: ".$row['src_id']."'>".$row['src_project']."</span>"; } echo "<br>"; echo "</div>"; echo "</div>";}?>\[/code\]Right now it works if there's only 1 srcproject under the destproject, but I want all children (srcproject) of the destproject to be hidden when the destproject is clicked.I understand that as only the first srcproject in each destproject is a child in my markup, it is not working. What I don't know, is how can I either fix the markup in my PHP code, or change the jQuery so that it will work.JSFiddle