Перейти к содержимому


Фотография
- - - - -

Accordion in subcategories


Лучший Ответ Kess , 08 July 2014 - 23:42

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:

 

ose_200x0.png

 

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;
}
Перейти к сообщению


  • Закрытая тема Тема закрыта
Сообщений в теме: 13

#11 Steven Vandermeulen

Steven Vandermeulen

Отправлено 08 July 2014 - 08:43

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


  • 0

#12 Steven Vandermeulen

Steven Vandermeulen

Отправлено 08 July 2014 - 09:54

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...


  • 0

#13 Kess

Kess

Отправлено 08 July 2014 - 23:42   Лучший Ответ

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:

 

ose_200x0.png

 

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;
}

  • 0

#14 Steven Vandermeulen

Steven Vandermeulen

Отправлено 09 July 2014 - 08:04

Thank you so much for your help! 


  • 0




Click to return to top of page in style!