Subversion Repositories SmartDukaan

<style>

    .expanded {
        position: absolute;
        z-index: 9999;
        box-shadow: 1px 2px 3px #ccc !important;
        background: white;
        max-height: unset !important;
    }

    .mk_offer_container {
        min-height: 200px !important;
    }

    .modal {
        z-index: 9999;
    }
</style>

#foreach( $offer in $publishedOffers )
<div class="col-lg-6 info-box white-bg mk_offer_container" style="margin-bottom:1px">
    <h3 style="margin-top:-2px;color:#c70db8;margin-bottom:4px;font-weight:bold; font-size:20px;">
        $offer.getName()
    </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>
    <span onclick="showMore(this)">See More</span>
    <p style="float:right;font-size:15px; margin:0px 0px 0px; " class="description-offer"
       data-offerid="$offer.getId()" data-toggle="modal"
       data-backdrop="static" data-keyboard="false"><a href="javascript:void(0)">All terms & conditions</a></p>
</div>
#end

<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>