<div class="download-element bg-white">
<div class="container">
<div class="title-warp">
<h2 class="title"> BlueBox Investment Strategy</h2>
<h1 class="main-title">Funds Documents</h1>
<p class="descWrap">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<div class="accordion" id="accordionExample1">
<div class="accordion-item">
<h2 class="accordion-header" id="heading1">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="true" aria-controls="collapse1">
KIIDs ENGLISH
</button>
</h2>
<div id="collapse1" class="accordion-collapse collapse" aria-labelledby="heading1" data-bs-parent="#accordionExample">
<div class="accordion-body">
<div class="linkWrap">
<p>Investor Information and other Documents related to the Fund KIIDs ENGLISH</p>
<a class="btn-link" href="https://gfdplatform.pwc.lu/facilities-agent/view/ecd04c6d-fefb-4d7a-bc4">
https://gfdplatform.pwc.lu/facilities-agent/view/ecd04c6d-fefb-4d7a-bc4
</a>
</div>
<div class="downloadItemWrap">
<div class="row dowmItemsRow">
<div class="col-md-4 dowmItemsCol">
<div class="dowmItems">
<div class="icon-wrap">
<img src="/images/Document-icon.svg" alt="document-img" />
</div>
<div class="down-item-wrap">
<a class="download-link btn-link" href="#" target="_blank">
Document 1
<span class="arrow">
<img src="/images/download.svg" alt="arrow" />
</span>
<span class="arrow-dark">
<img src="/images/download-dark.png" alt="arrow" />
</span>
</a>
<p class="desc-wrap">The Direct Connection of computers to the real world has enabled the technology revolution of the pa.</p>
</div>
</div>
</div>
<div class="col-md-4 dowmItemsCol">
<div class="dowmItems">
<div class="icon-wrap">
<img src="/images/Document-icon.svg" alt="document-img" />
</div>
<div class="down-item-wrap">
<a class="download-link btn-link" href="#" target="_blank">
Document 2
<span class="arrow">
<img src="/images/download.svg" alt="arrow" />
</span>
<span class="arrow-dark">
<img src="/images/download-dark.png" alt="arrow" />
</span>
</a>
<p class="desc-wrap">The Direct Connection of computers to the real world has enabled the technology revolution of the pa.</p>
</div>
</div>
</div>
<div class="col-md-4 dowmItemsCol">
<div class="dowmItems">
<div class="icon-wrap">
<img src="/images/Document-icon.svg" alt="document-img" />
</div>
<div class="down-item-wrap">
<a class="download-link btn-link" href="#" target="_blank">
Document 3
<span class="arrow">
<img src="/images/download.svg" alt="arrow" />
</span>
<span class="arrow-dark">
<img src="/images/download-dark.png" alt="arrow" />
</span>
</a>
<p class="desc-wrap">The Direct Connection of computers.</p>
</div>
</div>
</div>
<div class="col-md-4 dowmItemsCol">
<div class="dowmItems">
<div class="icon-wrap">
<img src="/images/Document-icon.svg" alt="document-img" />
</div>
<div class="down-item-wrap">
<a class="download-link btn-link" href="#" target="_blank">
Document 4
<span class="arrow">
<img src="/images/download.svg" alt="arrow" />
</span>
<span class="arrow-dark">
<img src="/images/download-dark.png" alt="arrow" />
</span>
</a>
<p class="desc-wrap">The Direct Connection of computers to the real world has enabled the technology revolution of the pa.</p>
</div>
</div>
</div>
<div class="col-md-4 dowmItemsCol">
<div class="dowmItems">
<div class="icon-wrap">
<img src="/images/Document-icon.svg" alt="document-img" />
</div>
<div class="down-item-wrap">
<a class="download-link btn-link" href="#" target="_blank">
Document 5
<span class="arrow">
<img src="/images/download.svg" alt="arrow" />
</span>
<span class="arrow-dark">
<img src="/images/download-dark.png" alt="arrow" />
</span>
</a>
<p class="desc-wrap">The Direct Connection of computers.</p>
</div>
</div>
</div>
<div class="col-md-4 dowmItemsCol">
<div class="dowmItems">
<div class="icon-wrap">
<img src="/images/Document-icon.svg" alt="document-img" />
</div>
<div class="down-item-wrap">
<a class="download-link btn-link" href="#" target="_blank">
Document 6
<span class="arrow">
<img src="/images/download.svg" alt="arrow" />
</span>
<span class="arrow-dark">
<img src="/images/download-dark.png" alt="arrow" />
</span>
</a>
<p class="desc-wrap">The Direct Connection of computers to the real world has enabled the technology revolution of the pa.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion" id="accordionExample2">
<div class="accordion-item">
<h2 class="accordion-header" id="heading2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="true" aria-controls="collapse2">
KIIDs FRENCH
</button>
</h2>
<div id="collapse2" class="accordion-collapse collapse" aria-labelledby="heading2" data-bs-parent="#accordionExample">
<div class="accordion-body">
<div class="linkWrap">
<p>Investor Information and other Documents related to the Fund KIIDs FRENCH</p>
<a class="btn-link" href="https://gfdplatform.pwc.lu/facilities-agent/view/ecd04c6d-fefb-4d7a-bc4">
https://gfdplatform.pwc.lu/facilities-agent/view/ecd04c6d-fefb-4d7a-bc4
</a>
</div>
<div class="downloadItemWrap">
<div class="row dowmItemsRow">
<div class="col-md-4 dowmItemsCol">
<div class="dowmItems">
<div class="icon-wrap">
<img src="/images/Document-icon.svg" alt="document-img" />
</div>
<div class="down-item-wrap">
<a class="download-link btn-link" href="#" target="_blank">
Document 1
<span class="arrow">
<img src="/images/download.svg" alt="arrow" />
</span>
<span class="arrow-dark">
<img src="/images/download-dark.png" alt="arrow" />
</span>
</a>
<p class="desc-wrap">The Direct Connection of computers to the real world has enabled the technology revolution of the pa.</p>
</div>
</div>
</div>
<div class="col-md-4 dowmItemsCol">
<div class="dowmItems">
<div class="icon-wrap">
<img src="/images/Document-icon.svg" alt="document-img" />
</div>
<div class="down-item-wrap">
<a class="download-link btn-link" href="#" target="_blank">
Document 2
<span class="arrow">
<img src="/images/download.svg" alt="arrow" />
</span>
<span class="arrow-dark">
<img src="/images/download-dark.png" alt="arrow" />
</span>
</a>
<p class="desc-wrap">The Direct Connection of computers to the real world has enabled the technology revolution of the pa.</p>
</div>
</div>
</div>
<div class="col-md-4 dowmItemsCol">
<div class="dowmItems">
<div class="icon-wrap">
<img src="/images/Document-icon.svg" alt="document-img" />
</div>
<div class="down-item-wrap">
<a class="download-link btn-link" href="#" target="_blank">
Document 3
<span class="arrow">
<img src="/images/download.svg" alt="arrow" />
</span>
<span class="arrow-dark">
<img src="/images/download-dark.png" alt="arrow" />
</span>
</a>
<p class="desc-wrap">The Direct Connection of computers.</p>
</div>
</div>
</div>
<div class="col-md-4 dowmItemsCol">
<div class="dowmItems">
<div class="icon-wrap">
<img src="/images/Document-icon.svg" alt="document-img" />
</div>
<div class="down-item-wrap">
<a class="download-link btn-link" href="#" target="_blank">
Document 4
<span class="arrow">
<img src="/images/download.svg" alt="arrow" />
</span>
<span class="arrow-dark">
<img src="/images/download-dark.png" alt="arrow" />
</span>
</a>
<p class="desc-wrap">The Direct Connection of computers to the real world has enabled the technology revolution of the pa.</p>
</div>
</div>
</div>
<div class="col-md-4 dowmItemsCol">
<div class="dowmItems">
<div class="icon-wrap">
<img src="/images/Document-icon.svg" alt="document-img" />
</div>
<div class="down-item-wrap">
<a class="download-link btn-link" href="#" target="_blank">
Document 5
<span class="arrow">
<img src="/images/download.svg" alt="arrow" />
</span>
<span class="arrow-dark">
<img src="/images/download-dark.png" alt="arrow" />
</span>
</a>
<p class="desc-wrap">The Direct Connection of computers to the real world has enabled the technology revolution of the pa.</p>
</div>
</div>
</div>
<div class="col-md-4 dowmItemsCol">
<div class="dowmItems">
<div class="icon-wrap">
<img src="/images/Document-icon.svg" alt="document-img" />
</div>
<div class="down-item-wrap">
<a class="download-link btn-link" href="#" target="_blank">
Document 6
<span class="arrow">
<img src="/images/download.svg" alt="arrow" />
</span>
<span class="arrow-dark">
<img src="/images/download-dark.png" alt="arrow" />
</span>
</a>
<p class="desc-wrap">The Direct Connection of computers.</p>
</div>
</div>
</div>
<div class="col-md-4 dowmItemsCol">
<div class="dowmItems">
<div class="icon-wrap">
<img src="/images/Document-icon.svg" alt="document-img" />
</div>
<div class="down-item-wrap">
<a class="download-link btn-link" href="#" target="_blank">
Document 7
<span class="arrow">
<img src="/images/download.svg" alt="arrow" />
</span>
<span class="arrow-dark">
<img src="/images/download-dark.png" alt="arrow" />
</span>
</a>
<p class="desc-wrap">The Direct Connection of computers to the real world has enabled the technology revolution of the pa.</p>
</div>
</div>
</div>
<div class="col-md-4 dowmItemsCol">
<div class="dowmItems">
<div class="icon-wrap">
<img src="/images/Document-icon.svg" alt="document-img" />
</div>
<div class="down-item-wrap">
<a class="download-link btn-link" href="#" target="_blank">
Document 8
<span class="arrow">
<img src="/images/download.svg" alt="arrow" />
</span>
<span class="arrow-dark">
<img src="/images/download-dark.png" alt="arrow" />
</span>
</a>
<p class="desc-wrap">The Direct Connection of computers to the real world has enabled the technology revolution of the pa.</p>
</div>
</div>
</div>
<div class="col-md-4 dowmItemsCol">
<div class="dowmItems">
<div class="icon-wrap">
<img src="/images/Document-icon.svg" alt="document-img" />
</div>
<div class="down-item-wrap">
<a class="download-link btn-link" href="#" target="_blank">
Document 9
<span class="arrow">
<img src="/images/download.svg" alt="arrow" />
</span>
<span class="arrow-dark">
<img src="/images/download-dark.png" alt="arrow" />
</span>
</a>
<p class="desc-wrap">The Direct Connection of computers.</p>
</div>
</div>
</div>
<div class="col-md-4 dowmItemsCol">
<div class="dowmItems">
<div class="icon-wrap">
<img src="/images/Document-icon.svg" alt="document-img" />
</div>
<div class="down-item-wrap">
<a class="download-link btn-link" href="#" target="_blank">
Document 10
<span class="arrow">
<img src="/images/download.svg" alt="arrow" />
</span>
<span class="arrow-dark">
<img src="/images/download-dark.png" alt="arrow" />
</span>
</a>
<p class="desc-wrap">The Direct Connection of computers to the real world has enabled the technology revolution of the pa.</p>
</div>
</div>
</div>
<div class="col-md-4 dowmItemsCol">
<div class="dowmItems">
<div class="icon-wrap">
<img src="/images/Document-icon.svg" alt="document-img" />
</div>
<div class="down-item-wrap">
<a class="download-link btn-link" href="#" target="_blank">
Document 11
<span class="arrow">
<img src="/images/download.svg" alt="arrow" />
</span>
<span class="arrow-dark">
<img src="/images/download-dark.png" alt="arrow" />
</span>
</a>
<p class="desc-wrap">The Direct Connection of computers to the real world has enabled the technology revolution of the pa.</p>
</div>
</div>
</div>
<div class="col-md-4 dowmItemsCol">
<div class="dowmItems">
<div class="icon-wrap">
<img src="/images/Document-icon.svg" alt="document-img" />
</div>
<div class="down-item-wrap">
<a class="download-link btn-link" href="#" target="_blank">
Document 12
<span class="arrow">
<img src="/images/download.svg" alt="arrow" />
</span>
<span class="arrow-dark">
<img src="/images/download-dark.png" alt="arrow" />
</span>
</a>
<p class="desc-wrap">The Direct Connection of computers.</p>
</div>
</div>
</div>
<div class="col-md-4 dowmItemsCol">
<div class="dowmItems">
<div class="icon-wrap">
<img src="/images/Document-icon.svg" alt="document-img" />
</div>
<div class="down-item-wrap">
<a class="download-link btn-link" href="#" target="_blank">
Document 13
<span class="arrow">
<img src="/images/download.svg" alt="arrow" />
</span>
<span class="arrow-dark">
<img src="/images/download-dark.png" alt="arrow" />
</span>
</a>
<p class="desc-wrap">The Direct Connection of computers to the real world has enabled the technology revolution of the pa.</p>
</div>
</div>
</div>
<div class="col-md-4 dowmItemsCol">
<div class="dowmItems">
<div class="icon-wrap">
<img src="/images/Document-icon.svg" alt="document-img" />
</div>
<div class="down-item-wrap">
<a class="download-link btn-link" href="#" target="_blank">
Document 14
<span class="arrow">
<img src="/images/download.svg" alt="arrow" />
</span>
<span class="arrow-dark">
<img src="/images/download-dark.png" alt="arrow" />
</span>
</a>
<p class="desc-wrap">The Direct Connection of computers to the real world has enabled the technology revolution of the pa.</p>
</div>
</div>
</div>
<div class="col-md-4 dowmItemsCol">
<div class="dowmItems">
<div class="icon-wrap">
<img src="/images/Document-icon.svg" alt="document-img" />
</div>
<div class="down-item-wrap">
<a class="download-link btn-link" href="#" target="_blank">
Document 15
<span class="arrow">
<img src="/images/download.svg" alt="arrow" />
</span>
<span class="arrow-dark">
<img src="/images/download-dark.png" alt="arrow" />
</span>
</a>
<p class="desc-wrap">The Direct Connection of computers.</p>
</div>
</div>
</div>
<div class="col-md-4 dowmItemsCol">
<div class="dowmItems">
<div class="icon-wrap">
<img src="/images/Document-icon.svg" alt="document-img" />
</div>
<div class="down-item-wrap">
<a class="download-link btn-link" href="#" target="_blank">
Document 16
<span class="arrow">
<img src="/images/download.svg" alt="arrow" />
</span>
<span class="arrow-dark">
<img src="/images/download-dark.png" alt="arrow" />
</span>
</a>
<p class="desc-wrap">The Direct Connection of computers to the real world has enabled the technology revolution of the pa.</p>
</div>
</div>
</div>
<div class="col-md-4 dowmItemsCol">
<div class="dowmItems">
<div class="icon-wrap">
<img src="/images/Document-icon.svg" alt="document-img" />
</div>
<div class="down-item-wrap">
<a class="download-link btn-link" href="#" target="_blank">
Document 17
<span class="arrow">
<img src="/images/download.svg" alt="arrow" />
</span>
<span class="arrow-dark">
<img src="/images/download-dark.png" alt="arrow" />
</span>
</a>
<p class="desc-wrap">The Direct Connection of computers to the real world has enabled the technology revolution of the pa.</p>
</div>
</div>
</div>
<div class="col-md-4 dowmItemsCol">
<div class="dowmItems">
<div class="icon-wrap">
<img src="/images/Document-icon.svg" alt="document-img" />
</div>
<div class="down-item-wrap">
<a class="download-link btn-link" href="#" target="_blank">
Document 18
<span class="arrow">
<img src="/images/download.svg" alt="arrow" />
</span>
<span class="arrow-dark">
<img src="/images/download-dark.png" alt="arrow" />
</span>
</a>
<p class="desc-wrap">The Direct Connection of computers.</p>
</div>
</div>
</div>
<a class="show-more-down btn-link">Show all Documents</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="download-element {{ bgGrey ? 'bg-grey' : 'bg-white' }}{% if paragraph_id %} download-element-{{ paragraph_id }}{% endif %}"{% if paragraph_id %} data-paragraph-id="{{ paragraph_id }}"{% endif %}>
<div class="container">
<div class="title-warp">
<h2 class="title"> {{subTitle}}</h2>
<h1 class="main-title">{{mainTitle}}</h1>
<p class="descWrap">{{desc}}</p>
</div>
{% for item in downloadbox %}
<div class="accordion" id="accordionExample{{loop.index}}">
<div class="accordion-item">
<h2 class="accordion-header" id="heading{{loop.index}}">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{loop.index}}" aria-expanded="true" aria-controls="collapse{{loop.index}}">
{{ item.title}}
</button>
</h2>
<div id="collapse{{loop.index}}" class="accordion-collapse collapse" aria-labelledby="heading{{loop.index}}" data-bs-parent="#accordionExample">
<div class="accordion-body">
<div class="linkWrap">
<p>{{item.desc}}</p>
<a class="btn-link" href="{{item.btnLink}}">
{{item.btnTitle}}
</a>
</div>
<div class="downloadItemWrap">
<div class="row dowmItemsRow">
{% for downItem in item.downloadBlock %}
<div class="col-md-4 dowmItemsCol">
<div class="dowmItems">
<div class="icon-wrap">
<img src="{{downItem.icon}}" alt="document-img"/>
</div>
<div class="down-item-wrap">
<a class="download-link btn-link" href="{{downItem.link}}" target="_blank">
{{downItem.titleText}}
<span class="arrow">
<img src="/images/download.svg" alt="arrow" />
</span>
<span class="arrow-dark">
<img src="/images/download-dark.png" alt="arrow" />
</span>
</a>
<p class="desc-wrap">{{downItem.text}}</p>
</div>
</div>
</div>
{% endfor %}
{%if ( item.downloadBlock | length > 6 )%}
<a class="show-more-down btn-link">{{btn_text}}</a>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{
"subTitle": "BlueBox Investment Strategy",
"mainTitle": "Funds Documents",
"desc": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
"btn_text": "Show all Documents",
"btn_link": "#",
"bgGrey": false,
"paragraph_id": null,
"downloadbox": [
{
"item": null,
"title": "KIIDs ENGLISH",
"desc": "Investor Information and other Documents related to the Fund KIIDs ENGLISH",
"btnLink": "https://gfdplatform.pwc.lu/facilities-agent/view/ecd04c6d-fefb-4d7a-bc4",
"btnTitle": "https://gfdplatform.pwc.lu/facilities-agent/view/ecd04c6d-fefb-4d7a-bc4",
"downloadBlock": [
{
"item": null,
"icon": "/images/Document-icon.svg",
"titleText": "Document 1",
"link": "#",
"text": "The Direct Connection of computers to the real world has enabled the technology revolution of the pa."
},
{
"item": null,
"icon": "/images/Document-icon.svg",
"titleText": "Document 2",
"link": "#",
"text": "The Direct Connection of computers to the real world has enabled the technology revolution of the pa."
},
{
"item": null,
"icon": "/images/Document-icon.svg",
"titleText": "Document 3",
"link": "#",
"text": "The Direct Connection of computers."
},
{
"item": null,
"icon": "/images/Document-icon.svg",
"titleText": "Document 4",
"link": "#",
"text": "The Direct Connection of computers to the real world has enabled the technology revolution of the pa."
},
{
"item": null,
"icon": "/images/Document-icon.svg",
"titleText": "Document 5",
"link": "#",
"text": "The Direct Connection of computers."
},
{
"item": null,
"icon": "/images/Document-icon.svg",
"titleText": "Document 6",
"link": "#",
"text": "The Direct Connection of computers to the real world has enabled the technology revolution of the pa."
}
]
},
{
"item": null,
"title": "KIIDs FRENCH",
"desc": "Investor Information and other Documents related to the Fund KIIDs FRENCH",
"btnLink": "https://gfdplatform.pwc.lu/facilities-agent/view/ecd04c6d-fefb-4d7a-bc4",
"btnTitle": "https://gfdplatform.pwc.lu/facilities-agent/view/ecd04c6d-fefb-4d7a-bc4",
"downloadBlock": [
{
"item": null,
"icon": "/images/Document-icon.svg",
"titleText": "Document 1",
"link": "#",
"text": "The Direct Connection of computers to the real world has enabled the technology revolution of the pa."
},
{
"item": null,
"icon": "/images/Document-icon.svg",
"titleText": "Document 2",
"link": "#",
"text": "The Direct Connection of computers to the real world has enabled the technology revolution of the pa."
},
{
"item": null,
"icon": "/images/Document-icon.svg",
"titleText": "Document 3",
"link": "#",
"text": "The Direct Connection of computers."
},
{
"item": null,
"icon": "/images/Document-icon.svg",
"titleText": "Document 4",
"link": "#",
"text": "The Direct Connection of computers to the real world has enabled the technology revolution of the pa."
},
{
"item": null,
"icon": "/images/Document-icon.svg",
"titleText": "Document 5",
"link": "#",
"text": "The Direct Connection of computers to the real world has enabled the technology revolution of the pa."
},
{
"item": null,
"icon": "/images/Document-icon.svg",
"titleText": "Document 6",
"link": "#",
"text": "The Direct Connection of computers."
},
{
"item": null,
"icon": "/images/Document-icon.svg",
"titleText": "Document 7",
"link": "#",
"text": "The Direct Connection of computers to the real world has enabled the technology revolution of the pa."
},
{
"item": null,
"icon": "/images/Document-icon.svg",
"titleText": "Document 8",
"link": "#",
"text": "The Direct Connection of computers to the real world has enabled the technology revolution of the pa."
},
{
"item": null,
"icon": "/images/Document-icon.svg",
"titleText": "Document 9",
"link": "#",
"text": "The Direct Connection of computers."
},
{
"item": null,
"icon": "/images/Document-icon.svg",
"titleText": "Document 10",
"link": "#",
"text": "The Direct Connection of computers to the real world has enabled the technology revolution of the pa."
},
{
"item": null,
"icon": "/images/Document-icon.svg",
"titleText": "Document 11",
"link": "#",
"text": "The Direct Connection of computers to the real world has enabled the technology revolution of the pa."
},
{
"item": null,
"icon": "/images/Document-icon.svg",
"titleText": "Document 12",
"link": "#",
"text": "The Direct Connection of computers."
},
{
"item": null,
"icon": "/images/Document-icon.svg",
"titleText": "Document 13",
"link": "#",
"text": "The Direct Connection of computers to the real world has enabled the technology revolution of the pa."
},
{
"item": null,
"icon": "/images/Document-icon.svg",
"titleText": "Document 14",
"link": "#",
"text": "The Direct Connection of computers to the real world has enabled the technology revolution of the pa."
},
{
"item": null,
"icon": "/images/Document-icon.svg",
"titleText": "Document 15",
"link": "#",
"text": "The Direct Connection of computers."
},
{
"item": null,
"icon": "/images/Document-icon.svg",
"titleText": "Document 16",
"link": "#",
"text": "The Direct Connection of computers to the real world has enabled the technology revolution of the pa."
},
{
"item": null,
"icon": "/images/Document-icon.svg",
"titleText": "Document 17",
"link": "#",
"text": "The Direct Connection of computers to the real world has enabled the technology revolution of the pa."
},
{
"item": null,
"icon": "/images/Document-icon.svg",
"titleText": "Document 18",
"link": "#",
"text": "The Direct Connection of computers."
}
]
}
]
}
-
Content:
import $ from "jquery"; $(document).ready(function () { $(".dowmItemsRow").each(function (index) { const totalLenght = $(this).children(".dowmItemsCol").length ; var countNo = 6; let btn = $(this).find(".show-more-down"); console.log(btn); $(this) .find(".dowmItemsCol") .slice(0, 6) .show(); // $(document).on("click touchstart", btn , function(e) $(btn).click(function(e){ e.preventDefault(); $(this) .parent() .find(".dowmItemsCol") .slice(countNo, countNo + 6) .slideDown(); if ( $(this) .parent() .find(".dowmItemsCol:hidden").length === 0 ) { $(this).css("display", "none"); } countNo = countNo + 6; }); }); $(".download-link").click(function() { $(".download-link").removeClass("active"); $(this).addClass("active"); }); }); - URL: /components/raw/download_element/download_element.js
- Filesystem Path: components/03-components/download_element/download_element.js
- Size: 917 Bytes
-
Content:
.download-element { padding: 150px 0; @include media-breakpoint-down(lg) { padding: 80px 0; } .container { max-width: 1060px; padding: 0 15px; } .title-warp { padding-bottom: 46px; @include media-breakpoint-down(lg) { padding-bottom: 30px; } .title { font-size: 17px; font-family: "OpenSans_light"; line-height: 23px; color: #120f29; } .main-title { font-size: 60px; font-family: "PlayfairDisplay-Bold"; color: #120f29; margin-bottom: 0; @include media-breakpoint-down(lg) { font-size: 40px; } } .descWrap { max-width: 665px; padding-top: 25px; } } .dowmItemsCol { margin-bottom: 30px; display: none; &:last-child { margin-bottom: 0; } } .downloadItemWrap { padding-top: 60px; // padding-bottom: 60px; @include media-breakpoint-down(md) { padding-top: 35px; // padding-bottom: 35px; } .dowmItems { .icon-wrap { padding-bottom: 6px; img { max-width: 100%; height: 27px; } } } .down-item-wrap { .download-link { color: $black; font-size: 14px; font-family: "PlayfairDisplay-Bold"; line-height: 30px; text-decoration: none; transition: all 0.2s ease-in-out; display: inline-flex; padding-bottom: 0; @include media-breakpoint-up(md) { &.active, &:hover { color: $secondary; .arrow { display: block; } } } .arrow { display: none; img { max-width: 100%; height: 19px; } } .arrow-dark { display: none; @include media-breakpoint-down(md) { display: block; } img { max-width: 100%; height: 19px; } } } .desc-wrap { font-size: 14px; line-height: 22px; padding-top: 3px; } } } .show-more-down { padding-top: 10px; max-width: max-content; margin-left: 10px; } } .accordion-body { padding: 0; padding-bottom: 30px; @include media-breakpoint-down(md) { padding-bottom: 0; } } .accordion-item { border: 0; padding-bottom: 30px; padding-top: 30px; border-bottom: 1px solid #37aae1; &:last-of-type { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } } .accordion-button { border: 0; color: #120f29; font-size: 29px; font-family: "PlayfairDisplay-Bold"; line-height: 38px; padding: 0; padding-right: 20px; @include media-breakpoint-down(md) { font-size: 22px; } &:after { width: 26px; height: 26px; background-image: url("/images/accordownarrow.svg"); background-size: 26px; } &:not(.collapsed)::after { background-image: url("/images/accordownarrow.svg"); transform: rotate(-180deg); } } .accordion-button:not(.collapsed) { color: #252053; background-color: transparent; box-shadow: none; } .accordion-button:focus { border-color: transparent; outline: 0; box-shadow: none; } .linkWrap { margin-top: 20px; p { margin-bottom: 0; } a { font-size: 15px; } } - URL: /components/raw/download_element/download_element.scss
- Filesystem Path: components/03-components/download_element/download_element.scss
- Size: 3.3 KB
- Handle: @download_element
- Preview:
- Filesystem Path: components/03-components/download_element/download_element.twig
There are no notes for this item.