Using Accordions and Tabbed Panels in Adobe Muse

Open the Widgets Library panel (Window > Widgets Library). Expand Panels, and select the Tabbed Panels widget. Drag the widget from the Widgets Library to your Design panel.

Click the top tab on the right side three times. The first click selects the entire Tabbed Panel, the second click selects the Tab Container, and the third click selects the Tab on the right side.

Check the Selection Indicator to see which sub-element of the widget is currently selected. Press Delete (Mac) or Backspace (Windows) to delete the third tab. After making this change, there are only two tabs remaining. Click away, anywhere else on the page.

Click the widget once again, to select the entire Tabbed Panel. Drag the handles to resize the entire widget to a width of 840 and a height of 645. As you drag the handles, you can refer to the measurements that appear as you drag.

You can also check the Transform panel to see the values in the W (width) and H (height) fields.

Use the Selection tool to position the Tabbed Panel widget on the page, near the top, and centered vertically.

Click the top center position of the Pin interface in the Control panel, to pin the Tabbed Panel widget in place. To learn more about pinning objects in position so that they don't scroll, see this link.

While the Tabbed Panel widget is still selected, click the left tab to select the Tab Container (the element that holds both top tabs). Use the Selection tool to drag the center handle down, until the height is approximately 98 pixels.

In the Spacing panel, set the following values as shown in the image given below:

• Left: 220
• Right: 220
• Bottom: 2
• Gutter Height: 10
  

After making these changes, use the Selection tool to drag the entire Tabbed Panel widget up to the very top of the page, so that the top of the Tabbed Panel is butted up against the bottom of the header rectangle with no vertical space between the two.

If necessary, you can zoom in to get a closer look of how the elements are aligned. Set the magnification back to 100% after you are finished.

Click the left tab three times, to select the left Tab. Open the States panel and select the Normal state. Use the Fill menu to set the fill color. Set the stroke width to 0.

Select the Rollover state in the States panel. Set the fill color of the Rollover state of the tab to 571E00. Notice that when you set the fill color for the Rollover state, the Mouse Down state also updates automatically.

Select the Active state and also apply the same fill color to the tab while in the Active state. Now the Normal state is filled with the fill color you chose in the previous step, and the other three states are filled with 571E00.

Click the left tab once again, to select the Label. The Selection Indicator displays the word Label when it is selected. Select the Normal state in the States panel and then use the Text panel to set the  following attributes as shown in the image given below:

• Web font: Kaushan Script (or any script font you prefer)
• Font size: 26Color: #70909D (you can rename this color. For example, blue-menu)
• Leading: 120%
• Alignment: Centered
  

While the Label is still selected, click the New Style button at the bottom of the Paragraph Styles panel. To reapply this formatting whenever you want, with a single click, rename this new paragraph style. For example, head-tabs.

When you look in the States panel, the formatting you applied to the Label while the Normal state is selected is also applied to both the Rollover and Mouse Down states. Select the Active state and then click the head-tabs paragraph style again, to apply the formatting to the Active state. Now all the states in both the tabs have been styled.

Select the Normal state again.

Use the Text tool to select the label text in all the tabs, and enter appropriate names for your labels.

If you select the left Tab and look at the States panel, you'll see the final formatting applied to each tab and label. Click the right tab and notice that the states look the same, except for the text content of each tab.

Take a moment to click back and forth between the two different tabs, that have different labels. The placeholder text for both the tabs are different, so you can tell that one container is displayed as the other is hidden.

Click the right tab in your widget. When the right tab is selected, the corresponding content area is displayed below the tab. This is the same behavior that occurs both in Design view when editing the page and on the live website. This is what makes Tabbed Panel widgets very helpful, because you can efficiently display much more content within a single page.

Select the Content Area for your tabs. The Selection Indicator displays the words Content Area when it is selected. Select the placeholder image file and press Delete (Mac) or Backspace (Windows) to delete it.

Use the Text tool to select the existing placeholder text header. Select the bold header text, Mauris sit amet, and delete it.

Temporarily switch from Adobe Muse to your desktop. Open the sample files folder and locate the file named text-about-ourstory.txt. Double-click the file to open it in a text editor. Copy the first portion of the page, up until the line that reads: ... crafted through years of baking for friends and family.

Return to Muse. Use the Text tool to select the existing placeholder text. Paste the text content you copied in the text frame. Leave one extra line and return to the top of the text frame.

While the text frame is selected, use the Text panel to choose the settings to format your text. For example, you can choose the following settings:

• Font: Droid Serif
• Font Size: 14
• Color: #222222
• Alignment: Left
• Leading: 120%
  

While the text is still selected, click the New Style button at the bottom of the Paragraph Styles panel. Double-click the new paragraph style and rename it. For example, body. This will make it easier to reapply the same formatting to other text content.

In the Swatches panel, double-click the color value #222222 and rename this color. For example, katieblack.

In the Control panel, set the Stroke color of the text field to #222222 (katieblack) and set the Stroke Width to 5 pixels.

