Layered navigation: Show more / less

Question

I'm trying to apply this code snippet (http://jsbin.com/binarenimi/edit?html,js,output) to my layered navigation with no success.. Where I'm wrong?

    <ol class="term-list">
<?php foreach ($this->getItems() as $_item): ?>
    <li class="term-item ">
        <?php if ($_item->getCount() > 0): ?>
        <?php  
            $url = $_item->getUrl();
            $onclick = "ajaxFilter('".$url."')";
            echo '<a class="ajaxLayer"  onclick = "'.$onclick.'" >'. $_item->getLabel() . '</a>';
         ?> 
        <?php else: echo $_item->getLabel() ?>
        <?php endif; ?>
        (<?php echo $_item->getCount() ?>)
    </li>
<?php endforeach ?>
</ol>

<script type="text/javascript">
$('ol.term-list').each(function(){
  if( $(this).find('li').length > 3){    
    $('li', this).eq(2).nextAll().hide().addClass('toggleable');
    $(this).append('<li class="more">Tutti</li>');    
  }
  $(this).on('click','.more', toggleShow);
});


function toggleShow(){
  var opened = $(this).hasClass('less');  
  $(this).text(opened ? 'Tutti' : 'Riduci').toggleClass('less', !opened);    
  $(this).siblings('li.toggleable').slideToggle();
}
</script>

Answer 1

You can't use the $ sign, it's used by Prototype.

Replace every $(...) in your code with jQuery(...):

jQuery(document).ready(function() {

    jQuery('ol.term-list').each(function(){

        if( jQuery(this).find('li').length > 3){    
           jQuery('li', this).eq(2).nextAll().hide().addClass('toggleable');
           jQuery(this).append('<li class="more">Tutti</li>');    
        }
        jQuery(this).on('click','.more', toggleShow);
    });

});

Answer 2

Not sure if this cause an issue. but try script inside document ready. Also make sure you have jQuery.noConflict() in your page.

<script type="text/javascript">

jQuery( document ).ready(function() {
$('ol.term-list').each(function(){
  if( $(this).find('li').length > 3){    
    $('li', this).eq(2).nextAll().hide().addClass('toggleable');
    $(this).append('<li class="more">Tutti</li>');    
  }
  $(this).on('click','.more', toggleShow);
});
});

function toggleShow(){
  var opened = $(this).hasClass('less');  
  $(this).text(opened ? 'Tutti' : 'Riduci').toggleClass('less', !opened);    
  $(this).siblings('li.toggleable').slideToggle();
}
</script>