0

I have been making an article in Joomla, and for doing it more visually, I want to show text when I click in a li. The problem is an error appears in the console... I don't know if the error it's because the code I've made, JQuery EASY or JCH Optimize... This is the code: HTML5

<div class="article-part">
    <h3><strong>Servicios: (Líneas de actividad)</strong></h3>
    <ul>
        <li class="plegable"><strong>Header 1</strong>
            <p class="qs-datos">Content to expand</p>
        </li>
        <li class="plegable"><strong>Header 2</strong>
            <p class="qs-datos">Content to expand</p>
        </li>
        <li class="plegable"><strong>Header 3</strong>
            <p class="qs-datos">Content to expand</p>
        </li>
    </ul>
</div>

JQUERY

$(document).ready(function() {
    $('.plegable').on('click', function(){ 
        $(this).next('.plegable > p').slideToggle(); 
    });
});
0

Firstly, try disabling the JCH Optimize plugin to see if your code works.

If not, then try using jQuery as the global scope and $ as an alias like so:

jQuery(document).ready(function($) {
    $('.plegable').on('click', function(){ 
        $(this).next('.plegable > p').slideToggle(); 
    });
});
  • It works without JCH Optimize... So... what should I do...? – Antonio Mar 3 '15 at 12:14
  • Try the code I provided – Lodder Mar 3 '15 at 12:17
  • Neither, it doesn't still work – Antonio Mar 3 '15 at 12:21
  • It might be due to the gzip option you have enabled. Try disabling only that option – Lodder Mar 3 '15 at 13:09
  • I got it disabling "minify js"; but i have to put ".plegable > strong" – Antonio Mar 3 '15 at 15:07
0

your element .qs-datos is not a next() element of the li
It's a child element in your code.

So your html should look more like this:

<h3 class="plegable">Header 3</h3>
<div class="qs-datos">Content to expand</div>
<h3 class="plegable">Header 3</h3>
<div class="qs-datos">Content to expand</div>
<h3 class="plegable">Header 3</h3>
<div class="qs-datos">Content to expand</div>
0

Try this:

jQuery(document).ready(function($) {
    $('.plegable').on('click', function(){ 
        $(this).children('p').slideToggle(); 
    });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.