SharePoint Page - Collapsable Section Header Text

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 Solution 

3. 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; } 
}