Some css and javascript for a Themify solution to change row shown on hover on buttons

gistfile1.txt

<style>
/* Add CSS class, jp-hover-slide, to each row.  Add an ID of jp-hover-slide-?, where ? is the slide number.
 * On the buttons, give each a class of jp-hover-button and make the id unique and end it with the slide number..ex. jp-button-1
 * Add .jp-full-height to the column containing the button to make the buttons all identical in height no matter the text content
 */
 
body:not(.themify_builder_active) .jp-hover-slide {
  display: none;
  opacity: 0;
  transition: all 1.3s;
}

body:not(.themify_builder_active) .jp-hover-slide.jp-active {
  display: flex !important;
  opacity: 1;
}

body:not(.themify_builder_active) .jp-full-height div, .jp-full-height a {
  height: 100%;
}
.jp-full-height a {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

</style>

<script>

/**
     * From https://github.com/WickyNilliams/headroom.js/blob/3282c23bc6 @type {((callback: FrameRequestCallback) => number) | *}
     */

    window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame;

    /**
     * Handles debouncing of events via requestAnimationFrame
     * @see http://www.html5rocks.com/en/tutorials/speed/animations/
     * @param {Function} callback The callback to handle whichever event
     */
    function Debouncer (callback) {
        this.callback = callback;
        this.ticking = false;
    }
    Debouncer.prototype = {
        constructor : Debouncer,

        /**
         * dispatches the event to the supplied callback
         * @private
         */
        update : function() {
            this.callback && this.callback();
            this.ticking = false;
        },

        /**
         * ensures events don't get stacked
         * @private
         */
        requestTick : function() {
            if(!this.ticking) {
                requestAnimationFrame(this.rafCallback || (this.rafCallback = this.update.bind(this)));
                this.ticking = true;
            }
        },

        /**
         * Attach this as the event listeners
         */
        handleEvent : function() {
            this.requestTick();
        }
    };

    Debouncer = Debouncer;


function getMaxHeight( elements ) {
  let maxHeight = 0;
  elements.forEach( s => {
   s.style.height = 'inherit';
    let height = s.offsetHeight;
    if( height === 0 ) {
      s.style.position = 'absolute';
      s.style.visible = 'hidden';
      s.style.display = 'block';
      height = s.offsetHeight;
      s.style.position = 'absolute';
      s.style.display = 'none';
      s.style.visible = 'visible';
      s.style.position = 'static';
    } 
    
    if (maxHeight < height) {
      maxHeight = height;
    }
    })
  return maxHeight;
}

function setMaxHeight( elements, height ) {
  elements.forEach( e => {
    e.style.height=height + 'px';
  })
}

function checkMaxHeight( elements ) {
  const maxHeight = getMaxHeight( elements );
    setMaxHeight( elements, maxHeight );

}

document.addEventListener('DOMContentLoaded', function() {
  
  //get slides
  const slides = document.querySelectorAll('.jp-hover-slide');
  //set height of each slide to largest slide
  checkMaxHeight( slides );
  
  // bind a checkMaxHeight on window resize
  const onResizeCheckMaxHeight = new Debouncer( function() {
    checkMaxHeight( slides );
  });
  window.addEventListener('resize', onResizeCheckMaxHeight.handleEvent.bind(onResizeCheckMaxHeight) );
  
  const buttons = document.querySelectorAll('.jp-hover-button');
  buttons.forEach( b => {
    b.addEventListener('mouseenter', e => {
      
      slides.forEach( s => {
        s.classList.remove('jp-active')
        s.style.display="none"
      })
      const slideNum = e.target.id.match(/\d+/)[0];
      const slide = document.getElementById('jp-hover-slide-' + slideNum);
      slide.style.display = 'block';
      slide.classList.add('jp-active')

    })
  })
});
</script>