I'm trying to use a JavaScript function on an Oracle Apex webpage. The object is to have a link which when initially clicked, opens all subregions and when clicked again, closes all subregions. Essentially, a simple toggle. The function is below:
initContentFrameTabs = function(){
$('div.uFrameRegionSelector > ul li a').click(function(e){
e.preventDefault();
link = $(this);
subregions = link.parents('.uFrameMain').find('section.uHideShowRegion');
link.parents("ul").find('li a').removeClass('active')
if (link.hasClass('showAllLink')) {
expandAllSections();
// subregions.show();
link.addClass('active');
document.getElementById('Title').innerHTML = 'Hide All';
} else if (link.hasClass('active')) {
hideAllSections();
link.parents("ul").find('li a').removeClass('active')
document.getElementById('Title').innerHTML = 'Show All';
} else {
expandSection(link.attr('id').substr(4));
// subregions.hide();
// $('#'+link.attr('id').substr(4)).show();
link.addClass('active')
}
})
}
It seems to work initially, as I click on my link, it opens all sub regions and the text changes to reflect it's new function, ie, Hide All.
However, from that point on, it doesn't work. I receive an error at that point, being:
Uncaught TypeError: Cannot call method 'substr' of undefined
It claims this error is being throw at my substring line, just after the else clause.
Can anyone shed some light on why this is happening?