HD Collapse expand

Logos to stay at the same position

by George Y

HTML

<script src="https://test.hellasdirect.gr/assets/18f7843c1c883bb7f41284556bb59c96.js"></script>
<link rel="stylesheet" href="https://test.hellasdirect.gr/common/styles/15.0.4/main.min.css">
<link rel="stylesheet" href="https://test.hellasdirect.gr/common/static/9.2.3/static.min.css">
<link rel="stylesheet" href="https://test.hellasdirect.gr/assets/3ff63f15326d4b78230c08be2caf0c40.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="col-12 col-sm-10 col-lg-8 partnerships partnerships-section">
        <div class="hd-zig-zag padding-bottom-md padding-top-md margin-top-md">
          <div class="row">
            <div class="col-12 col-sm-5 col-lg-4 partnership-image-section">
              <div class="partnership-image">
                <img src="https://test.hellasdirect.gr/user/pages/22.partnerships/praktiker.png" class="img-fluid">
              </div>
            </div>
            <div class="col-12 col-sm-7 col-lg-8">
              <p class="hd-tag margin-top-xs">Aσφάλεια αυτοκινήτου</p>
              <h4 class="margin-top-xs">Μείωσε το ασφάλιστρό σου κατά 15%</h4>
              <div class="hd-show-more-section">
                <div class="hd-show-more-text" style="display: none;">
                  <p class="margin-top-xxs">Βρες μας μέσα από τη σελίδα ή το app του Praktiker και κέρδισε 15% έκπτωση στο πρώτο συμβόλαιο ασφάλειας αυτοκινήτου σου με τον προσωποποιημένο κωδικό που θα λάβεις. </p>
                  <p class="hd-text-with-line margin-top-sm">Η προσφορά ισχύει μόνο για νέα συμβόλαια ασφάλειας αυτοκινήτου με διάρκεια πάνω από 90 ημέρες. 
                  </p>
                </div>
                <div class="hd-show-more-link icon-down-arrow" href="#"><span class="show-text">Μάθε περισσότερα</span><span class="hide-text">Κλείσιμο</span> </div>
              </div>
            </div>
          </div>
        </div>
        <div class="hd-zig-zag...

SCSS

// remove margin top and  bottom from your css when expanded
.partnerships .hd-zig-zag.expanded .partnership-image-section {
  margin-top: unset;
  margin-bottom: unset;
}

// remove margin-top and margin bottom when collapsed
.partnerships .hd-zig-zag .partnership-image-section {
  margin-top: unset;
  margin-bottom: unset;
}

// add the following css
.partnership-image-section {
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  
   // change this our tablet breakpoint
    @media only screen and (min-width: '576px') {
     justify-content: center;
    }
}

JavaScript

$(".hd-show-more-link").click(function(event) {

      var $currentTarget = $(this);
      var $previousElement = $currentTarget.prev();
      var $parentRow = $currentTarget.parents('.row');
      var $imageSection = $parentRow.find('.partnership-image-section');

			// if we are collapsing,
      // we wait for the slideToggle animation to complete and remove the max-height style
      // we set on expanding. We need to unset so that it changes height when the text is 
      // wrapped into more lines on resizing
      if ($currentTarget.hasClass('open')) {

        console.log('collapsing')

        $currentTarget.toggleClass("open");
        $previousElement.slideToggle(function() {
          $imageSection.css('max-height', 'unset');
        });

      } else {
				// When expanding, we apply a max-height style to the imagesection div which is the
        // current height of the parent row div BEFORE expanding.
        // This way we keep the image at the same place where it was before.
        console.log('expanding')
        var parentRowHeight = $parentRow.height();
        $imageSection.css('max-height', parentRowHeight + 'px');
        $currentTarget.toggleClass("open");
        $previousElement.slideToggle();
      }

    })