Skip to Main Content

APEX

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Collapsible IR control break code JS

Hi,

Under APEX 24.2.0 I folowed this post form @jariola :

https://cloud.jaris.fi/ords/r/jaris/blog/post?p2_post_id=20220406135639638575

But it does not work? Control breaks are not collpased. Where is my error ?

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()
;

Best regards.

This post has been answered by fac586 on Apr 30 2025
Jump to Answer
Comments
Post Details
Added on Apr 30 2025
6 comments
164 views