Untitled

<div class="card-container">
  <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 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>
   
<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 () {
    // Handle button click event
    $('#showMoreBtn').click(function () {
        // Toggle visibility of both cards
        $('.card').toggle();

        // Toggle visibility of the paragraph and move it accordingly
        if ($('.card').is(':visible')) {
            $('#alcoholInfo').removeClass('hidden').insertAfter('#card2');
            $('#arrowIcon').removeClass('fa-arrow-down').addClass('fa-arrow-up');
            $(this).removeClass('collapsed').text('HIDE');
        } else {
            $('#alcoholInfo').addClass('hidden').insertBefore('#showMoreBtn');
            $('#arrowIcon').removeClass('fa-arrow-up').addClass('fa-arrow-down');
            $(this).addClass('collapsed').text('VIEW ALL');
        }
    });
});





</script>