Need to Create a Collapsible section in Widget

[is_12]

Hello,

Based on the checkbox selected on the portal, need to show collapsible section in the portal, Let say there are 3 checkbox, 1. ABC 2.DEF 3.GHI.

1 & 2 checkbox is true then related data should be visible in collapsible section.

I'm beginner in learning the portal, So Please Help me out.

Thanks in Advance !

[Mark_Branscombe]

The following code entered as the HTML data Instance Option of the out of box HTML Widget provides an example:

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">My Widget</h3>
    </div>
    <ul class="list-group">
        <li class="list-group-item"><button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Button with data-target </button>
            <div id="collapseExample" class="collapse">
                <p class="mt-3">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
            </div>
        </li>
        <li class="list-group-item"><input type="checkbox" aria-label="my-checkbox" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample"> Checkbox with data-target
            <div id="collapseExample2" class="collapse">
                <p class="mt-3">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
            </div>
        </li>
    </ul>
</div>

[Sarthak Kashyap]

Hi @is_12 ,

I tried your problem in my PDI and it works for me please check below sample code 

HTML

<!-- Buttons -->
<button class="btn btn-primary me-1" ng-click="c.toggleCollapse(0)">
  Toggle first element
</button>

<button class="btn btn-primary me-1" ng-click="c.toggleCollapse(1)">
  Toggle second element
</button>

<button class="btn btn-primary me-1" ng-click="c.toggleCollapse(0); c.toggleCollapse(1);">
  Toggle both
</button>

<div class="row mt-3">

  <!-- First collapse section -->
  <div class="col-xs-6">
    <div class="panel panel-default" ng-show="c.visible[0]">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
        richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
        anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>

  <!-- Second collapse section -->
  <div class="col-xs-6">
    <div class="panel panel-default" ng-show="c.visible[1]">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
        richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
        anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>

</div>

Client script

api.controller = function($scope) {
    /* widget controller */
   var c = this;

    // Which sections to show
    c.visible = [false, false];

    // Same logic as toggleCollapse(id: number)
    c.toggleCollapse = function(id) {
        c.visible[id] = !c.visible[id];
    };
};

Result: 

When click on 1st element 

Please mark my answer correct and helpful if this works for you

Thanks and Regards,

Sarthak