Untitled

mail@pastecode.io avatar
unknown
html
20 days ago
3.1 kB
0
Indexable
Never
<div class="card-container">

    <div class="col-xs-12 card" id="card1">
        <div class="col-sm-6 col-xs-7" style="border-top: 1px solid rgba(0, 0, 0, 0.45); padding: 0;">
            <div style="display: flex;align-items: center;gap: 26px;">
                <p style="color: rgb(0, 0, 0); font-family: Inter; font-size: 18px; font-style: normal; font-weight: 700; line-height: normal; text-align: left;">Echo</p>
                <p style="color: rgb(0, 0, 0); font-family: Inter; font-size: 18px; font-style: normal; font-weight: 400; line-height: normal;">20 € p.p</p>
            </div>
            <p>Discover 4 vintages vertical wine tasting of Syrah. Time flies and can be beneficial for the complexity of a wine bottle.</p>
        </div>
    
        <div class="col-sm-4 col-xs-5">
           <a href="https://koswinery.workadu.com/services/59315" class="button2" style="text-decoration: none;" title=""><i class="fa fa-long-arrow-right" id="arrowIcon"></i></a>
        </div>
    </div>

    <div class="col-xs-12 card" id="card2">
        <div class="col-sm-6 col-xs-7" style="border-top: 1px solid rgba(0, 0, 0, 0.45);padding: 0;">
            <div style="display: flex;align-items: center;gap: 20px;"> 
                <p style="color: rgb(0, 0, 0); font-family: Inter; font-size: 18px; font-style: normal; font-weight: 700; line-height: normal; text-align: left;">Ask for our sommelier</p>
                <p style="color: rgb(0, 0, 0); font-family: Inter; font-size: 18px; font-style: normal; font-weight: 400; line-height: normal;">5 € p.p</p>
            </div>
                <p>Being a genuine wine lover, you might need some more info. An enologist part of the Akrani Team, will accompany you throughout the Emmelia Tasty Pairing of your choice. Learn more about winemaking approach, the diversity of Kos "terroirs" as well as the varietal characters of indigenous grapes.</p>
        </div>

        <div class="col-sm-4 col-xs-5">
         <a href="https://koswinery.workadu.com/services/48446" class="button2" style="text-decoration: none;" title=""><i class="fa fa-long-arrow-right"></i></a>
        </div>
         
    </div>

    <p id="alcoholInfo"
        style="color: rgba(0, 0, 0, 0.86); font-family: Inter; font-size: 14px; font-style: italic; font-weight: 400; line-height: normal;">
        * None of them is alcohol free
    </p>

    <div class="col-xs-12">
      <button id="showMoreBtn"> View all<i id="arrowIcon" class="fa fa-arrow-down"></i></button>
    </div>
</div>



<script>
 $(document).ready(function () {
    $('#showMoreBtn').click(function () {
        $('.card').toggle();

        var cardsVisible = $('.card').is(':visible');

        var arrowIcon = $('<i>').attr('id', 'arrowIcon').addClass(cardsVisible ? 'fa fa-arrow-up' : 'fa fa-arrow-down');

        if (cardsVisible) {
            $('#alcoholInfo').removeClass('hidden');
            $(this).removeClass('collapsed').html('HIDE');
        } else {
            $(this).addClass('collapsed').html('VIEW ALL');
        }

        $(this).append(arrowIcon);
    });
});







</script>
Leave a Comment