Related Knowledge Articles expanding widget

[Ed Hefford]

Hey everyone,

I'm trying to create a new widget that is similar in function to the related knowledge articles widget that I want to appear on all catalog items.

Ideally, this widget will be expandable, when clicking on the article title, which then displays the article body when expanded.

I hoped it would be quite simple, but just not getting anywhere. Has anyone made anything similar to this at all?

[Ed Hefford · Accepted solution]

At present, I've built an expandable widget using the following code.
HTML

<div class="panel-default">
  <a id="toggleSection" data-toggle="collapse" data-target="#submitRequest" ng-click="isCollapsed=!isCollapsed" >
    <h4>Article Title</h4></a>
  <div id="submitRequest" class="panel-collapse collapse" style="padding-top:15px;">Article body
  </div>
</div>

Client Script

api.controller=function() {
	/* widget controller */
	var c = this;
	if (c.data.expandForm == 'true') {
		var el = angular.element('#submitRequest');
		el.attr('aria-expanded', 'true');
		el.addClass('in');
		el.css("height", "100%");
		var el2 = angular.element('#plusMinusButton');
		el2.removeClass('glyphicon-plus');
		el2.addClass('glyphicon-minus');
		$scope.isCollapsed = !$scope.isCollapsed;
	}
};

CSS

.panel-default {
  font-family: 'Source Sans Pro', sans-serif;
  padding: 2.4rem;
  border-radius: 10px;
  box-shadow: 0 0.4rem 0.8rem 0 rgba(23, 40, 52, .08);
  background-color: #ffffff;
}

[Ed Hefford]

Good news is ive sorted by own problem now!