Hide/Show Product Filters containing div onClick

Question

I have a website using a product filter system from a company called Manadev and am looking for a way of hiding a div containing options when an option is selected and restoring the div when the option filters are cleared.

I've contacted the developer of the product filter module but they were not very helpful in helping me find a solution.

The dev website is http://www.handcoded.co.uk/toys4cars/bmw-3-series-roof-racks.html

The code that handles the display (also see http://www.handcoded.co.uk/code.txt):

<?php
/**
 * @category    Mana
 * @package     ManaPro_FilterColors
 * @copyright   Copyright (c) http://www.manadev.com
 * @license     http://www.manadev.com/license  Proprietary License
 */
/**
 * Template for showing options for filter as a list of color boxes
 * @author Mana Team
 * Injected instead of standard catalog/layer/filter.phtml in Mana_Filters_Block_Filter_Attribute init() method.
 */
/* @var $this Mana_Filters_Block_Filter */
?>
<?php echo Mage::helper('mana_core')->getNamedHtml('mana_filters/markup', 'before_items', array('block' => $this)) ?>
<ol class="m-filter-colors labels <?php echo $this->getFilterClass() ?> <?php echo $this->getFilterOptions()->getIsReverse() ? 'm-reverse' : '' ?>">
    <?php foreach ($this->getItems() as $_item): ?>

    <li <?php echo $this->getListItemClass($_item) ?> >
        <?php if (!$this->getFilterOptions()->getDisableNoResultOptions() || $_item->getCount() || $_item->getMSelected()): ?>
            <a href="#"
            onClick="setLocation('<?php echo $this->urlEscape($_item->getMSelected() ? $_item->getRemoveUrl() : $_item->getReplaceUrl()) ?>');">
                <div class="m-color <?php if ($_item->getMShowSelected()): ?>selected<?php endif; ?> <?php echo $this->getFilterValueClass($_item) ?>"
                     title="<?php echo $this->escapeHtml($_item->getLabel()) ?> (<?php echo $_item->getCount() ?>)">
                    <div class="m-layer1"></div>
                </div>
                <?php echo $this->escapeHtml($_item->getLabel()) ?>
            </a>
        <?php else: ?>
            <a href="javascript:void(0)">
                <div class="m-color <?php if ($_item->getMShowSelected()): ?>selected<?php endif; ?> <?php echo $this->getFilterValueClass($_item) ?>"
                     title="<?php echo $this->escapeHtml($_item->getLabel()) ?> (<?php echo $_item->getCount() ?>)">
                    <div class="m-layer1"></div>
                </div>
                <?php echo $this->escapeHtml($_item->getLabel()) ?>
            </a>
        <?php endif; ?>
        <?php if (Mage::getStoreConfigFlag('mana_filters/display/count')) : ?>
        (<?php echo $_item->getCount() ?>)
    <?php endif; ?>
    </li>
    <?php endforeach ?>
</ol>
<?php echo Mage::helper('mana_core')->getNamedHtml('mana_filters/markup', 'after_items', array('block' => $this)) ?>

I'm not sure whether a simple javascript show/hide is suitable enough and as this is the first time I have tried to tackle a problem like this any pointers would be welcome.

Answer 1

 <?php
    /**
     * @category    Mana
     * @package     ManaPro_FilterColors
     * @copyright   Copyright (c) http://www.manadev.com
     * @license     http://www.manadev.com/license  Proprietary License
     */
    /**
     * Template for showing options for filter as a list of color boxes
     * @author Mana Team
     * Injected instead of standard catalog/layer/filter.phtml in Mana_Filters_Block_Filter_Attribute init() method.
     */
    /* @var $this Mana_Filters_Block_Filter */
    ?>
    <?php echo Mage::helper('mana_core')->getNamedHtml('mana_filters/markup', 'before_items', array('block' => $this)) ?>
    <ol class="m-filter-colors labels <?php echo $this->getFilterClass() ?> <?php echo $this->getFilterOptions()->getIsReverse() ? 'm-reverse' : '' ?>">
        <?php foreach ($this->getItems() as $_item): ?>
          <?php 
$class="";
          if($_item->getMSelected()){ 
$class=str_replace('"','',str_replace('class=','',$this->getListItemClass($_item)));
   } ?>
        <li <?php echo str_replace($class,$class.' listing' , $this->getListItemClass($_item)) ?> >
            <?php if (!$this->getFilterOptions()->getDisableNoResultOptions() || $_item->getCount() || $_item->getMSelected()): ?>
                <a href="#"
                onClick="setLocation('<?php echo $this->urlEscape($_item->getMSelected() ? $_item->getRemoveUrl() : $_item->getReplaceUrl()) ?>');">
                    <div class="m-color <?php if ($_item->getMShowSelected()): ?>selected<?php endif; ?> <?php echo $this->getFilterValueClass($_item) ?>"
                         title="<?php echo $this->escapeHtml($_item->getLabel()) ?> (<?php echo $_item->getCount() ?>)">
                        <div class="m-layer1"></div>
                    </div>
                    <?php echo $this->escapeHtml($_item->getLabel()) ?>
                </a>
            <?php else: ?>
                <a href="javascript:void(0)">
                    <div class="m-color <?php if ($_item->getMShowSelected()): ?>selected<?php endif; ?> <?php echo $this->getFilterValueClass($_item) ?>"
                         title="<?php echo $this->escapeHtml($_item->getLabel()) ?> (<?php echo $_item->getCount() ?>)">
                        <div class="m-layer1"></div>
                    </div>
                    <?php echo $this->escapeHtml($_item->getLabel()) ?>
                </a>
            <?php endif; ?>
            <?php if (Mage::getStoreConfigFlag('mana_filters/display/count')) : ?>
            (<?php echo $_item->getCount() ?>)
        <?php endif; ?>
        </li>



<?php  $i= $i+1;?>
        <?php endforeach ?>
    </ol>
    <?php echo Mage::helper('mana_core')->getNamedHtml('mana_filters/markup', 'after_items', array('block' => $this)) ?>

add script on view.phtml

  <script>
    $$(".listing").each(function(el) {
                el.parentNode.parentNode.parentNode.style.display = 'none';
            });
    </script>