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