// Copy this function onto any page on which you need a  Show More and follow the instructions below. Notice that this is outside of the onReady callback.
	/**
         * Make a Show More from two groups containing buttons. The first button found in each 
         * group will be used as the "Show More" / "Show Less". It can have any text.
         *
	 * @param {string} collapsedGroup: the selector of the group which represents the "collapsed" 
         *               or "less" content. Must include the # before the id name.
         * @param {string} expandedGroup: the selector of the group which represents the "expanded"
         *               or "more" content.  Must include the # before the id name.
	*/
const makeShowMoreHTML = (collapsedGroup, expandedGroup) => {
	if (!$w(collapsedGroup).id || !$w(expandedGroup).id) {
		console.error(`One of your IDs doesnt exist: ${collapsedGroup}, ${expandedGroup}`);
	 	return;
	 }
	 $w(expandedGroup).collapse();
	 const collapsedButton = $w(collapsedGroup).children.find((child) => {
		return child.type === '$w.Button';
	 });
	const expandedButton = $w(expandedGroup).children.find((child) => {
		return child.type === '$w.Button';
	 });
	collapsedButton.onClick((e) => {
		$w(collapsedGroup).collapse().then(() => {
			$w(expandedGroup).expand();
		});
	});
	expandedButton.onClick((e) => {
		$w(expandedGroup).collapse().then(() => {
			$w(collapsedGroup).expand();
		});
 
	});
};
 
$w.onReady(function () {
	/**
	 *  Copy below to make a show more button and place it inside an onReady function as this one is.
	 * 1. Make two groups, a collapsed, and an expanded group, both with a single button, each.
	 * 1.5 MAKE SURE buttons, text, and groups have no animations, and are not set to be "hidden" or "collapsed" on load under properties or options.
	 * 2. Align the two, one on top of the other, so the text lines up.
	 * 3. Add the ids below, first is the "collapsed" group id with the "read more" button, second is the "expanded" group id with the "read less" button
	*/
 
	makeShowMoreHTML('#group3', '#group1'); // <-- this is where we apply the function to our two groups, first the 
});