Output Query

[Stacey]

Hi There:

UX is looking to update our webhelp output, and I'm wondering if this is possible/how it might be done.
They want to keep the "same" tasks on the same page (currently written as different topics), and then have toggle options for those tasks for Mobile and Desktop versions, as applicable. I'm assuming it might be a CSS and topic-tagging exercise?

ExampleLayout.png

[julien_lacour]

Hello,

You can use tabbed display to toggle between Mobile and Desktop versions. For this you just need to use either a list, a definition list or a choicetable in your DITA source in combination with the @outputclass="wh-tabbed" attribute.

For more details you can check our user guide.

Regards,
Julien

[Stacey]

Hi Julien:

I looked at the user guide, but I'm not sure how you would write instructions using those specific elements (lists, definition lists, choice tables)? Showing a tab with the words "Instructions for Mac" is only useful if I can also see the instructions there? Do I need to create a choicetable for each step? Or would there be another way of displaying/linking things to show an entire topic there?

[julien_lacour]

Hello,

As an example you can use a list to display the tabs, and a child list to display all the steps for mobile and for desktop:

Code: Select all

<ul outputclass="wh-tabbed">
    <li><ph>Mobile</ph><ol>
            <li>Select menu, then Calendar.</li>
            <li>Select task's date.</li>
            <li>Select the event card for more information about the task.</li>
        </ol></li>
    <li>
        <ph>Desktop</ph><ol>
            <li>Select ...</li>
            <li>Select ...</li>
            <li>Select ...</li>
        </ol></li>
</ul>

Regards,
Julien