Collapse

Toggle the visibility of content across your project with a few classes and our JavaScript plugins.

How To

Step 1: Include LambdaEx Framework in Logi Info Application. Include LambdaEx Framework in Logi Info Application.

Collapse Toggle

Example

...

<Division Class="btn btn-primary" ID="btnCollapse">
  <Action Javascript="$('#collapseExample').collapse('toggle'); $(this).find('input').val(function(i, text){return text === 'Show Content' ? 'Hide Content' : 'Show Content';})" Type="Javascript" />
  <Label Class="ti-download" />
  <Spaces />
  <Label Caption="Show Content" />
</Division>
<Division Class="collapse" HtmlDiv="True" ID="collapseExample">
  <Division Class="card card-outline-primary" HtmlDiv="True">
    <Division Class="card-body" HtmlDiv="True">
      <Label Caption="..." />
    </Division>
  </Division>
</Division>

Accordian Example

Example

Collapsible Group Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Collapsible Group Item #2

Collapsible Group Item #3

<Division HtmlDiv="True" ID="CollapseExample">
  <Division Class="card" HtmlDiv="True">
    <Division Class="card-header p-0" HtmlDiv="True">
      <Label Caption="Collapsible Group Item #1" Class="collapse-toggle" HtmlTag="a">
        <EventHandler DhtmlEvent="href">
          <Action Javascript="void(0)" Type="Javascript" />
        </EventHandler>
      </Label>
    </Division>
    <Division Class="collapse card-body show" HtmlDiv="True">
      <Label Caption="..." />
    </Division>
  </Division>
  <Division Class="card" HtmlDiv="True">
    <Division Class="card-header p-0" HtmlDiv="True">
      <Label Caption="Collapsible Group Item #2" Class="collapsed collapse-toggle" HtmlTag="a">
        <EventHandler DhtmlEvent="href">
          <Action Javascript="void(0)" Type="Javascript" />
        </EventHandler>
      </Label>
    </Division>
    <Division Class="collapse card-body" HtmlDiv="True">
      <Label Caption="..." />
    </Division>
  </Division>
  <Division Class="card" HtmlDiv="True">
    <Division Class="card-header p-0" HtmlDiv="True">
      <Label Caption="Collapsible Group Item #3" Class="collapsed collapse-toggle" HtmlTag="a">
        <EventHandler DhtmlEvent="href">
          <Action Javascript="void(0)" Type="Javascript" />
        </EventHandler>
      </Label>
    </Division>
    <Division Class="collapse card-body" HtmlDiv="True">
      <Label Caption="..." />
    </Division>
  </Division>
</Division>

/*START INCLUDE SCRIPT ELEMENT...*/
$(this).click(function() {
   $(this).closest('.card').parent().find('.collapse').each(function() { $(this).collapse('hide'); }); 
   $(this).toggleClass('collapsed').closest('.card').find('.collapse').collapse('toggle'); 
});
/*...END INCLUDE SCRIPT*/