How can I use a toggle or button to hide/show a multilist?

Help
1

What I’m trying to do

Big picture: I would like a way to have a dynamic multi-select picklist for a frontmatter field that only displays the options when I am editing it, not all the time (it is very long). By dynamic, I mean that if the option I want isn’t already there, I can add it.

What I have been able to get working is using a configuration note which contains all the options, then code in the main body of a templater template that reads the note and presents it as a meta bind multiselect. My selections get accurately reflected in the frontmatter.

However, the pick list is very long. I would like to be able to show/hide the pick list using some type of control (toggle, button, hover, etc.).

Things I have tried

  1. This successfully reads the note and allows me to pick, but doesn’t have the toggle:
const relatedParts = dv.page("Configuration/RelatedParts.md").file.lists.text;
let options = relatedParts.map(item => `option(${JSON.stringify(item)}, ${JSON.stringify(item)})`).join(",");
let output = `
~~~meta-bind
INPUT[multiSelect(${options}):related_parts]
~~~
`
dv.paragraph(output);
  1. Tried using metabind to accomplish this, for example:
INPUT[toggle:show_parts]

if(show_parts) {
  INPUT[multiSelect(option(Toolhead), option(Nozzle), option(Bed), option(Stepper Motor), option(Fan)):related_parts]
}
  1. Tried adding a toggle like this:
    INPUT[toggle:show_related_parts_options]
const showRelatedParts = dv.current().show_related_parts_options;
if (showRelatedParts) {
	const relatedParts = dv.page("Configuration/RelatedParts.md").file.lists.text;
	let options = relatedParts.map(item => `option(${JSON.stringify(item)}, ${JSON.stringify(item)})`).join(",");
	let output = `
	~~~meta-bind
	INPUT[multiSelect(${options}):related_parts]
	~~~
	`
	dv.paragraph(output);
}
  1. Tried doing it this way:

<mb:bool field=“show_related_parts_options” label=“Show Part Picker” />

<%*
const file = await app.vault.getAbstractFileByPath(“3D Printing/Configuration/RelatedParts.md”);

// Optional: keep this if you want to read the full file as text
const content = await app.vault.read(file);

// Pull the array from the frontmatter
const parts = app.metadataCache.getFileCache(file)?.frontmatter?.parts || ;

if (tp.frontmatter.show_related_parts_options) {
const options = parts.map(p => "${p}").join(", ");
tR += <mb:multi-select field="related_parts" options='[${options}]' label="Select Related Parts" />\n;
} else {
tR += “Selected Related Parts:\n”;
const selected = tp.frontmatter.related_parts || ;
if (selected.length > 0) {
selected.forEach(p => {
tR += - ${p}\n;
});
} else {
tR += “- (None selected)\n”;
}
}
%>

I think if I can be shown how to get a UI element like a toggle to show/hide the pick list, I can work everything else out.

Any suggestions?

4

Eventually, I’ll figure out the formatting and I won’t have to keep deleting the replies. I have found a way to achieve the desired result using the details/summary HTML capability.

```dataviewjs
const relatedParts = dv.page("Configuration/RelatedParts.md").file.lists.text;
let options = relatedParts.map(item => `option(${JSON.stringify(item)}, ${JSON.stringify(item)})`).join(",");
let output = `
<details>
  <summary>Select Related Parts</summary>

~~~meta-bind
INPUT[multiSelect(${options}):related_parts]
~~~
  
</details>
`;
dv.paragraph(output);
```