Expand/Collapse content by clicking the Title/Caption

kmank
Posts: 83

Expand/Collapse content by clicking the Title/Caption

Fri Aug 10, 2018 8:52 pm

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
Posts: 83

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

Mon Aug 13, 2018 9:54 pm

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

Return to “DITA (Editing and Publishing DITA Content)”

Who is online

Users browsing this forum: No registered users and 1 guest