Custom Option linking / Target Selector option

Ideas
1

While I’ve been developing a site, I created a custom menu using collapse. It works similar to how an Accordion works.

In order to show the menu, I have to manually enter the show class in the <div> that contains the collapse class.

I’ve added a custom option to <div id="#exampleCollapse">. However, I was thinking it would make more sense to place it on the <button> and then it adds the show class to the <div id="#exampleCollapse">.

I’m looking to hope this can bring linking to custom options or allow a way to define custom “Accordion”, “Collapse”, “Dropdown” to certain elements and have them behave as such.

I feel like adding a “relationship” option would be helpful to the Custom Options and it links the two items together.

Such as:
“Add Relationship”

  1. Name: Custom Collapse
  2. Tooltip: “Enabled the custom collapse dropdown”
  3. Action: Add Class Name
  4. Class Name: show
  5. Attribute: data-bs-target
  6. ID: exampleCollapse

It will then link the data-bs-target and ID together.

Custom Collapse Code:

<div> <!-- Start of Custom Collapse -->

    <div> <!-- Controller  -->
        <ul class="nav flex-column">
            <li class="nav-item">
                <!--  Custom Option should be added here, because this is what's selectable first. -->
                <button class="nav-link collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#exampleCollapse">Custom Dropdown</button> 
            </li>
        </ul>
    </div>

    <!-- Should add `show` to the class list from the Custom Option or "Toggle Target" from the Options Pane -->
    <!-- I have added a Custom Option to this section, but it's not the first item selectable in the Stage -->
    <div id="#exampleCollapse" class="collapse">  <!-- Dropdown -->
        <div class="card">
            <div class="card-body p-2">
                <ul class="nav flex-column">
                    </li class="nav-item">
                        <a href="#" class="nav-link">Example Link</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</div>
2

Thank you for sharing your suggestion! This is an interesting idea, but we’ll need to see more demand for it before committing since it’s very specific for this particular use case. If others would like to see it, write in this thread.

1 Like
3

@GregoryAM

Unfortunately, if you’re going to be building your own Accordian, Collapse etc.. and not follow similiarly the prebuilts, you should script it yourself, it’s probably be easier to get it to do what you want.
The reason is that the predefined is based on the included scripting and it’s powerfull but static, not all things can be on the fly magically find it.
Essentially the prebuilt Accordian and Collapse etc.. are constructed in a manner to make it so the script can easliy and quickly find what happened and what child or sibling element do I effect.

Strictly based on your example, the devs would have to create a custom script that tranversed the DOM all the way up and then all the way down until it finds the element to act upon.
For it to be efficient it needs to have a transversal cap which is essentially similar to the prebuilt I would believe.
It either finds the sibling to it or finds the child of defined parent.
…
I think it would make more sense if it changed the state of a data-bs atrribute rather than remove an add a class.

Saj