A lot of checkbox or radio button: Show more / Show less

Anonymous

#220939

Hi,

Do you know if it is possible to put “Show more/Show less” button when we have a lot of options on a filter (checkbox)?

Default view:
☐ Value 1
☐ Value 2
☐ Value 3
+ Show more

At the click of the button:
☐ Value 1
☐ Value 2
☐ Value 3
☐ Value 4
☐ Value 5
☐ Value 6
☐ Value 7
+ Show less

Thanks. 🙂

Trevor

#220946

This is not possible from the settings available in the current version of the plugin, but may well become available in V3 (sorry, I have no ETA for this). It might be possible with custom JavaScript, but I have no snippets to share with you.

Anonymous

#220953

Ok, so I’m going to make a script for that.
Thank you!

I look forward to this V3!

Trevor

#220959

Thanks for getting back to me. If you get it working, would you be willing/able to share your solution here?

Anonymous

#221046

With pleasure !
The development of the project has not started yet, I will come to share it in a few weeks. 😉

Trevor

#221048

Great, I will leave the thread open and wait to hear from you.

Anonymous

#221050

Would love to see the JavaScript for this if possible (when done) Nicolas, thanks 🙂

Anonymous

#226499

Hi Trevor, Jordan,
The development of the project is underway, I should come back to you very soon! 🙂

Trevor

#226503

I look forward to hearing from you.

Anonymous

#226730

Hi Trevor, Jordan,

As promised, here is a functional code that allows you to dynamically display the More / Less buttons. 🙂
Just change the “limit” variable to choose the maximum number of items to display.

jQuery:

(function ($) {
	"use strict";

	var $target = $('[data-sf-field-input-type="radio"], [data-sf-field-input-type="checkbox"]'),
		more_txt = '+ Show more',
		less_txt = '– Show less',
		items_expand = [];

	$(document).on('sf:init sf:ajaxfinish', '.searchandfilter', function() {
		$target.each(function(index, element) {
			// Variables
			var $el = $(element),
				item_total = $el.find('li').length,
				limit = 5,
				li_height = 0;

			if( item_total > limit) {
				// Collapse and add "Show more" button
				$el.addClass('sf-field-collapse').append('<div class="show-more-less">' + more_txt + '</div>');

				// Get height of each <li>...
				$el.find('li:lt(' + limit + ')').each(function() {
					li_height += $(this).outerHeight(true);
				});

				// ...and set total height on <ul>
				$el.find('ul').css('height', li_height);
			}
		});

		// Re-expand if previously opened
		$.each(items_expand, function(index, value) {
			var index_child = value + 1,
				$el_expand = $('.searchandfilter > ul > li:nth-child('+ index_child + ')');

			$el_expand.removeClass('sf-field-collapse').addClass('sf-field-expand');
			$el_expand.find('.show-more-less').text(less_txt);
		});
	});

	$('body').on('click', '.show-more-less', function() {
		var $btn = $(this),
			$parent = $btn.closest('li'),
			parent_index = $parent.index();

		if( $parent.hasClass('sf-field-collapse') ) { // Expand
			$parent.removeClass('sf-field-collapse').addClass('sf-field-expand');
			$btn.text(less_txt);

			// Add index in array
			items_expand.push(parent_index);
		} else { // Collapse
			$parent.addClass('sf-field-collapse').removeClass('sf-field-expand');
			$btn.text(more_txt);

			// Remove index in array
			items_expand = $.grep(items_expand, function(value) {
				return value != parent_index;
			});
		}
	});
}(jQuery));

CSS

.sf-field-collapse {
	ul {
		overflow-y: hidden;
	}
}
.sf-field-expand {
	ul {
		height: auto !important;
		overflow-y: auto !important;
	}
}
.show-more-less {
	display: inline-block;
	margin-top: 0.5em;
	font-size: 0.8rem;
	color: blue;
	cursor: pointer;
}

Enjoy! 🙂

[Author]

Posts