title: Using jQuery in Prestashop CMS page
body: <p>I'm trying to use a bit of code in a CMS page, I put the bit of code in the end of the html code implemented in the CMS page that I created in Prestashop Backoffice, however, parts of that code work but the rest of the code doesn't work and don't know why.</p>
  
  <p>So basically I have a page with a list and some divs inside of each item of the list. So with jQuery I hide all the DIVs (and this particular part works) and then in each item that I click I have a jQuery function to toggle visibility of the DIV beneath. So the problem is here, that bit of code seems that doesn't work, and I don't know why.</p>
  
  <pre><code>&lt;h1&gt;Cursos Magic Nails&lt;/h1&gt;
  &lt;p&gt;Temos um vasto leque de ofertas formativas à sua espera. Escolha um dos links abaixo e veja a nossa oferta formativa.&lt;/p&gt;
  &lt;ul id="portefolio"&gt;
  &lt;li&gt;&lt;img name="" src="" width="256" height="200" alt="" /&gt;Unhas
  &lt;div class="infos"&gt;
  &lt;h3&gt;Cursos de Unhas de Gel e Acrílico&lt;/h3&gt;
  &lt;ul&gt;
       &lt;li&gt;Curso de Técnicas de Unhas de Gel&lt;/li&gt;
          &lt;li&gt;Designer de Unhas de Gel&lt;/li&gt;
          &lt;li&gt;Curso de Art-Nail&lt;/li&gt;
          &lt;li&gt;Reciclagem para Profissionais&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul&gt;
       &lt;li&gt;Curso de Acrílico&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;img name="" src="" width="256" height="200" alt="" /&gt;Manicure/Pedicure
  &lt;div class="infos"&gt;
  &lt;h3&gt;Cursos de Manicure/Pedicure&lt;/h3&gt;
  &lt;ul&gt;
       &lt;li&gt;Curso de Manicure&lt;/li&gt;
          &lt;li&gt;Curso de Pedicure&lt;/li&gt;
          &lt;li&gt;Pack 3 Cursos (Manicure/Pedicure e Depilação)&lt;/li&gt;
          &lt;li&gt;Curso 3 em 1&lt;span&gt;PROMO&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;Manicure e Pedicure&lt;span&gt;PROMO&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;img name="" src="" width="256" height="200" alt="" /&gt;Pestanas
  &lt;div class="infos"&gt; 
  &lt;h3&gt;Cursos de Pestanas&lt;/h3&gt;
  &lt;ul&gt;
  &lt;li&gt;Curso de Alongamento de Pestanas&lt;span&gt;NOVO&lt;/span&gt;&lt;/li&gt;
  &lt;li&gt;Curso de Permanente de Pestanas&lt;span&gt;NOVO&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;img name="" src="" width="256" height="200" alt="" /&gt;Depilação
  &lt;div class="infos"&gt;
  &lt;h3&gt;Cursos de Depilação&lt;/h3&gt;
  &lt;ul&gt;
  &lt;li&gt;Curso de Depilação&lt;/li&gt;
  &lt;li&gt;Curso de Depilação com Linha&lt;span&gt;NOVO&lt;/span&gt;&lt;/li&gt;
  &lt;li&gt;Curso de Depilação&lt;span&gt;PROMO&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul&gt;
  &lt;li&gt;Pack 3 Cursos&lt;/li&gt;
  &lt;li&gt;Curso 3 em 1&lt;span&gt;PROMO&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;img name="" src="" width="256" height="200" alt="" /&gt;Massagens
  &lt;div class="infos"&gt;
  &lt;h3&gt;Cursos de Massagens&lt;/h3&gt;
  &lt;ul&gt;
  &lt;li&gt;Curso de Massagens de Relaxamento&lt;/li&gt;
  &lt;li&gt;Curso de Massagens das Pedras Quentes&lt;/li&gt;
  &lt;li&gt;Curso de Massagens de Estética&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;img name="" src="" width="256" height="200" alt="" /&gt;Rosto
  &lt;div class="infos"&gt;
  &lt;h3&gt;Cursos de Rosto&lt;/h3&gt;
  &lt;ul&gt;
  &lt;li&gt;Curso de Rosto&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;img name="" src="" width="256" height="200" alt="" /&gt;Glitter Tattoo
  &lt;div class="infos"&gt;
  &lt;h3&gt;Cursos de Glitter Tattoo&lt;/h3&gt;
  &lt;ul&gt;
  &lt;li&gt;Curso de Glitter Tattoo&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And the jQuery embedded in the page:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          //Hide that DIV
          $('#page #portefolio li .infos').hide(); //Hide/close all containers
  
  
          //On Click
          $('#page #portefolio li').click(function(){
              //If immediate next container is closed...
              if($(this).parent('#page #portefolio li .infos').is(':hidden')){ 
                  $('#page #portefolio li').removeClass('active').parent('#page #portefolio li .infos').slideUp();
                  $(this).addClass('active').parent('#page #portefolio li .infos').slideDown();   
              } else {
                  $(this).removeClass('active').parent('#page #portefolio li .infos').slideUp();
              }
              return false; //Prevent the browser jump to the link anchor
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>So the part above //On Click is the part that doesn't work.</p>
  
  <p>You can test that in this link:
  <a href="http://magicnails.designeart.net/content/11-cursos" rel="nofollow">Link</a> </p>