Subversion Repositories SmartDukaan

<style>
    .grid-box {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
        gap: 10px;
    }

    .item {
        background: #f2f2f2;
        padding: 16px;
        /*height: 120px;  same height for all, adjust as needed */
        box-sizing: border-box;
    }
</style>
<div class="grid-box">
    #foreach( $offer in $publishedOffers )
        <div class="item info-box white-bg mk_offer_container description-offer" style="margin-bottom:1px"
             data-offerid="$offer.getId()" data-toggle="modal"
             data-backdrop="static" data-keyboard="false">
            <h3 style="margin-top:-2px;color:#c70db8;margin-bottom:4px;font-weight:bold; font-size:20px;">
                <a href="javascript:void(0)" class="description-offer" data-offerid="$offer.getId()"
                   style="color:#c70db8; text-decoration:none;">
                    $offer.getName()
                </a>
            </h3>
            <h5 style="margin-top:-2px;font-size:15px;color:#5547d0;font-weight:bold">
                From $dateMonthFormatter.format($offer.getStartDate())
                to $dateMonthFormatter.format($offer.getEndDate()), Based
                on $offer.getSchemeType()
            </h5>
            <!--<h4 style="color:green;margin-top:0px;margin-bottom:0px;">
        ##$offer.getDashboardHtml()
    </h4>-->
            <br>

            <p style="float:right;font-size:15px; margin:0px 0px 0px; "><a href="javascript:void(0)">All terms &
                conditions</a></p>
        </div>
    #end
</div>

<script>
    function showMore(button) {
        // Find the closest parent container with the class "mk_offer_container"
        var parentContainer = button.closest(".mk_offer_container");
        var mainparentContainer = button.closest("#offer-container");

        // Get all elements with class "mk_show" inside the parent container
        var mkShowElements = parentContainer.getElementsByClassName("mk_show");

        // Toggle the class "expanded" on the main parent container
        mainparentContainer.classList.toggle("expanded");

        // Loop through the elements and toggle their display
        for (var i = 0; i < mkShowElements.length; i++) {
            mkShowElements[i].style.display = (mkShowElements[i].style.display === 'block') ? 'none' : 'block';
        }

        // Toggle the text content of the clicked span
        button.textContent = (button.textContent === 'See More') ? 'Less' : 'See More';
    }
</script>