add custom value for show() function for p5.Elements #7388

Increasing access

we could deal with flex-type elements, and be able to toggle there visibility with a simple show('flex'). Or with a combined use with hide(), store the initial display value in p5.Element memory and re-use it when calling show() on same element.

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

Feature enhancement details

p5.Element.prototype.show = function (value = 'block') {
  // List of valid CSS display values
  const validDisplayValues = [
    'block', 'inline', 'inline-block', 'flex', 'inline-flex', 'grid',
    'inline-grid', 'table', 'table-row', 'table-cell', 'contents', 'list-item', 
    'none', 'initial', 'inherit', 'unset', 'run-in', 'ruby', 'ruby-base', 
    'ruby-text', 'ruby-base-container', 'ruby-text-container'
  ];

  if (validDisplayValues.includes(value)) {
    this.elt.style.display = value;
  } else {
    console.error(`Invalid value for displaying element: "${value}"`);
  }

  return this;
};

Start by locating p5.Element.prototype.show and the related hide implementation in the DOM element code. Review existing tests for p5.Element visibility behavior, then clarify whether the feature should accept a supplied CSS display value, restore the prior display value after hide(), or support both; done means the chosen behavior works for flex elements and is covered by tests.