Expand/Collapse content by clicking the Title/Caption

[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.

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

});