Is that possible to let sub category like this?

Anonymous

#88421

Hi,

I just purchase this plugin for my website. Is that possible to make this plugin work like this. I need this for lots of sub category. Looking forward your reply. Have a nice day.

Regards,
Edward

Anonymous

#88422

Trevor

#88505

Hi. I think I understand. You want it to stay small and have to click either the field title or the + to open each field to see the options?

It is not possible from within the plugins, but can be achieved if you create custom javascript to add the accordion effect.

It is something we may be considering adding to the next major version of the plugin (V3).

Anonymous

#88743

Hi,

Thanks for your reply. Yes i want + to open sub category. For now your plugin shows main can sub category at the same time. Would you mind sent me the jjavascript code to make it happen? Thanks

Regards,
Edward

Trevor

#88882

This reply has been marked as private.

Anonymous

#89068

Yes that’s great wait for your good new ! Thank You.

Trevor

#89213

Hi

So, two custom files as far as I can see. Custom CSS (note that part of this is commented out, as you will see if you paste the CSS into a code editor, like the one I use [brackets.io]):

/* WP Kraken */
.searchandfilter .sf-level-0 {
	position: relative;
}

.searchandfilter .sf-level-0 input {
	display: none;
}

.searchandfilter .sf-level-0 .sf-label-checkbox {
	display: block;
	cursor: pointer;
	padding-right: 2em;
	padding-left: 0;
	margin: 5px 0 5px 0;
}

.searchandfilter .sf-level-0 .sf-label-checkbox:before {
	font-family: 'FontAwesome';
	content: '';
	position: absolute;
	top: 3px;
	right: 0;
    width: 17px;
    height: 17px;
    font-size: 14px;
	line-height: 1;
	text-align: left;
	transition: all .5s;
	border: 1px solid #000000;
	padding: 1px;
}

.searchandfilter .sf-level-0:hover .sf-label-checkbox:before {
	content: '\f00c';
}

.searchandfilter .sf-level-0.sf-option-active .sf-label-checkbox:before,
.searchandfilter .sf-level-0 > input[checked="checked"] + .sf-label-checkbox:before {
	content: '\f00c';
}

/*.searchandfilter > ul > li > ul {
	overflow: hidden;
	max-height: 0;
	transition: max-height .8s;
}

.searchandfilter > ul > li.active > ul {
	max-height: 3000px;
}*/

.searchandfilter > ul > li > h4 {
	position: relative;
	padding-right: 2em;
	cursor: pointer;
	margin-bottom: 0;
}

.searchandfilter > ul > li > h4 + ul {
	height: 0;
	overflow: hidden;
}

.searchandfilter > ul > li > h4:before {
	font-family: 'FontAwesome';
	content: '\f067';
	position: absolute;
	right: -3px;
	font-size: .9em;
	line-height: 1.6;
	text-align: left;
	transition: all .8s;
	font-weight: initial;
}

.recipe-filter-content.active-1 .searchandfilter > ul > li:nth-child(1) > h4:before,
.recipe-filter-content.active-2 .searchandfilter > ul > li:nth-child(2) > h4:before,
.recipe-filter-content.active-3 .searchandfilter > ul > li:nth-child(3) > h4:before,
.recipe-filter-content.active-4 .searchandfilter > ul > li:nth-child(4) > h4:before,
.recipe-filter-content.active-5 .searchandfilter > ul > li:nth-child(5) > h4:before,
.recipe-filter-content.active-6 .searchandfilter > ul > li:nth-child(6) > h4:before,
.recipe-filter-content.active-7 .searchandfilter > ul > li:nth-child(7) > h4:before,
.recipe-filter-content.active-8 .searchandfilter > ul > li:nth-child(8) > h4:before,
.recipe-filter-content.active-9 .searchandfilter > ul > li:nth-child(9) > h4:before,
.recipe-filter-content.active-10 .searchandfilter > ul > li:nth-child(10) > h4:before,
.recipe-filter-content.active-11 .searchandfilter > ul > li:nth-child(11) > h4:before,
.recipe-filter-content.active-12 .searchandfilter > ul > li:nth-child(12) > h4:before,
.recipe-filter-content.active-13 .searchandfilter > ul > li:nth-child(13) > h4:before,
.recipe-filter-content.active-14 .searchandfilter > ul > li:nth-child(14) > h4:before,
.recipe-filter-content.active-15 .searchandfilter > ul > li:nth-child(15) > h4:before,
.recipe-filter-content.active-16 .searchandfilter > ul > li:nth-child(16) > h4:before,
.recipe-filter-content.active-17 .searchandfilter > ul > li:nth-child(17) > h4:before,
.recipe-filter-content.active-18 .searchandfilter > ul > li:nth-child(18) > h4:before,
.recipe-filter-content.active-19 .searchandfilter > ul > li:nth-child(19) > h4:before,
.recipe-filter-content.active-20 .searchandfilter > ul > li:nth-child(20) > h4:before,
.recipe-filter-content.active-21 .searchandfilter > ul > li:nth-child(21) > h4:before,
.recipe-filter-content.active-22 .searchandfilter > ul > li:nth-child(22) > h4:before,
.recipe-filter-content.active-23 .searchandfilter > ul > li:nth-child(23) > h4:before,
.recipe-filter-content.active-24 .searchandfilter > ul > li:nth-child(24) > h4:before,
.recipe-filter-content.active-25 .searchandfilter > ul > li:nth-child(25) > h4:before,
.recipe-filter-content.active-26 .searchandfilter > ul > li:nth-child(26) > h4:before,
.recipe-filter-content.active-27 .searchandfilter > ul > li:nth-child(27) > h4:before,
.recipe-filter-content.active-28 .searchandfilter > ul > li:nth-child(28) > h4:before,
.recipe-filter-content.active-29 .searchandfilter > ul > li:nth-child(29) > h4:before,
.recipe-filter-content.active-30 .searchandfilter > ul > li:nth-child(30) > h4:before{
	content: '\f068';
}

