jQuery and Divi in Practice

In this lesson I’ll give you a few practical tips on working with jQuery in Divi. First, we’ll do a short reminder on where we can add jQuery code, and then I will share a few useful examples and things to consider when implementing jQuery in Divi.

Video Chapters

Code used:

jQuery(document).ready(function($){
	function renameLinks() {
		$('.pagination .alignleft a').text('Previous Articles');
		$('.pagination .alignright a').text('Next Articles');
	}
	renameLinks();
	
	$(document).ajaxComplete(function(){
		renameLinks();
	});

	$('.dsa-more-content, .dsa-read-less').hide();
	$('.dsa-read-more').click(function(e){
		e.preventDefault();
		$(this).parent().siblings('.dsa-more-content').slideDown();
		$(this).parent().siblings('.et_pb_button_module_wrapper').find('.dsa-read-less').show();
		$(this).hide();
	});

	$('.dsa-read-less').click(function(e){
		e.preventDefault();
		$(this).parent().siblings('.dsa-more-content').slideUp();
		$(this).parent().siblings('.et_pb_button_module_wrapper').find('.dsa-read-more').show(); 
		$(this).hide();
	});

	$('.dsa-side-toggle').click(function(){
		$(this).toggleClass('opened');
		$('.dsa-side').toggleClass('opened');
	});

	$('#dsa-blog .et_pb_post').each(function(){
		$(this).children().not('.entry-featured-image-url').wrapAll('
');
	});

	$(document).ajaxComplete(function(){
		$('#dsa-blog .et_pb_post').each(function(){
			$(this).children().not('.entry-featured-image-url').not('.blog-wrapper').wrapAll('
');
		});
	});

});

.et_pb_section.dsa-side {
    left: -300px;
    transition: all .3s ease-in-out;
}
.et_pb_section.dsa-side.opened {
    left: 0;
}

.dsa-side-toggle.opened .et-pb-icon {
    transform: rotate(180deg);
}

#dsa-blog .et_pb_post {
    display: flex;
}
#dsa-blog .et_pb_post:nth-child(2n) {
    flex-direction:row-reverse;
}

.blog-wrapper {
    padding: 20px;
    background: #eee;
}

#dsa-blog .et_pb_post img {
    height: 100%;
    object-fit: cover;
}

#dsa-blog a.entry-featured-image-url {
    margin-bottom: 0;
}