NEW Sidebar FAQ
      Back to home
      1. Cidi Labs Help Center
      2. DesignPLUS
      3. NEW Sidebar FAQ

      How do I create a link in DesignPLUS that jumps back to the top of a set of Tabs?

      A link can target any element on a page with an ID. Some DesignPLUS elements have IDs by default, and you can add/modify IDs with the Sidebar.

      If you're using Accordions, Expanders, or Tabs in DesignPLUS, you can link directly to a specific panel and its content.

      Example use cases:

      • If you have a page that uses a tabbed interface with longer chunks of content, you may want to create "Back to the Top" buttons at the bottom of each Tab panel that, when selected, will bring viewers back to the top of the current tab I have open on the page.
      • If you want to create a "View Next Tab" link at the bottom of each Tab's content that launches the next tab in the series, without them returning to the top.
      • If you've used an Accordion or Expander to provide chunks of information in collapsed panels, you may want to create a link that leads not just to the page where the accordion/expander resides, but instead to load and focus on a specific panel of content. (Want to see how this works? This link will load a specific Expander panel, inside a Tab panel, in our user guide.)

      Linking to a Specific ID

      A link can target any element on a page with an ID. By default, Tabs have IDs dynamically assigned to them when the page is created so that they can be copied/pasted/duplicated without IDs being duplicated.

      To establish the ID, you can either:

      1. Use your web browser to Inspect the tab heading on the rendered page to find out what ID is being assigned. This will be dpPanel# where # is the number of the panel as it was created.
      2. Use the Attributes tool in the Sidebar to view or assign an ID to the Panel Group div that wraps that panel in the editor. Example: myUniqueId. Note: IDs cannot have spaces and should not start with a number.
      Once you know the ID, create a link, but instead of putting a web address, you will add a # followed by the ID. So, using our example above it would be #myUniqueId, or if you want to see the wider link HTML, here are two examples:

      If you're linking to an ID from within the same page:

      <a href="#myUniqueId">Go to top of tab</a>

      If you're linking to an ID on another page:

      You'll include the entire URL for the page, and append the ID to the end, as shown below. 
      <a href="https://domain.com/page#myUniqueId">Example</a>
      This also allows you to share the link to a specific panel in any context. You might include it in an email, in a Canvas Announcement, etc.