BBR

Collapsible

Parat til dokumentation

<div class="data-view-header  " id="collapsibleHeader1">
    <div class="row align-items-center">
        <div class="col">

            <button data-bs-toggle="collapse" data-bs-target="#collapsible1" aria-expanded="false" aria-controls="collapsible1" id="collapsibleToggle1" role="button" class="btn btn-white data-view-header__toggle collapsed">
                <h2 class="mb-1">

                    <strong>Bygning 1:</strong>
                    <small>Rugbjergvej 14, 6230 Rødekro</small>

                </h2>
                <p class="mb-0">Fritliggende enfamiliehus (kode:120), Opført 1968, 144 m2</p>
            </button>
            <a href="#" class="btn btn-light btn-sm data-view-header__show-on-map">Vis på kort</a>
        </div>
    </div>
</div>
 
<div class="data-view-header {{#if hasAction }}data-view-header--has-action{{/if}} {{#if buildingIcon}}data-view-header--{{buildingIcon}}{{/if}}" {{#if isCollapsible}}
    id="collapsibleHeader{{buildingId}}" {{/if}}>
    {{#if hasWarning}}
    <img src="{{ path '/img/icon-warning.svg' }}" class="data-view-header__status-icon"
        alt="Advarsel" aria-label="Advarsel" />
    {{/if}}
    <div class="row align-items-center">
        <div class="col">
            {{#if isCollapsible}}

            <button data-bs-toggle="collapse" data-bs-target="#collapsible{{buildingId}}"
                aria-expanded="{{#if isExpanded}}true{{else}}false{{/if}}" aria-controls="collapsible{{buildingId}}"
                id="collapsibleToggle{{buildingId}}" role="button"
                class="btn btn-white data-view-header__toggle {{#if isExpanded}} {{else}}collapsed{{/if}}">
                {{/if}}
                {{#if headerTag}}
                <{{headerTag}}>
                    {{else}}
                    <h2 class="mb-1">
                        {{/if}}
                        
                        {{#if hasRemoved }}
                        <s class="text--removed">
                            {{/if}}
                            <strong>{{title}}{{#if address}}:</strong>
                            <small>{{{address}}}</small>{{else}}</strong>{{/if}}
                            {{#if hasRemoved }}
                        </s>
                        {{/if}}
                        {{#if hasRemoved}}
                        {{> @tag label="fjernet" small=true}}
                        {{/if}}

                        {{#if hasAdded}}
                        {{> @tag label="tilføjet" small=true}}
                        {{/if}}
                        {{#if headerTag}}
                </{{headerTag}}>
                {{else}}
                </h2>
                {{/if}}
                {{#if description}}
                <p class="mb-0">{{{description}}}</p>
                {{/if}}
                {{#if isCollapsible}}
            </button>
            {{/if}}
            {{#if showOnMap }}
            <a href="#" class="btn btn-light btn-sm data-view-header__show-on-map">Vis på kort</a>
            {{/if}}
        </div>
        {{#if hasAction }}
        <div class="col text-end">
            <a class="btn btn-outline-primary btn-sm" href="#">{{actionLabel}}</a>
        </div>
        {{/if}}
    </div>
</div>
 
{
  "title": "Bygning 1",
  "address": "Rugbjergvej 14, 6230 Rødekro",
  "description": "Fritliggende enfamiliehus (kode:120), Opført 1968, 144 m2",
  "buildingId": "1",
  "showOnMap": true,
  "isCollapsible": true
}