Try to use a bit of jQuery code in a CMS page

[eduardoribeiro]

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.

 

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.

 

So here is the HTML:

<h1>Cursos Magic Nails</h1>
<p>Temos um vasto leque de ofertas formativas à sua espera. Escolha um dos links abaixo e veja a nossa oferta formativa.</p>
<ul id="portefolio">
<li><img name="" src="" width="256" height="200" alt="" />Unhas
<div class="infos">
<h3>Cursos de Unhas de Gel e Acrílico</h3>
<ul>
 <li>Curso de Técnicas de Unhas de Gel</li>
    <li>Designer de Unhas de Gel</li>
    <li>Curso de Art-Nail</li>
    <li>Reciclagem para Profissionais</li>
   </ul>
   <ul>
 <li>Curso de Acrílico</li>
   </ul>
</div>
</li>
<li><img name="" src="" width="256" height="200" alt="" />Manicure/Pedicure
<div class="infos">
<h3>Cursos de Manicure/Pedicure</h3>
<ul>
 <li>Curso de Manicure</li>
    <li>Curso de Pedicure</li>
    <li>Pack 3 Cursos (Manicure/Pedicure e Depilação)</li>
    <li>Curso 3 em 1<span>PROMO</span></li>
    <li>Manicure e Pedicure<span>PROMO</span></li>
   </ul>
</div>
</li>
<li><img name="" src="" width="256" height="200" alt="" />Pestanas
<div class="infos"> 
 <h3>Cursos de Pestanas</h3>
 <ul>
   <li>Curso de Alongamento de Pestanas<span>NOVO</span></li>
   <li>Curso de Permanente de Pestanas<span>NOVO</span></li>
 </ul>
</div>
</li>
<li><img name="" src="" width="256" height="200" alt="" />Depilação
<div class="infos">
 <h3>Cursos de Depilação</h3>
 <ul>
   <li>Curso de Depilação</li>
   <li>Curso de Depilação com Linha<span>NOVO</span></li>
   <li>Curso de Depilação<span>PROMO</span></li>
 </ul>
 <ul>
   <li>Pack 3 Cursos</li>
   <li>Curso 3 em 1<span>PROMO</span></li>
 </ul>
</div>
</li>
<li><img name="" src="" width="256" height="200" alt="" />Massagens
<div class="infos">
 <h3>Cursos de Massagens</h3>
 <ul>
   <li>Curso de Massagens de Relaxamento</li>
   <li>Curso de Massagens das Pedras Quentes</li>
   <li>Curso de Massagens de Estética</li>
 </ul>
</div>
</li>
<li><img name="" src="" width="256" height="200" alt="" />Rosto
<div class="infos">
<h3>Cursos de Rosto</h3>
 <ul>
   <li>Curso de Rosto</li>
 </ul>
</div>
</li>
<li><img name="" src="" width="256" height="200" alt="" />Glitter Tattoo
<div class="infos">
<h3>Cursos de Glitter Tattoo</h3>
 <ul>
   <li>Curso de Glitter Tattoo</li>
 </ul>
</div>
</li>
</ul>

 

And the jQuery embedded in the page:

<script type="text/javascript">
$(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
 });
});
</script>

 

So the part above //On Click is the part that doesn't work.

 

You can test that in this link:

Link

[yaniv14]

you can try to put your scripts inside {literal} tag:

 

{literal}

<script type="text/javascript">

< -- the rest of the scripts -->

</script>

{/literal}

 

if its not working you can also try to change in the scripts all 6 times: "#page #portefolio" To "ul#portefolio"

 

thats the best I can think of

Edited December 28, 2012 by yaniv14 (see edit history)

[eduardoribeiro]

you can try to put your scripts inside {literal} tag:

 

{literal}

<script type="text/javascript">

< -- the rest of the scripts -->

</script>

{/literal}

 

if its not working you can also try to change in the scripts all 6 times: "#page #portefolio" To "ul#portefolio"

 

thats the best I can think of

 

Thank you for the quick answer, well the problem is, I'm using this bit of code in a CMS Page, so using the

{literal}{/literal}

will be wrapped by <p></p> tags. And tried to alter the "#page #portefolio" To "ul#portefolio" also didn't work