Page 1 of 1

Expand/Collapse content by clicking the Title/Caption

Posted: Fri Aug 10, 2018 8:52 pm
by kmank
Is there a built-in way by which we can extend the wh_expand_btn functionality to include clicking the titles? For example, it's much easier to be able to click a section title to expose content than to click the 18x16 expand button.

Re: Expand/Collapse content by clicking the Title/Caption

Posted: Mon Aug 13, 2018 9:54 pm
by kmank
For anyone interested, I managed a solution with jquery.

This goes in the document.ready function

Code: Select all

// ========== EXPANDABLE/COLLAPSIBLE TITLES
// Creates a new class (clickableTitle) for the parent of each .wh_expand_btn found.
// See the related function in the Functions section below.
$("span.wh_expand_btn").each(function() {
console.log("found expand btn");
var createId = $(this).parent().text();
var newId = createId.replace(/\s+/g, '');

$(this).parent()
.css('cursor','pointer')
.addClass('clickableTitle')
// add an ID of the title text minus spaces
.attr('id',newId)
;
});
// ========== END EXPANDABLE/COLLAPSIBLE TITLES

Code: Select all

// "Clicks" the element with the wh_expand_btn class
$(document).on('click', '.clickableTitle', function () {
var clickedItem = $(this).attr('id');
console.log('you clicked ' + clickedItem);
$(this).find('.wh_expand_btn:first').click();
});