Forum Discussion

Deleted's avatar
Deleted
Apr 17, 2023

Jump to the section collapsible using Javascript (embedded webpart)

Hi all,

 

I tried something, and it almost works, but there is a minor problem. I've used the embedded webpart where I placed my javascript code, and I know that when I add the URL of the collapsible area, it opens in the embedded window rather than going directly to the collapsible section that is indicated. How can I get it to open in the collapsible window rather than the embedded window? perhaps start a new tab? or is it feasible to include the link as a href straight in the description? I've already tried using href in the description, but it's ineffective. Why?

 

 

var items = [
  {
    type: "text",
    title: "Text title",
    description: "<b> uint8Array Text item</b> with description.",
    link: {
      url: "https://support.google.com/webmasters/answer/9012289?hl=en",
      label: "Visit",
      target: "_blank",
    },
    position: {
      left: 100,
      top: 50
    }
  },

 

 

 

 

  • Deleted 

    From the code you provided, it looks like you’re using an object with a link property that has a url, label, and target property. The target property is set to "_blank", which means that the link will open in a new tab.

    If you want the link to open in the same tab instead of a new tab, you can try changing the value of the target property from "_blank" to "_self". This should cause the link to open in the same tab instead of a new tab.

    As for including the link as an href directly in the description, it’s possible that it’s not working because the description is being rendered as text instead of HTML.

    You could try using an HTML element such as a <a> tag with an href attribute to create a clickable link within the description.

     

    Here’s an example of how you could modify your code to open the link in the same tab and include a clickable link within the description:

    ar items = [
      {
        type: "text",
        title: "Text title",
        description: '<b> uint8Array Text item</b> with description. <a href="https://support.google.com/webmasters/answer/9012289?hl=en" target="_self">Visit</a>',
        link: {
          url: "https://support.google.com/webmasters/answer/9012289?hl=en",
          label: "Visit",
          target: "_self",
        },
        position: {
          left: 100,
          top: 50
        }
      },
    ];

     

    In this example, I changed the value of the target property from "_blank" to "_self" so that the link will open in the same tab. I also added an <a> tag with an href attribute and a target attribute to the description property. This creates a clickable link within the description that will open in the same tab when clicked.

     

    I hope this helps!

  • NikolinoDE's avatar
    NikolinoDE
    Gold Contributor

    Deleted 

    From the code you provided, it looks like you’re using an object with a link property that has a url, label, and target property. The target property is set to "_blank", which means that the link will open in a new tab.

    If you want the link to open in the same tab instead of a new tab, you can try changing the value of the target property from "_blank" to "_self". This should cause the link to open in the same tab instead of a new tab.

    As for including the link as an href directly in the description, it’s possible that it’s not working because the description is being rendered as text instead of HTML.

    You could try using an HTML element such as a <a> tag with an href attribute to create a clickable link within the description.

     

    Here’s an example of how you could modify your code to open the link in the same tab and include a clickable link within the description:

    ar items = [
      {
        type: "text",
        title: "Text title",
        description: '<b> uint8Array Text item</b> with description. <a href="https://support.google.com/webmasters/answer/9012289?hl=en" target="_self">Visit</a>',
        link: {
          url: "https://support.google.com/webmasters/answer/9012289?hl=en",
          label: "Visit",
          target: "_self",
        },
        position: {
          left: 100,
          top: 50
        }
      },
    ];

     

    In this example, I changed the value of the target property from "_blank" to "_self" so that the link will open in the same tab. I also added an <a> tag with an href attribute and a target attribute to the description property. This creates a clickable link within the description that will open in the same tab when clicked.

     

    I hope this helps!

    • Deleted's avatar
      Deleted
      Many thanks for your reply. I tried using link properties, but it doesn't work; either it doesn't open a new tab or it opens in the same embedded webpart rather than the collapsible text block. Thank you, the description appears in the new tab. Can you jump to the collapsed text block as well?
      • Deleted's avatar
        Deleted

        NikolinoDEDo you know what it does in the embedded web part when I try to open other links in the same iframe? It doesn't work. I used the given code as above. It works the first time, but not the second time, it hangs.

Resources