.recipe-filter-content.active-1 .searchandfilter > ul > li:nth-child(1) > h4 + ul,
.recipe-filter-content.active-2 .searchandfilter > ul > li:nth-child(2) > h4 + ul,
.recipe-filter-content.active-3 .searchandfilter > ul > li:nth-child(3) > h4 + ul,
.recipe-filter-content.active-4 .searchandfilter > ul > li:nth-child(4) > h4 + ul,
.recipe-filter-content.active-5 .searchandfilter > ul > li:nth-child(5) > h4 + ul,
.recipe-filter-content.active-6 .searchandfilter > ul > li:nth-child(6) > h4 + ul,
.recipe-filter-content.active-7 .searchandfilter > ul > li:nth-child(7) > h4 + ul,
.recipe-filter-content.active-8 .searchandfilter > ul > li:nth-child(8) > h4 + ul,
.recipe-filter-content.active-9 .searchandfilter > ul > li:nth-child(9) > h4 + ul,
.recipe-filter-content.active-10 .searchandfilter > ul > li:nth-child(10) > h4 + ul,
.recipe-filter-content.active-11 .searchandfilter > ul > li:nth-child(11) > h4 + ul,
.recipe-filter-content.active-12 .searchandfilter > ul > li:nth-child(12) > h4 + ul,
.recipe-filter-content.active-13 .searchandfilter > ul > li:nth-child(13) > h4 + ul,
.recipe-filter-content.active-14 .searchandfilter > ul > li:nth-child(14) > h4 + ul,
.recipe-filter-content.active-15 .searchandfilter > ul > li:nth-child(15) > h4 + ul,
.recipe-filter-content.active-16 .searchandfilter > ul > li:nth-child(16) > h4 + ul,
.recipe-filter-content.active-17 .searchandfilter > ul > li:nth-child(17) > h4 + ul,
.recipe-filter-content.active-18 .searchandfilter > ul > li:nth-child(18) > h4 + ul,
.recipe-filter-content.active-19 .searchandfilter > ul > li:nth-child(19) > h4 + ul,
.recipe-filter-content.active-20 .searchandfilter > ul > li:nth-child(20) > h4 + ul,
.recipe-filter-content.active-21 .searchandfilter > ul > li:nth-child(21) > h4 + ul,
.recipe-filter-content.active-22 .searchandfilter > ul > li:nth-child(22) > h4 + ul,
.recipe-filter-content.active-23 .searchandfilter > ul > li:nth-child(23) > h4 + ul,
.recipe-filter-content.active-24 .searchandfilter > ul > li:nth-child(24) > h4 + ul,
.recipe-filter-content.active-25 .searchandfilter > ul > li:nth-child(25) > h4 + ul,
.recipe-filter-content.active-26 .searchandfilter > ul > li:nth-child(26) > h4 + ul,
.recipe-filter-content.active-27 .searchandfilter > ul > li:nth-child(27) > h4 + ul,
.recipe-filter-content.active-28 .searchandfilter > ul > li:nth-child(28) > h4 + ul,
.recipe-filter-content.active-29 .searchandfilter > ul > li:nth-child(29) > h4 + ul,
.recipe-filter-content.active-30 .searchandfilter > ul > li:nth-child(30) > h4 + ul {
	height: auto;
}

And the Custom javascript:

(function( $ ) {
	"use strict";

	var $container = $( '.recipe-filter-content' );

	if ( $container.length > 0 ) {

		$container.addClass( 'active-1' );

		$container.on( 'click', '.searchandfilter > ul > li > h4', function(){

			var $button                = $( this ),
				$checkboxes_list       = $button.closest( 'li' ),
				_checkboxes_list_index = $checkboxes_list.index(),
				_class                 = 'active-' + ( _checkboxes_list_index + 1 );
			
			if ( $container.hasClass( _class ) ) {
				$container.removeClass( _class );
			} else {
				$container.addClass( _class );
			}
		});
	}
})( jQuery );

Beyond that, I can’t help much more. If you want to employ someone to do this, the other user used Mateusz at WP Kraken.

[Author]

Posts