Как применить jQuery SlideToggle к циклу foreach?

Question

Я пытаюсь применить SlideToggle для списка категорий foreach Loop. Я пробовал различные методы, но все идет напрасно. Я нашел this полезный и похожий на то, что мне нужно, но это снова не работает. Любая идея, почему она не работает?

<?php if (count($_categories) > 0): ?> 
     <script> 
      $(document).ready(function() { 
      $(".main_box").click(function() { 
      $(this).siblings('.sliding_box').slideToggle(); 
     }); 
    }); 
     </script> 
     <?php foreach($_categories as $_category): ?> 
     <div class="wrapper"> 
      <div class="main_box"> 
       <?php echo $_category->getName() ?>     
      </div> 
      <?php $_category = Mage::getModel('catalog/category')->load($_category->getId()) ?> 
      <?php $_subcategories = $_category->getChildrenCategories() ?> 
      <?php if (count($_subcategories) > 0): ?> 
     <div class="sliding_box"> 
      <ul class="listx" style="display:none;"> 
       <?php foreach($_subcategories as $_subcategory): ?> 
        <li class="item" > 
         <a style="color:orange;" href="<?php echo $_helper->getCategoryUrl($_subcategory) ?>"> 
          <?php echo $_subcategory->getName() ?> 
         </a> 
        </li> 
       <?php endforeach; ?> 
      </ul> 
     </div> 
      <?php endif; ?> 
     </div> 
     <?php endforeach; ?> 
    <?php endif; ?> 

Answer 1

Я думаю, что это должно быть должно работать, но дело в том, что это внутреннее содержимое. Ul скрыто с отображением свойства none css. Лучше вы можете предоставить jsFiddle с кодом html, созданным здесь. Или atlease html.

вот ваш код в рабочем состоянии.

$(document).ready(function() { 
 
      $(".main_box").click(function() { 
 
      $(this).siblings('.sliding_box').slideToggle(); 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
      <div class="main_box"> 
 
       Name here    
 
      </div> 
 
     <div class="sliding_box"> 
 
      <ul class="listx"> 
 
        <li class="item" > 
 
         <a style="color:orange;" href="#"> 
 
          link 
 
         </a> 
 
        </li> 
 
       <li class="item" > 
 
         <a style="color:orange;" href="#"> 
 
          link 
 
         </a> 
 
        </li> 
 
       <li class="item" > 
 
         <a style="color:orange;" href="#"> 
 
          link 
 
         </a> 
 
        </li> 
 
      </ul> 
 
     </div>