<mf-keyword-ranking-toggle></mf-keyword-ranking-toggle>

Keyword ranking 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)
  Set text title of this ELEMENT
  Same as mf-keyword-ranking’s attributehead-text

DOM structure and class settings

• div.mf_toggle_wrap.mf_finder_keywordranking_toggle .mf_toggle_on Toggle on
  • div.mf_toggle_button_wrap
    • a.mf_toggle_button toggle button
      :Click here 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_keywordranking (empty if there is no keyword ranking)
          • header.mf_finder_keywordranking_head
            • Value of attribute head-text ( if empty)
          • ol.mf_finder_keywordranking_items
            • li.mf_finder_keywordranking_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-keyword-ranking slothead