https://bizspot.ai/js/demo.js

1(function() {
2	var titles = ['Quod eligendi',
3							 'Aliquid ratione',
4							 'Dolorem delectus',
5							 'Odio quas',
6							 'Blanditiis possimus',
7							 'Obcaecati doloremque'];
8
9	var paragraphs = [
10		'Incidunt illum accusantium deserunt eius consequatur corporis repellat nesciunt et, unde esse. Maxime dolores, veniam vel eos aut culpa perferendis sint voluptas.',
11		'Unde, in, amet asperiores voluptates eaque repudiandae, maiores vero reiciendis expedita similique ullam qui facilis tempore debitis. Aliquam deleniti quae voluptas laboriosam.',
12		'Tempora ea nisi delectus ipsam facere vero eaque, quia quaerat ipsa at earum amet voluptatum praesentium veniam voluptate reiciendis libero officiis officia?'
13	];
14
15	document.querySelectorAll('.add-item').forEach(function(button) {
16		button.addEventListener('click', addItem);
17	});
18
19	document.querySelectorAll('.remove-item').forEach(function(button) {
20		button.addEventListener('click', removeItem);
21	});
22
23	function createBlock() {
24		var blockTemplate = document.createElement('div');
25		blockTemplate.classList.add('block');
26		blockTemplate.innerHTML =
27			'<div class="block__title">' +
28				'<h3>' + titles[Math.floor(Math.random() * 6)] + '</h3>' +
29			'</div>' +
30			'<div class="block__content">' +
31				'<p>' + paragraphs[Math.floor(Math.random() * 3)] + '</p>' +
32			'</div>';
33
34			return blockTemplate;
35	}
36
37	function addItem(event) {
38		var target = document.querySelector(event.target.dataset.target);
39
40		var newBlock = createBlock();
41
42		target.appendChild(newBlock);
43
44		new Collapsible({
45			node: newBlock,
46			eventNode: '.block__title',
47			isCollapsed: true,
48			expandCallback: logCallback,
49			collapseCallback: logCallback
50		});
51	}
52
53	function removeItem(event) {
54		var target = document.querySelector(event.target.dataset.target);
55
56		var lastBlock = target.querySelector('.block:last-of-type');
57
58		lastBlock && target.removeChild(lastBlock);
59	}
60
61	// Init Collapsible for categories and blocks on page load
62	var categories = document.querySelectorAll('.category'),
63			blocks = document.querySelectorAll('.block'),
64			log = document.querySelector('.log');
65
66	new Collapsible({
67			node: blocks,
68			eventNode: '.block__title',
69			isCollapsed: true,
70			expandCallback: logCallback,
71			collapseCallback: logCallback
72		}
73	);
74
75	new Collapsible({
76			node: categories,
77			eventNode: '.category__title',
78			isCollapsed: false,
79			observe: true,
80			expandCallback: logCallback,
81			collapseCallback: logCallback,
82			mutationCallback: logCallback
83		}
84	);
85
86	// Listen to 'toggle' event
87	categories.forEach(function(category) {
88		category.addEventListener('toggle', function(event) {
89			console.log('Toggle event triggered:', event);
90		});
91
92		category.addEventListener('mutate', function(event) {
93			console.log('Mutate event triggered:', event);
94		});
95	})
96
97	// The callback used in options
98	function logCallback(event) {
99		console.log('Callback triggered:', this, event);
100		log.value = event.detail.action + ' ' +
101			(event.type === 'toggle'
102				? this.node.classList[0]
103				: this.node.classList[1])
104			+ '\n' + log.value;
105	}
106})();