0

In mobile view, i have the set of filters set to display: none; and im trying to use jQuery's .toggle function to display and hide those filters, but for some reason my jQuery is not working and nothing happens when i click the filter button.

HTML:

    <p class="block-subtitle block-subtitle--filter" onclick="javascript:toggleDiv('narrow-by-list');"><?php echo $this->__('Filter') ?></p>
    <dl id="narrow-by-list">
        <?php $_filters = $this->getFilters() ?>
        <?php foreach ($_filters as $_filter): ?>
        <?php if($_filter->getItemsCount()): ?>
            <dt><?php echo $this->__($_filter->getName()) ?></dt>
            <dd><?php echo $_filter->getHtml() ?></dd>
        <?php endif; ?>
        <?php endforeach; ?>
    </dl>

jQuery:

<script type="text/javascript">
jQuery.noConflict();

function toggleDiv(divId) {

   $("#"+divId).toggle();

}
</script>

You can test here (must view in mobile (<767px wide browser)): http://180fragrances.com/index.php/kentucky-derby-hats-women

0

When you use jQuery.noConflict(), Jquery "frees" the $ variable so it can be used by other framweworks (like prototype in this case).
So $ references the prototype object.

you need to use jQuery("#"+divId).toggle(); to make it work.

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.