How to make sections in Xpages look like this - xpages

Question

I am baffled. In the oneUI 3 documentation page there is a nice section. It looks like this:
I create a new db and set the theme to 3.0.2 and put in the code below, and it looks nothing like what I am trying to produce.
How can I use the OneUI documentation to reproduce what I see there?
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<xp:section id="section1" header="Header"
headerStyle="lotusSectionHeader2">
</xp:section>
</xp:view>
Good point. It looks like this:

Answer 1

Note, the "Widget Container" control (xe:widgetContainer) in the XPages Extension Library is roughly equivalent to the OneUI Section control. You can see that in Extension Library Demo App at: XPagesExt.nsf/OneUI_WidgetContainer.xsp
It might be a better fit to design the page using that control rather than the xp:section control.
Also, in the OneUI 3 doc that you link to, on the right of the page, 25% down the page, there's a Theme dropdown where you choose "default" or "gen2".
The behavior you're asking for looks like the "gen2" behavior (seems like OneUI 2),
while your screenshot of what it looks like is closer to the "default" (OneUI 3) behavior.
You may want to investigate how to enable the gen2 appearance.

Answer 2

If you paste this code from the documentation does it work? If it does then you need to move the standard html elements to xpage elements.
<!-- section is an HTML5 element. Use div if you are using HTML4. -->
<section class="lotusSection2">
<!-- header is an HTML5 element. Use div if you are using HTML4. -->
<header class="lotusSectionHeader"><div class="lotusInner"><a class="lotusArrow" role="button" aria-expanded="true" aria-controls="sectionBodyID" href="javascript:;" title="Collapse section"><img class="lotusTwistyOpen" src="../../css/images/blank.gif" alt="" aria-label="Collapse section" /><span class="lotusAltText">▼</span></a><h2 class="lotusHeading">Section Header</h2><a class="lotusIcon lotusActionIcon" href="javascript:;" role="button" aria-haspopup="true" aria-owns="[menuID]"><img src="../../css/images/blank.gif" alt="" /><span class="lotusAltText">Actions</span></a></div></header>
<div id="sectionBodyID" class="lotusSectionBody">
<div class="lotusChunk">Data goes here....</div>
<header class="lotusSubheader"><a class="lotusArrow" role="button" aria-expanded="true" aria-controls="subsectionID" href="javascript:;" title="Collapse section"><img class="lotusTwistyOpen" src="../../css/images/blank.gif" alt="" aria-label="Collapse section" /><span class="lotusAltText">▼</span></a><h3 class="lotusHeading2">Subsection</h3></header>
<div id="subsectionID" class="lotusSubsection">
More data goes here....
</div>
</div></section><!--end section-->

Answer 3

As Maire points out, the Widget Container control does what you want using the following code:
<xe:widgetContainer id="widgetContainer1"
titleBarText="Section Header" collapsible="true"
style="width: 300px;">
<xe:this.dropDownNodes>
<xe:basicLeafNode label="test1"></xe:basicLeafNode>
<xe:basicLeafNode label="test2"></xe:basicLeafNode>
<xe:basicLeafNode label="test3"></xe:basicLeafNode>
</xe:this.dropDownNodes>
More data here...
</xe:widgetContainer>
But as she points out, the look & feel you posted is for the Gen2 theme, which isn't implemented in XPages. So what you get is this: