jQuery addClass example

Change class name on click in jQuery

by lsubirana

HTML

<div id="partnerDiv">

</div>
<div class="partners slickPad initCarousel">
  <div class="partner"><a target="_partners" href="https://vx.vidyo.com/product/ajenta/" class="partner__link" rel="noopener noreferrer"><img width="160" height="150" src="https://wahe02abh5w3ksbrp1p42ujo-wpengine.netdna-ssl.com/wp-content/uploads/2016/01/Ajenta.jpg" class="partnerlogo" alt="Ajenta" /></span></a>
    <h2>Ajenta</h2>
  </div>
  <div class="partner"><a target="_partners" href="https://vx.vidyo.com/product/amd-global-telemedicine/" class="partner__link" rel="noopener noreferrer"><img width="400" height="376" src="https://wahe02abh5w3ksbrp1p42ujo-wpengine.netdna-ssl.com/wp-content/uploads/2016/01/AMD.png" class="partnerlogo" alt="AMD Global Telemedicine Logo" /></span></a>
    <h2>AMD Global Telemedicine</h2>
  </div>
  <div class="partner"><a target="_partners" href="https://vx.vidyo.com/product/american-well/" class="partner__link" rel="noopener noreferrer"><img width="400" height="375" src="https://wahe02abh5w3ksbrp1p42ujo-wpengine.netdna-ssl.com/wp-content/uploads/2016/01/American-Well.jpg" class="partnerlogo" alt="American Well" /></span></a>
    <h2>American Well</h2>
  </div>
  <div class="partner"><a target="_partners" href="https://vx.vidyo.com/product/avizia/" class="partner__link" rel="noopener noreferrer"><img width="400" height="376" src="https://wahe02abh5w3ksbrp1p42ujo-wpengine.netdna-ssl.com/wp-content/uploads/2016/02/Avizia-1.png" class="partnerlogo" alt="Avizia Logo" /></span></a>
    <h2>Avizia</h2>
  </div>
  <div class="partner"><a target="_partners" href="https://vx.vidyo.com/product/cerner/" class="partner__link" rel="noopener noreferrer"><img width="400" height="376" src="https://wahe02abh5w3ksbrp1p42ujo-wpengine.netdna-ssl.com/wp-content/uploads/2016/02/Cerner-1.png" class="partnerlogo" alt="Cerner Logo" /></span></a>
    <h2>Cerner</h2>
  </div>
  <div class="partner"><a target="_partners" href="https://vx.vidyo.com/product/egton/"...

CSS

.partners .partner img {
  width:30px;
  height:30px;
}
.partners .partner a {
  	display: block;
  	border: 1px solid #bebebe;
    box-shadow: 0px 0px 12px rgba(8, 108, 165,.4);
    margin: 8px;
    padding: 20px;
  	transition: .4s all;
    width:30px;
}
.partners .partner a:hover {
    transform: scale(1.05);
}
.partners .partner h2 {
	font-size:16px;margin:0;text-align:center;
}

@media only screen and (max-width: 480px){
  .partners .partner a {
    padding: 2px;
	}
}

JavaScript

function stripHtml(str, start, end){
  var idxStart = str.indexOf(start)
  var idxClose = str.indexOf(end, idxStart)
  var content = str.substring(idxStart, idxClose+end.length)
  return str.replace(content, '')
}
function getHtml(str, start, end){
  var idxStart = str.indexOf(start)
  var idxClose = str.indexOf(end, idxStart)
  var content = str.substring(idxStart, idxClose+end.length)
  return content
}
jQuery(document).ready(function ($) {
  $('.partners .partner a').click(function(evt){
    evt.preventDefault();
    var href = $(this).attr('href');
    var image = $(this).html()
    
    href = href.replace('vx.vidyo.com','vidyoxchange.staging.wpengine.com')
    var html = $.ajax({
      url:href,
      type: 'GET',
      success : function(data){
        
        // remove form
        data = stripHtml(data, '<div id="TouchForm"','</div>')
        data = stripHtml(data, '<div class="VidyoEx-Contact','</div>')
        data = stripHtml(data, '<div class="product_meta','</div>')
        
        
        var content = getHtml(data, '<div class="woocommerce-Tabs-panel','</div>')
        var description = ''
        var idx = 0
        while(content.indexOf('<p', idx) > 0){
          description += getHtml(content.substring(idx), '<p', '</p>')
          idx = content.indexOf('<p', idx) + 1
        }
        var solutions = getHtml(data, '<div itemprop="description', '</div>')
        solutions = solutions.replace(/src=\"\/wp-content/g, 'src="//vidyoxchange.staging.wpengine.com/wp-content')
        solutions = solutions.replace(/href=\"\/wp-content/g, 'href="//vidyoxchange.staging.wpengine.com/wp-content')
        
        if(solutions.indexOf('<hr') > 0){
        	solutions = solutions.substring(0, solutions.indexOf('<hr')) + '</div>'
        }
        $('#partnerDiv').html('<div>' + image + description + solutions + '</div>')
      }
    })
    //$('#partnerDiv').load(href)
    
  })
  
})