Code snippet: Reducing the amount of visible Collapsible pills in JavaScript

Background

User insight is an application (PWA) that allows users to create and share surveys. The app has unique features such as a customisable interface, video and audio question types, geotags and powerful admin settings. The data submitted by customers is then collected and can be analysed and reviewed by the admin or used for marketing purposes. 

The Issue

In the backend admin, surveys are grouped by project. When viewing a project, all of its containing surveys were displayed in the table. These surveys are displayed using pills, styled this way using Tailwind. The issue we were having is that on this table, some projects contained too many surveys, which made this page look convoluted.

The Proposed Solution

The solution we decided on, is to collapse the list of surveys to only show 6 items initially, and then include a button to display the rest. The challenge here lies in including the survey count in the button, to expand the list.

Implementing the Solution

let remainingPills = surveyPills.slice(6, surveyPills.length);

remainingPills.each(function () {
	$(this).hide();
})

let expandButton = '<span class="px-2 m-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 expand-pills"><a href="#">+' + eval(surveyPills.length - 6) + '</a></span>';

$(surveyPills[5]).after(expandButton);

let expandPill = pillsCell.find('.expand-pills');
let collapsePill = pillsCell.find('.collapse-pills');

expandPill.click(function () {
	expandPill.hide();
	collapsePill.css('display', 'inline-flex');
	remainingPills.each(function () {
		$(this).show();
	})

	collapsePill.click(function () {
		collapsePill.hide();
		remainingPills.each(function () {
			$(this).hide();
		})
		expandPill.show();
	})
})

Now I will break down this solution;

Step 1

The first step was taking all of the surveys after the 6th one, and hiding them:

let remainingPills = surveyPills.slice(6, surveyPills.length);

remainingPills.each(function () {
	$(this).hide();
})

This ensures that only the first six appear on page load

Step 2

The second step was to create the button to expand the number of surveys displayed:

let expandButton = '<span class="px-2 m-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 expand-pills"><a href="#">+' + eval(surveyPills.length - 6) + '</a></span>';

$(surveyPills[5]).after(expandButton);

This creates the button with html, and includes the number of hidden surveys. The number is calculated by getting the total length of the surveyPills array, and subtracting 6.

This is then appended to the 6th item (index of 5) in the surveyPills array of html objects.

Step 3

The third step is to handle what happens when clicking the expand and collapse buttons:

let expandPill = pillsCell.find('.expand-pills');
let collapsePill = pillsCell.find('.collapse-pills');

expandPill.click(function () {
	expandPill.hide();
	collapsePill.css('display', 'inline-flex');
	remainingPills.each(function () {
		$(this).show();
	})

	collapsePill.click(function () {
		collapsePill.hide();
		remainingPills.each(function () {
			$(this).hide();
		})
		expandPill.show();
	})
})

The first step is to select the expand and collapse buttons from the html DOM.

Then on the expand button, add a click event listener. Upon clicking this button, it'll call .show() on the rest of the survey pills. The collapse button has a similar click event that does the opposite.

Here is the outcome!