how can i use jquery in twig

Question

I want to know how to make a function that hides the link ("#id supprimer) and shows it only when I click on ("#Ajouter), using jQuery.

This is my twig page:

///////JQUERY////////////

   $(document).ready(function(){
                    $(".Ajout").click(function(){
                        $(".Supprimer").tog;
                    });
            });

target links

        {% for produit in p %}
        <tr>


            <td>{{ produit.nomProduit }}</td>
            <td>{{ produit.prix }}</td>
            <td>{{ produit.quantite }}</td>
            <td>{{ produit.description }}</td>

            <td><a href="{{ path('produit_modifier',{'id':produit.idProduit} )}}">modifier</a></td>
  <td><a  href="{{ path('produit_supprimer',{'id':produit.idProduit} )}}" class="Supprimer">supprimer</a>
         <a  href="{{ path('Ajout_Panier', {'id':produit.idProduit}) }}"class="Ajout">add to panier</a> </td>

        </tr>

    {% endfor %}

Answer 1

How to use jQuery in Twig – just put your Javascript code inside <script> tags. Nothing special is needed.

<script>
  $(document).ready(function() {
    // Store link with class `Supprimer` to a variable
    var $Supprimer = $('.Supprimer');

    // Hide it
    $Supprimer.hide();

    // Show it when the link with class `Ajout` is clicked
    $('.Ajout').on('click', function(e) {
        e.preventDefault();
        $Supprimer.show(); // You can instead use .toggle() here if you want to
    });
  });
</script>

The e.preventDefault(); means that when you click the link with class Ajout, you won't be redirected to wherever the link points to. You can remove that line if you want to.

Edit:

You have $(".Supprimer").tog; in your code. You probably want this instead:

$(".Supprimer").toggle();