How to Create a Button with Two Selection Levels

#1

tiddlers.json (3.0 KB)

Hello everyone.

I’m trying to create a menu with submenus using buttons. The reason is to have different tools grouped together in the tiddler editing menu to make it easier to create and modify tiddlers. For example, grouping the different types of admonitions, bagels, cards, etc. under a single button.

I’ve been trying with Chat GPT and Gemini and I’ve gotten somewhere, but I can’t get any further. I have a button with two options, and within those options, I can choose suboptions. The thing is, in the options tiddler, if I select the button, I can see the suboptions, but if I go to the main “Menu” button, I can only see the options when I select it. Selecting any of them doesn’t show the suboptions. Well, actually, I can, but in the tiddler corresponding to those options.
Does anyone know how to fix this? If it’s possible…
I’ll leave you the tiddlers I’m using so you can see what I’ve achieved.

Best regards.

#2

Hi @JuanPalomo

First thing: while ChatGPT and other LLMs may be somewhat helpgul for providing programming “clues”… they are notoriously bad at generating code that actually works, and is usually take more effort to fix the suggested code than to learn how to write your own code from the start.

Now… on to your specific issues, which we’ll tackle one at a time:

You are using combined $button/$reveal widgets to display popup content that contains more $button widgets. By default, when you click on popup content (such as a $button), the button is handled and the popup is immediately closed. However, for your use case, you don’t want that popup to be closed. Instead, you want a second-level popup to appear. Fortunately, it is actually easy to prevent the popup from being closed, simply by adding a special classname to the popup contents: tc-popup-keep. This classname tells the TWCore to allow clicks within the popup to be processed without closing the containing popup. Thus, in your “MenuContainer” tiddler, you should change

<div class="tc-drop-down">

to

<div class="tc-drop-down tc-popup-keep">

The next problem is that the display of the “MenuItemA” and “MenuItemB” popups are very hard to read because they don’t have any enclosing border/background styles, so they get mixed in with whatever content they are on top of. Again, it is easy to fix this in “MenuItemA” and “MenuItemB” by changing this:

<div class="tc-submenu" style="padding-left:1em;">

to

<div class="tc-drop-down">

These two small changes should get you further along in your efforts. Let me know how it goes…

enjoy,
-e