Toggle show more btn is automatically close itself in magento 2 layered navigation

Question

I tried this jqery code and try to put "li" instead of "a"...but sometimes button works with this error in console"Uncaught error jquery is not defined"

but most of the times it's not working with no error in console.

File path: /app/design/frontend/theme/mycompany/Magento_LayeredNavigation/templates/layer/filter.phtml

<style>
.more{
width:100%;
background:#87C540;
height:2em ;
display:block;
border-radius:3px;
color:white;
padding:5px 0 0 0;
text-align:center;
}
a.term-list.toggleable{
width:100%;
}
</style>
<ol class="items lay-nav-filter">
    <?php foreach ($filterItems as $filterItem): ?>
            <?php if ($filterItem->getCount() > 0): ?>
                <a  href="<?= $block->escapeUrl($filterItem->getUrl()) ?>" class="term-list">
                    <li class="item">
                   <?= /* @escapeNotVerified */ $filterItem->getLabel() ?>
                    <?php if ($this->helper('\Magento\Catalog\Helper\Data')->shouldDisplayProductCountOnLayer()): ?>
                        <span class="count"><?= /* @escapeNotVerified */ $filterItem->getCount() ?><span class="filter-count-label">
                            <?php if ($filterItem->getCount() == 1):?> <?= /* @escapeNotVerified */ __('item') ?><?php else:?> <?= /* @escapeNotVerified */ __('items') ?><?php endif;?></span></span>
                    <?php endif; ?>
            <?php else:?>
                <?= /* @escapeNotVerified */ $filterItem->getLabel() ?>
                <?php if ($this->helper('\Magento\Catalog\Helper\Data')->shouldDisplayProductCountOnLayer()): ?>
                    <span class="count"><?= /* @escapeNotVerified */ $filterItem->getCount() ?><span class="filter-count-label">
                        <?php if ($filterItem->getCount() == 1):?><?= /* @escapeNotVerified */ __('item') ?><?php else:?><?= /* @escapeNotVerified */ __('items') ?><?php endif;?></span></span>
                <?php endif; ?>
            <?php endif; ?>
                    </li>
                </a>
    <?php endforeach ?>
</ol>

<script>
jQuery(document).ready(function() {

    jQuery('ol.lay-nav-filter').each(function(){

        if( jQuery(this).find('a').length >= 10){    
           jQuery('a', this).eq(10).nextAll().hide().addClass('toggleable');
           jQuery(this).append('<a class="more">Show More</a>');    
        }
        jQuery(this).on('click','.more', toggleShow);
    });

});
function toggleShow(){
  var opened = jQuery(this).hasClass('less');  
  jQuery(this).text(opened ? 'Show More' : 'Show Less').toggleClass('less', !opened);    
  jQuery(this).siblings('a.toggleable').slideToggle();

}

</script>

Answer 1

Add your jquery code within require(['jquery'], function($){ }); & replace jQuery with $