| Line -... |
Line 1... |
| - |
|
1 |
<style>
|
| - |
|
2 |
/*.mk_offer_container {*/
|
| - |
|
3 |
/* transition: position 0.3s ease, z-index 0.3s ease;*/
|
| - |
|
4 |
|
| - |
|
5 |
/*}*/
|
| - |
|
6 |
|
| - |
|
7 |
.expanded {
|
| - |
|
8 |
position: absolute;
|
| - |
|
9 |
z-index: 9999;
|
| - |
|
10 |
box-shadow: 1px 2px 3px #ccc;
|
| - |
|
11 |
}
|
| - |
|
12 |
</style>
|
| - |
|
13 |
|
| 1 |
#foreach( $offer in $publishedOffers )
|
14 |
#foreach( $offer in $publishedOffers )
|
| 2 |
<div class="col-lg-6 info-box white-bg" style="margin-bottom:1px">
|
15 |
<div class="col-lg-6 info-box white-bg mk_offer_container" style="margin-bottom:1px">
|
| 3 |
<h3 style="margin-top:-2px;color:#c70db8;margin-bottom:4px;font-weight:bold; font-size:20px;">
|
16 |
<h3 style="margin-top:-2px;color:#c70db8;margin-bottom:4px;font-weight:bold; font-size:20px;">
|
| 4 |
$offer.getName()
|
17 |
$offer.getName()
|
| 5 |
</h3>
|
18 |
</h3>
|
| 6 |
<h5 style="margin-top:-2px;font-size:15px;color:#5547d0;font-weight:bold">
|
19 |
<h5 style="margin-top:-2px;font-size:15px;color:#5547d0;font-weight:bold">
|
| 7 |
From $dateMonthFormatter.format($offer.getStartDate()) to $dateMonthFormatter.format($offer.getEndDate()), Based on $offer.getSchemeType()
|
20 |
From $dateMonthFormatter.format($offer.getStartDate()) to $dateMonthFormatter.format($offer.getEndDate()), Based
|
| - |
|
21 |
on $offer.getSchemeType()
|
| 8 |
</h5>
|
22 |
</h5>
|
| 9 |
<h4 style="color:green;margin-top:0px;margin-bottom:0px;">
|
23 |
<h4 style="color:green;margin-top:0px;margin-bottom:0px;">
|
| 10 |
$offer.getDashboardHtml()
|
24 |
$offer.getDashboardHtml()
|
| 11 |
</h4>
|
25 |
</h4>
|
| - |
|
26 |
<br>
|
| - |
|
27 |
<span onclick="showMore(this)">See More</span>
|
| 12 |
<p style="float:right;font-size:15px; margin:0px 0px 0px; " class="description-offer"
|
28 |
<p style="float:right;font-size:15px; margin:0px 0px 0px; " class="description-offer"
|
| 13 |
data-offerid="$offer.getId()" data-toggle="modal"
|
29 |
data-offerid="$offer.getId()" data-toggle="modal"
|
| 14 |
data-backdrop="static" data-keyboard="false"><a href="javascript:void(0)">All terms & conditions</a></p>
|
30 |
data-backdrop="static" data-keyboard="false"><a href="javascript:void(0)">All terms & conditions</a></p>
|
| 15 |
</div>
|
31 |
</div>
|
| 16 |
#end
|
32 |
#end
|
| - |
|
33 |
|
| - |
|
34 |
<script>
|
| - |
|
35 |
function showMore(button) {
|
| - |
|
36 |
// Find the closest parent container with the class "mk_offer_container"
|
| - |
|
37 |
var parentContainer = button.closest(".mk_offer_container");
|
| - |
|
38 |
var mainparentContainer = button.closest("#offer-container");
|
| - |
|
39 |
|
| - |
|
40 |
// Get all elements with class "mk_show" inside the parent container
|
| - |
|
41 |
var mkShowElements = parentContainer.getElementsByClassName("mk_show");
|
| - |
|
42 |
|
| - |
|
43 |
// Toggle the class "expanded" on the main parent container
|
| - |
|
44 |
mainparentContainer.classList.toggle("expanded");
|
| - |
|
45 |
|
| - |
|
46 |
// Loop through the elements and toggle their display
|
| - |
|
47 |
for (var i = 0; i < mkShowElements.length; i++) {
|
| - |
|
48 |
mkShowElements[i].style.display = (mkShowElements[i].style.display === 'block') ? 'none' : 'block';
|
| - |
|
49 |
}
|
| - |
|
50 |
|
| - |
|
51 |
// Toggle the text content of the clicked span
|
| - |
|
52 |
button.textContent = (button.textContent === 'See More') ? 'Less' : 'See More';
|
| - |
|
53 |
}
|
| - |
|
54 |
</script>
|