Как применить slideToggle?

Question

Есть код:

<h5>       
 {% for order in user.orders.all %}
        
   <div class="order_item">Заказ №{{ order.order_big }}:</div>
        
     {% for item in order_items %}

       {% if item.order_num == order.id %}

          <span class="order_all">
            {% for pr in products %}
              {% if item.product|make_list == pr.product_title|make_list %}
                 <img src="{{pr.product_img.url}}" width="70" alt="">
                   &nbsp;&nbsp;{{ item.product }} ({{ item.quantity }} шт.)
              {% endif %}
            {% endfor %}
          </span>

       {% endif %}
           
     {% endfor %}
     
  {% endfor %}
</h5>

В браузере все выглядит так:

JQ:

$('.order_item').click(function() {
  $(this).parent().find('.order_all').slideToggle('slow');
  $(this).toggleClass('visible')
})

Выдается ошибка при нажатии на тег:

CSS:

.visible {
    display: none;
}

Почему?

Answer 1

Все заработало. Это особенности шаблонов django. Изменил код:

{% for order in user.orders.all %}
   <h5 class="order_wrapper"> 
        
     <div class="order_item">Заказ №{{ order.order_big }}:</div>
        
        {% for item in order_items %}

          {% if item.order_num == order.id %}

             <span class="order_all">
               {% for pr in products %}
                 {% if item.product|make_list == pr.product_title|make_list %}
                    <img src="{{pr.product_img.url}}" width="70" alt="">
                      &nbsp;&nbsp;{{ item.product }} ({{ item.quantity }} шт.)
                 {% endif %}
               {% endfor %}
             </span>

           {% endif %}
           
         {% endfor %}
   </h5>
{% endfor %}

JQ:

$('.order_item').click(function() {
  $(this).parent().find('.order_all').slideToggle('slow');
   console.log('Щелк!');
})

БЛОГ НА HUSL

Как применить slideToggle?

Ответы (1 шт):