JQuery - Toggle <TR> in der Tabellenvorlage

Question

ich arbeite an einem mit einem "display none" und ich möchte es nach einem Klick auf ein Bootstrap-Symbol zeigen. Hier

ist der Code:

Vorlage:

<a href="#" class="toggler" data-prod-cat="{{order.cartId.id}}"><span class="glyphicon glyphicon-th-list" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="{% trans 'show detail' %}"></span></a> 
      </td> 
     </tr> 
     <tr class="cat{{order.cartId.id}}" style="display:none"><td></td><td colspan="5"> 

         {% for detailOrder in detailOrders %} 
          {% if detailOrder.cartId.id == order.cartId.id %} 
           <li>{{detailOrder.quantity}} {{detailOrder.unit}} de {{detailOrder.productId.name}} pour {{entreprise.currency.symbol}} {{detailOrder.totalPrice}} 
          {% endif %} 
         {% endfor %} 
         <br><u>Livraison</u> : {{order.deliveryInstruction.instructions|truncatechars:60}} 

     </td></tr> 
     {% endfor %} 

Javascript:

<script type="text/javascript"> 
$(document).ready(function(){ 
$(".toggler").click(function(e){ 
    e.preventDefault(); 
    $('.cat'+$(this).attr('data-prod-cat')).toggle(); 
}); 
}); 

Ich habe keine Fehler auf meiner Konsole so dass ich ein wenig bin Verloren über das Finden einer Soution.

Vielen Dank für Ihre Hilfe und einen schönen Tag :)

Answer 1

Versuchen Sie folgendes:

$(document).ready(function(){ 
 
    
 
    $(".toggler").click(function(){ 
 
    if($('.cat').css('display') === 'none'){ 
 
     $('.cat').css('display', 'block'); 
 
    }else{ 
 
     $('.cat').css('display', 'none'); 
 
    } 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 

 
<input type="button" class="toggler" value="Toggle"/> 
 

 
<table> 
 
<tr class="cat" style="display:none;"> 
 
    <td>Conlumn 1</td> 
 
     <td colspan="5">Conlumn 2</td> 
 
</tr> 
 
    
 
    </table>

Ich hoffe, das hilft!