Collapse Interactive Report Control Break

The interactive grid has a feature that collapse and expands the control break. This feature is missing from interactive reports, but it's relatively easy to add the same feature with dynamic action and JavaScript.

First create interactive report and then add dynamic action

• Event: After Refresh
• Selection Type: Region
• Region: {select your interactive report region}
• Action: Execute JavaScript Code
• Fire on Initialization: On
• Code:

let lButton         = apex.util.htmlBuilder()
// Get messages for button title. Reusing IG messages
  , lCollapseTitle  = apex.lang.getMessage( "APEX.GV.BREAK_COLLAPSE" )
  , lExpandTitle    = apex.lang.getMessage( "APEX.GV.BREAK_EXPAND" )
// Button icon classes for collapse and expand
  , lBtnIcons       = [ "fa-chevron-down", "fa-chevron-right" ]
// IR control break row jQuery selector
  , lCtrBreak       = "th.a-IRR-header--group"
;
// Prepare button HTML
lButton.markup( "<button" )
  .attr( "type", "button" )
  .attr( "aria-expanded", "true" )
  .attr( "title", lCollapseTitle )
  .attr( "aria-label", lCollapseTitle )
  .attr( "class", "t-Button t-Button--noLabel t-Button--icon t-Button--small t-Button--gapRight" )
  .markup( "><span" )
  .attr( "aria-hidden", "true" )
  .attr( "class", "t-Icon fa " + lBtnIcons[0] )
  .markup( "></span></button>" )
;
// Set click event to button
let button$ = $( lButton.toString() ).click( function(){
  let this$     = $( this )
    , lExpanded = this$.attr( "aria-expanded" ) === "true" ? "false" : "true"
    , lNewTitle = lExpanded === "true" ? lCollapseTitle : lExpandTitle
  ;
// Change button attributes and icon
  this$.attr({
    "title": lNewTitle
  , "aria-label": lNewTitle
  , "aria-expanded": lExpanded
  }).children().toggleClass( lBtnIcons ).end()
  // Hide/show IR rows from row clicked to the next control break
    .closest( "tr" ).nextUntil( ":has(" + lCtrBreak + ")" ).toggle()
  ;
});
// Attach button to IR control break rows
$( this.triggeringElement ).find( lCtrBreak ).prepend( button$ )
// Uncomment below line to initiallyt collapse control breaks.
// Remember also change button initial attributes.
//  .closest( "tr" ).nextUntil( ":has(" + lCtrBreak + ")" ).toggle()
;

Run the page and add a control break from the interactive report action menu.

See working example