<mf-related-keywords-toggle></mf-related-keywords-toggle>

Related keyword custom-element with toggle

Applicable attributes

• body-class-toggle (String) The name of the class to be attached to the body tag

• init-on (Boolean) Toggle on the initial state

• ajax-url (String) ajax Search URL

• head-text (String) Text title of this element Same as mf-related-keywords-toggle’s attributehead-text

DOM structure and class setting

• div.mf_toggle_wrap.mf_finder_relatedkeywords_toggle .mf_toggle_on toggle on state
  • div.mf_toggle_button_wrap
    • a.mf_toggle_button toggle button
      :Click to toggle on/off state, and attribute body-class-toggle will be removed from the body tag.
  • div.mf_toggle_content_wrap
    • div.mf_toggle_content
      • div.mf_finder_relatedkeywords
        • header.mf_finder_relatedkeywords_head
          • Value of attribute head-text (  if empty)
        • ul.mf_finder_relatedkeywords_items
          • li.mf_finder_relatedkeywords_item
            • a.mf_finder_relatedkeywords_item_link
              • span
                • [keyword]

Slot for DOM customization

For the slots, see the description below

• Vue.js Named Slots
• Vue.js Scoped Slots

Slot name head

Properties that can be referenced

• self: an instance of this CUSTOM ELEMENT
• customProp: data returned by the function specified by attribute :custom-prop-func

Same as mf-related-keywords slot head