Accordions Full-bleed Images

Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Learn more

Integrate all of your payment acceptance points with our technology to get paid by your customers more easily.

  • Online, in-store, back-office, and over-the-phone integration
  • Local service
  • Credit and debit acceptance
  • Flexible and fully customizable
  • Ecommerce and POS solutions
Inquire Now

Integrate all of your payment acceptance points with our technology to get paid by your customers more easily.

  • Online, in-store, back-office, and over-the-phone integration
  • Local service
  • Credit and debit acceptance
  • Flexible and fully customizable
  • Ecommerce and POS solutions
Inquire Now

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Learn more

How-To

Basically, the trick is to hide the image until the accordion is open, then fade it in. This will avoid a flicker on the part of the image that overlaps the accordion title bar.

  1. Assign the class “gf-toggle” to the section containing the accordion widget.
  2. Add custom HTML using the “Text” view in the accordion
  3. Add custom CSS to the site

HTML in Accordion

				
					<div class="gf-wrapper">
<div class="gf-left">
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
Proin gravida <b>dolor sit amet lacus accumsan</b> et viverra justo commodo. Proin sodales pulvinar tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<a href="#">Learn more</a>

</div>
<div class="gf-right"><img decoding="async" class="alignright fade-in" src="https://danburkegf.getfused.com/wp-content/uploads/2020/12/pexels-photo-1054218.jpeg" /></div>
</div>

CSS

				
					.gf-toggle .elementor-tab-content {
  padding: 0;
}

.gf-toggle.elementor-widget-toggle {
  border-bottom: 1px solid #ccc;   
}

.gf-toggle .elementor-toggle-item {
  border-top: 1px solid #ccc;
}

.gf-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.gf-left,
.gf-right {
  flex: 1 0 50%;
  box-sizing: border-box;
}

.gf-left {
  padding: 1em;
}

.gf-right {
  line-height: 0;
}

.gf-right img {
  object-fit: cover;
  margin-top: -46px;
  max-height: 50vh;
}

@media only screen and (max-width: 960px) {
  .gf-right img {
    margin-top: 0;
    max-height: 75vh;
    width: 100%;
  }
  
  .gf-left, .gf-right {
  flex: 1 0 100%;
  }
}

.elementor-tab-content .gf-right img {
  visibility: hidden;
}

.elementor-active .gf-right img {
  visibility:visible;
}


.fade-in {
animation: fadeIn ease 2s;
-webkit-animation: fadeIn ease 2s;
-moz-animation: fadeIn ease 2s;
-o-animation: fadeIn ease 2s;
-ms-animation: fadeIn ease 2s;
}

@keyframes fadeIn {
0% {opacity:0;}
20% {opacity:0;}
100% {opacity:1;}
}

@-moz-keyframes fadeIn {
0% {opacity:0;}
20% {opacity:0;}
100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
0% {opacity:0;}
20% {opacity:0;}
100% {opacity:1;}
}

@-o-keyframes fadeIn {
0% {opacity:0;}
20% {opacity:0;}
100% {opacity:1;}
}

@-ms-keyframes fadeIn {
0% {opacity:0;}
20% {opacity:0;}
100% {opacity:1;}
}


.elementor-tab-content .elementor-button-wrapper {
    margin-top: 1em;
}