How to: Add a Collapsible and Expandable Section

Artykuł
04/29/2013

You can add collapsible and expandable sections to a content element. A collapsible section temporarily hides part of the content element when you click the section title. When collapsed, the section title is visible but the content is hidden. If you click the title again, the hidden content reappears. You can also collapse and expand a section by clicking the heading and then pressing the Enter key. You add collapsible sections when you want the user to select the amount of documentation that appears in the Help viewer.

To add a collapsible and expandable section, you add a function that runs when you click the section title. The Microsoft Dynamics AX Help documentation uses a Jscript function named ExpandCollapse. You can find the function in a file that is named script_manifold.js. This file and the other files that are used to add collapsible and expandable sections are found in the following folder of the Help server:

C:\inetpub\wwwroot\DynamicsAX6HelpServer\Content\Microsoft\EN-US\Local\

You may want to copy the Local folder to the folder where you publish your content. This makes it easier to specify names and locations for the Jscript and image files you will use. The following steps describe how to add a collapsible and expandable section.

To Add a Collapsible and Expandable Section

Add a <script> element to the <head> of the HTML document. Use the attributes of the <script> element to add a reference to the file that contains the ExpandCollapse function. The following table shows the attributes and values that you use to add the reference to the script_manifold.js file.

Attribute	Value
type	text/javascript
src	Specify the location of the script_manifold.js file. Typically, you use a relative path. A relative path specifies how to get from the folder where the content element is published to the location of the script_manifold.js file.

type

text/javascript

src

Specify the location of the script_manifold.js file.

Typically, you use a relative path. A relative path specifies how to get from the folder where the content element is published to the location of the script_manifold.js file.

The following code example adds the <script> element. Notice how the src attribute specifies the relative path of the script_manifold.js file. In this example, the folder that contains this content element and the local folder will have a common parent folder. You might have to change the src value to reflect the location of these files on your Help server.

    <script type="text/javascript" src="../local/script_manifold.js"></script>

Add two <img> elements to the <body> of the HTML document. You use the images to help identify collapsible and expandable sections. Use the collapse_all.gif and expand_all.gif images from the local folder. The following table shows the attributes and values that you use to add the images.

Attribute	Value
id	Specify collapseImage for one <img> and expandImage for the second <img> element.
style	display:none
height	0
width	0
src	Specify the location of the image file. Use collapse_all.gif for the element that has the id of collapseImage. Use expand_all.gif for the element that has the id of expandImage. Typically, you use a relative path. A relative path specifies how to get from the folder where the content element is published to the location of the image file.

The following code example adds two <img> elements. Notice how the src attributes specify the relative path of each image file. In this example, the folder that contains this content element and the local folder will have a common parent folder. You might have to change the src value to reflect the location of these files on your Help server.

    <img id="collapseImage" style="display:none; height:0; width:0;" src="../local/collapse_all.gif" alt="" title="" />
    <img id="expandImage" style="display:none; height:0; width:0;" src="../local/expand_all.gif" alt="" title="" />

Add an <h1> element to the <body> of the HTML document. Use the <h1> element to add the section title.

The following code example adds the <h1> element. The section will have the title Collapsible section heading. You may notice that the <h1> element includes a class attribute. The value of class specifies style information for the title.

    <h1 class="heading">Collapsible section heading</h1>

Add a <span> element after the <h1> element from the previous step. Add <span> and </span> so that it surrounds the text you specified for the section title.

Add attributes to the <span> element that associate functions from the script_manifold.js file together with onclick and onkeypress events. The following table shows the attributes and values that you use to specify the events and functions.

Attribute

Value

onclick

ExpandCollapse(imageItem)

style

cursor:default;

onkeypress

ExpandCollapse_CheckKey(imageItem, event)

tabindex

0

The following code example adds the <span> element. Notice how the values of the onclick and onkeypress attributes specify functions. Also notice how the <span> includes the Collapsible section heading text from the example in the previous step.

Attribute	Value
onclick	ExpandCollapse(imageItem)
style	cursor:default;
onkeypress	ExpandCollapse_CheckKey(imageItem, event)
tabindex	0

    <h1 class="heading">
    <span onclick="ExpandCollapse(imageItem)" style="cursor:default;" onkeypress="ExpandCollapse_CheckKey(imageItem, event)" tabindex="0">Collapsible section heading</span>
    </h1>

Add an <img> element after the <span> element from the previous step. The image will appear in the Help viewer next to the section title and shows that the section is collapsible. Use the collapse_all.gif that is used by existing content elements.

To add the image, you add attributes and values to the <img> element that specify the file that contains the image. The following table shows the attributes and values that you use for the collapsible section image.

Attribute	Value
id	Specify a value that uniquely identifies this element.
class	toggle
name	toggleSwitch
src	Specify the location of the collapse_all.gif file. Typically, you use a relative path. A relative path specifies how to get from the folder where the content element is published to the location of the collapse_all.gif file.

The following code example adds the <img> element. Notice how the src attribute specifies the relative path of the collapse_all.gif file. In this example, the folder that contains this content element and the local folder will have a common parent folder. You might have to change the src value to reflect the location of these files on your Help server.

    <h1 class="heading">
    <span onclick="ExpandCollapse(imageItem)" style="cursor:default;" onkeypress="ExpandCollapse_CheckKey(imageItem, event)" tabindex="0">
    <img id="sectionToggle0" class="toggle" name="toggleSwitch" src="../local/collapse_all.gif" />
    Collapsible section heading</span>
    </h1>

