Issue #446Opened October 24, 2017by fzs199411 reactions

Collapsed Category in Blocks when Grapes Editor is loaded

Question

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?

image

Thanks!

Answers (3)

artfOctober 25, 20175 reactions

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)
        })
	})
})
fzs1994October 25, 20173 reactions

Wow man, Thanks a lot!

Sneak Peak: image :heart_eyes:

faizansaiyedApril 10, 20183 reactions

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

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.