Use the Fill menu to set the fill color of the text field to a light beige color (#F8F3E2). Click the folder next to the Image section and browse to select the file in the sample files folder named bg-texture.png. Set the Fitting menu to: Tile.

In the Spacing panel, set the Left and Right spacing. For example, you can set the Left spacing to 24 and the Right spacing to 15.

Next, you'll add content to each of the content area containers that correspond to each of the tabs.

Use the Selection tool to resize the text field. Drag it to the left side of the container, and then use the handles to expand its width to approximately half of the available content area space (approximately 390 pixels wide by 381 pixels high).

Use the Selection tool to select the text frame. Press and hold Option (Mac) or Alt (Windows) as you drag a duplicate copy of the text frame to the right side of the content area (see the image below).

Use the alignment guides that appear to ensure that the right text frame is aligned horizontally with the left text frame.

Temporarily switch from Muse to the text-editing program that contains the content for your Tabbed Panel. Copy the content that you want to paste in your duplicate tab.

Switch back to Muse. Delete all the existing text in the duplicated right text frame. Paste the new text content that you copied from the clipboard.

As needed, use the Selection tool to position both text frames so that they are aligned and centered within the content area at the desired location.

While the text frame is still selected, press Escape once to select the Content Area of the duplicated tab. Set the stroke width to 0, and set the fill color to None.

Open your project in the Design view and begin editing it.

Choose File > Place. In the Import dialog box, navigate to the folder where you have your assets, and select the image file you need. Click Select, and then click once at the top of the page to place the image at its original size on the page as the header text. You'll add the Accordion widget below this header.

Open the Widgets Library. (Choose Window > Widgets Library to open it. Or if it is already open, click the top tab to make the Widgets Library active in the set of docked panels.)

Click Panels to expand the list of Panel widgets. Select the Accordion widget. Drag the Accordion widget onto the page and position it in the upper left side of the page content region.

With the Selection tool, select the various components of the widget. As you select the entire widget, the Selection Indicator in the top left corner of the Control panel displays the word “Widget.” As you click again, notice how the Selection Indicator updates to tell you that you have selected a container, or a text frame. The Selection Indicator tells you which part of the widget is currently selected.

To deselect that element of a widget, either click the Escape key to back out of the current selection one level, or press it repeatedly to back up out of the nested elements. Alternatively, you can simply click away from the widget and onto another part of the page.

By default, the Accordion widget has two panels. The top panel displays the placeholder tab name Lorem 1 and the bottom panel displays the placeholder tab name Ipsum 2.

Open the Widget Options dialog box by clicking the round blue arrow icon. Ensure that the option Edit Together is checked. This option ensures that any changes you make to one tab name in the Accordion will be applied to all tabs.

With the Selection tool, click the widget once to select it, and then drag the right handle to the right to expand the width of the widget, making it wide enough to cover two columns as shown in the image below.

Click the plus (+) sign at the bottom of the widget, below Ipsum 2, to add a third panel. The third panel displays the placeholder tab name Ipsum 3.

Use the Selection tool to select the top tab's text frame, currently named Lorem 1. Click “Lorem 1” once to select the entire widget and expand the container that corresponds to the top tab, and then click in the “Lorem 1” text to select the text frame. The words “Text Frame” are displayed in the Selection Indicator when the text frame is selected.

Double-click the placeholder text “Lorem 1” to edit it and then type the text that you want.

Select the light gray larger container beneath the first tab. Use the Text tool to drag open a text frame in the larger container.

In the new text frame, type your header text.

Select the top tab of the Accordion widget that displays the header.

Click the round blue arrow button to open the Options menu. Deselect the option Edit Together. Click away from the Options menu to close it.

Click the top tab twice until the Selection Indicator displays the words “Text Frame.” With the top tab's text frame selected, click the Fill link in the Control panel to open the Fill menu. Click the color picker and set the background fill color to none, rather than the default dark gray color.

Click the folder icon in the Image section to open the Import dialog box. Navigate to your assets folder, and select the image that you want to add.

Open the Spacing panel. Press and hold the up arrow in the Padding: L (Left) section to increase the space before the header so that the text is centered on the background image for the tab.

In Design view, open the Widgets Library and expand the Panels section.

Select the Accordion option from the Panels section and drag it to the page.

Using the Selection tool, click once to select the entire widget. The Selection Indicator in the top left corner of the Control panel displays the word: Accordion.

Holding the Shift key while rotating constrains the proportions so you can move the widget in 45-degree increments. A tooltip appears to display the current rotate value as you are rotating the widget.

After rotating the widget, click the Preview link or preview the page in a browser to see that the Accordion still expands and collapses the panels as expected. Check whether the label containers are scripted to display the corresponding content area when clicked.

Now all that remains is to populate the labels and content area containers with content that is oriented "face up" instead of displaying sideways.

Follow these steps to display text content within the content areas. You'll use the same technique described above to rotate the text field in a content area container.

Click the default text in the content area twice. The first time selects the entire Accordion widget and the second time selects the content area container. While the content area is selected, use the Selection tool to expand the size of the content area, by clicking and dragging its resize handles.

While the content area is still selected, click once again to select the text frame inside the content area. Hover your cursor near one of the text frame corners until you see the rotation cursor displayed. Press and hold the Shift key while rotating the text frame to the same 90-degree rotation as the outer widget.

After rotating the text frame, use the Selection tool to reposition it within the content area. Use the Text tool to replace the placeholder text with the actual text you want to display and then use the text formatting options in the Control panel and the Text panel to style the text (or apply paragraph styles to update its appearance).

Place images, draw rectangles, or embed HTML to populate the content area containers as desired. You don't have to rotate this content because it is placed upright within the rotated container automatically.

Select the Accordion widget where you want to add the anchor link. Click the tab where you want to add the anchor link.

Click the Anchor tool to load an anchor link in the Place Gun.

Place the anchor link in the Accordion widget.

A pop-up to rename the anchor is displayed. Type in a suitable name for your anchor, and click OK.

You can now link this anchor to any page element from any page in your website.

To link a page element to this anchor, select the page element that you want to link. From the Hyperlinks drop-down on top, choose the anchor that you created.

In your live site, whenever you click the page element, the page displays the Accordion tab where you had placed the anchor link.