Update the parameter values of the ExpandCollapse and ExpandCollapse_CheckKey functions that you added to the <span> element. Replace the existing value with the value of the id attribute from the <img> element that you added in the previous step.

The ExpandCollapse_CheckKey function also includes a second parameter. Set the value of that parameter to event. The parameter specifies the key code of the key that was pressed.

The following code example shows how to update the parameters of the ExpandCollapse and ExpandCollapse_CheckKey functions. Notice how that the parameter values use sectionToggle0. The value is taken from the id attribute of the <img> element found in the code example of the previous step.

    <span onclick="ExpandCollapse(sectionToggle0)" style="cursor:default;" onkeypress="ExpandCollapse_CheckKey(sectionToggle0, event)" tabindex="0">

Add a <div> element after the <h1> element. The contents of the <div> will disappear or reappear when you click the section title in the Help viewer. The ExpandCollapse function targets the element that is the next sibling of the <h1> element. Add your content between <div> and </div>.

The following code example shows how to add the <div> element and adds a paragraph to that section. The value of the id attribute provides a unique name for the section.

    <h1 class="heading">
    <span onclick="ExpandCollapse(sectionToggle0)" style="cursor:default;" onkeypress="ExpandCollapse_CheckKey(sectionToggle0, event)" tabindex="0">
    <img id="sectionToggle0" class="toggle" name="toggleSwitch" src="../local/collapse_all.gif" />
    Collapsible section heading</span>
    </h1>
    
    <div id="sectionSection0">
    <p>The text in this section disappears and reappears when you click the section heading. </p>
    </div>

Example

The following is a complete HTML code example for a content element that has a collapsible and expandable section. The example includes the code from the previous steps. Notice how the values of the src attributes have changed. The relative paths show that the elements for the collapsible and expandable section use Jscript and image files that are in the folder C:\inetpub\wwwroot\DynamicsAX6HelpServer\Content\Microsoft\EN-US\Local\. In addition, the paths reflect that this content element will be published to a folder on the Help server named C:\inetpub\wwwroot\DynamicsAX6HelpServer\Content\Contoso.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"[]>
<html DIR="LTR" xmlns:xlink="https://www.w3.org/1999/xlink" xmlns:dynHelp="https://schemas.microsoft.com/dynamicsHelp/2008/11" xmlns:dynHelpAx="https://schemas.microsoft.com/dynamicsHelpAx/2008/11" xmlns:MSHelp="https://msdn.microsoft.com/mshelp" xmlns:mshelp="https://msdn.microsoft.com/mshelp" xmlns:ddue="https://ddue.schemas.microsoft.com/authoring/2003/5" xmlns:msxsl="urn:schemas-microsoft-com:xslt">
<head>

  <script type="text/javascript" src="../Microsoft/local/script_manifold.js"></script>

  <title>Code Example</title>
  <meta name="Title" content="Code example" />
  <meta name="Microsoft.Help.Id" content="3FFFC1DB-6CF5-41E6-8331-096313C157E0" />
  <meta name="ms.locale" content="EN-US" />
  <meta name="publisher" content="Contoso" />
  <meta name="documentSets" content="UserDocumentation" />
  <meta name="Microsoft.Help.Keywords" content="Contoso" />
  <meta name="suppressedPublishers" content="" />
  <meta name="Microsoft.Help.F1" content="ContosoCodeExample" />
  <meta name="description" content="A basic code example of a section that can collapse and expand." />
  
  <style type="text/css">
    .style1
    {
      font-weight: normal;
      font-family: "Segoe UI";
    }
  </style>

  <link rel="stylesheet" type="text/css" href="../Microsoft/local/presentation.css" />
  <link rel="stylesheet" type="text/css" href="../Microsoft/local/AX.css" />

</head>

<body>

  <img id="collapseImage" style="display:none; height:0; width:0;" src="../Microsoft/local/collapse_all.gif" alt="" title="" />
  <img id="expandImage" style="display:none; height:0; width:0;" src="../Microsoft/local/expand_all.gif" alt="" title="" />

  <div id="header">
      <table id="bottomTable">
          <tr id="headerTableRow2">
              <td align="left">
                  <h1>
                      <span id="nsrTitle">Code Example</span>
                  </h1>
              </td>
          </tr>
      </table>

      <hr class="title-divider" />
  </div>

  <div id="mainSection">

    <div id="mainBody">
      <div id="allHistory" class="saveHistory" onsave="saveAll()" onload="loadAll()" />

      <div class="introduction">
        <p>This code example shows how to create a section that you can collapse or expand with a click on the section heading.</p>
      </div>

      <h1 class="heading">
        <span onclick="ExpandCollapse(sectionToggle0)" style="cursor:default;" onkeypress="ExpandCollapse_CheckKey(sectionToggle0, event)" tabindex="0">
          <img id="sectionToggle0" class="toggle" name="toggleSwitch" src="../Microsoft/local/collapse_all.gif" />
          Click to collapse or expand the section
        </span>
      </h1>
    
      <div id="sectionSection0">
        <p>The text in this section disappears and reappears when you click the section heading. </p>
      </div>

    </div>
  </div>

</body>
</html>

Udostępnij za pośrednictwem

How to: Add a Collapsible and Expandable Section

To Add a Collapsible and Expandable Section

Example

See also

Dodatkowe zasoby