Accordion in appmaker

Question

I have made an accordion in Google App Maker and it's working fine.

But by defect, the first accordion row shows the detail part... I don't want to show the details unless we specify it (clicking on a "expand" button)

Is that possible? I have tried to do it via css and it doesn't work...

I also have tried this: (widget = expand button)

if (widget.parent.parent.children.Accordion1Detail.visible === false){
  widget.parent.parent.children.Accordion1Detail.visible = true;
} else {
  widget.parent.parent.children.Accordion1Detail.visible = false;
}

Answer 1

Refer this template. It has the example of Accordion Expanded/Not Expanded.

Overall you need to Bind the following onAttach event.

  widget.styles = ['collapsed'];
  widget.getElement().removeAttribute('aria-expanded'); 

Bind the toggleAccordionRow method on onClick() event,

/**
 * Expands an accordion row. 
 * Extends default functionality of the Accordion widget.
 * @param {Widget} accordionRow - accordion row which was clicked.
 */
function expandAccordionRow(accordionRow) {
  var rows = accordionRow.parent.children._values;

  var i = 0;
  for (i = 0; i < rows.length; i++) {
    if (rows[i].name.indexOf('YourElementName') > -1) {
      rows[i].styles = [];
    } else {
      rows[i].styles = ['collapsed'];
    }
  }
  accordionRow.styles = [];
}


/**
 * Collapses an accordion row. 
 * Extends default functionality of the Accordion widget.
 * @param {Widget} accordionRow - accordion row which was clicked.
 */
function collapseAccordionRow(accordionRow) {
  var rows = accordionRow.parent.children._values;

  var i = 0;
  accordionRow.styles = ['collapsed'];

  for (i = 0; i < rows.length; i++) {
    if (rows[i].name.indexOf('YourElementName') > -1) {
      rows[i].styles = ['hidden'];
    }
  }
}


/**
 * Toggles the appearance of an accordion row. 
 * Extends default functionality of the Accordion widget.
 * @param {Widget} accordionRow - accordion row which was clicked.
 */
function toggleAccordionRow(accordionRow) {
  if (accordionRow.styles.length === 0) {
    collapseAccordionRow(accordionRow);
  } else {
    expandAccordionRow(accordionRow);
  }
}