Forum Discussion
SharePoint Page - Collapsable Section Header Text
I'm using Get-PnPPage and can get sections, components, etc. But what I need is the Header Text that's added to my Collapsable Sections. I've tried for a few hours now and can't find a way to retrieve this. Hoping someone has some ideas on how to get this. An example of what I mean is below where I'm trying to get the text Site 1.
Note that I can get the sections and there is a property that tells me if they are collapsable or not but just can't get the Header text.
4 Replies
1. Use native functionality
Add "Collapse" section in Modern page:
Click "+" → select "Collapse" web part
Drag and drop content directly to collapse area
Customize header style
html
<button class="collapse-btn" onclick="toggleSection()">▼ Item details</button>
<div class="collapse-content" style="display:none">
Content area
</div>
<script>function toggleSection(){/*Toggle Logic**}</script>
Run HTML
2. Advanced customization scheme
JSON formatting (list view)
json
{
"elmType": "div",
"children": [
{
"elmType": "button",
"style": {"font-weight": "bold"},
"attributes": {
"onclick": "toggleSection( event)"
},
"txtContent". "▼ @currentField"
}
]
}
SPFx Extension Solution3. Create Extension component:
typescript
public onInit(). Promise<void> {
this.context.sdks.microsoftTeams.teamsJs.registerOnCollapseHandler((collapsed: boolean) => {
// Handle the collapsed state
});
}
Compatibility handling
4. Classic page solution
Add using Content Editor Web Part:
javascript
$(".ms-accordionHeader").click(function(){
$(this).next().slideToggle();
});
5. Mobile Adaptation
css
media (max-width: 768px) {
.collapse-btn { padding: 12px; }
}LucasWilsonThanks for your reply, but similar to NathanRodriguez's reply, this doesn't answer my question at all. There are Sections in SharePoint Pages and when you set them to Collaspable you can add a Header. I'm trying to find out how to retrieve the Headers from those Sections via PowerShell. I'm not trying to build some custom solution.
1. Fastest way (native functionality)
Edit page → click ‘+’ to add a new widget
Select ‘Segment’ → choose the style with ‘▸’ icon.
Enter the text directly in the title of the paragraph to get the collapsible effect automatically.
2. Simplified code
html
<details
<summary>▼ Click to expand the title</summary>.
This is where you put the content that needs to be collapsed
</details
Running HTML
3. Modify an existing heading:
Select the existing heading text
Click the toolbar ‘A’ icon
Select the ‘Heading 2’ style (with its own collapsing arrow)NathanRodriguezThanks for your reply but not what I was asking. When you add a new Section to a SharePoint page and set it as collapsable you can add a Heading for the Section. I'm trying to access this header from within PowerShell.
