Сообщений в теме: 13

[Steven Vandermeulen]

The accordion functionality is now working as it should, but isn't it possible to display the machines inline instead of block?

[Steven Vandermeulen]

And how do I get the normal layout back on the pages 'Producten' 'Processen' and 'Projecten'? I don't want the accordion to appear there...

[Kess]

We need to create a separate layout for those categories that need an accordion. Go to the folder

media/zoo/applications/jbuniversal/templates/catalog/renderer/subcategory/

and make a copy of _default.php. Name it accordion.php. Then open it and find this line:

<div class="subcategory subcategory-<?php echo $subcategory->alias; ?>">

now add "accordion" class to it so it will be like this:

<div class="accordion subcategory subcategory-<?php echo $subcategory->alias; ?>">

Now go to the settings of a category that should display its subcategories as accordions an choose this new accordion template there:

 

 

Next we need to change JS and CSS:

jQuery(document).ready(function() {
    jQuery(".subcategories .accordion .subcategory-title a").click(function(event){
        event.preventDefault();
        if(jQuery(this).closest('.accordion').find('.subcategory-items').is(':visible') == false) {
            jQuery(".subcategories .subcategory-items").slideUp(600);
        }
        jQuery(this).closest('.accordion').find('.subcategory-items').slideToggle(600);
    });
});

.accordion .subcategory-items {
    display: none;
}

That should work fine.

 

Now, to make subcategory items inline it's enough to add this CSS:

.accordion .subcategory-items > div {
    display: inline-block;
}

or

.accordion .subcategory-items > div {
    float: left;
}

But they will be to close to each other so some margin will help:

.accordion .subcategory-items > div {
    float: left;
    margin-right: 30px;
}

[Steven Vandermeulen]

Thank you so much for your help!