Grapesjs: Collapsed Category in Blocks when Grapes Editor is loaded

Created on 24 Oct 2017 · 7Comments · Source: artf/grapesjs

Hello,
I want all the categories listed in Blocks, must be initially in collapsed condition when the Grapes JS Editor is loaded. How can I do that? Also, if any one category is clicked, all others gets closed just like accordion. Is this possible?

Thanks!

outdated

Source

fzs1994

Most helpful comment

Try with this

const categories = editor.BlockManager.getCategories();
categories.each(category => {
    category.set('open', false).on('change:open', opened => {
        opened.get('open') && categories.each(category => {
            category !== opened && category.set('open', false)
        })
    })
})

artf on 25 Oct 2017

❤5

All 7 comments

Try with this

const categories = editor.BlockManager.getCategories();
categories.each(category => {
    category.set('open', false).on('change:open', opened => {
        opened.get('open') && categories.each(category => {
            category !== opened && category.set('open', false)
        })
    })
})

artf on 25 Oct 2017

❤5

Wow man, Thanks a lot!

Sneak Peak:

:heart_eyes:

fzs1994 on 25 Oct 2017

👍3

awesome 😍

artf on 25 Oct 2017

i know we can add a class for font-awsome etc, but how did you changed it to show previews/custom thumbnails?

andsnake on 10 Apr 2018

Give your custom class and set styles with the background image
Eg Code:

In bm.add block

attributes: {
  class: 'custom-icon flowz-callToAction-style-2',
  title: 'Style 2',
},

and in CSS

.custom-icon {
  padding:0 !important;
  width:100px !important;
  height:50px !important; 
  min-height: auto !important
}
.flowz-callToAction-style-2{
  background:url(screenshots/callToAction/2.jpg) no-repeat;
  background-size:100% 100%
}