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