How To Make the Divi Person Module Collapsible

by Adam Hansen

Sep 2, 2020 | Website Design

If you want to make your ‘Meet the Team’ page stand out, or simply want to condense all of your team members’ bios on the page, this post is for you!

We’ll show you how to turn the regular Divi ‘Person’ module into a collapsible, accordion-like module.

Instructions

1. Add ‘person’ modules to page.

make an awesome meet the team page in divi

2. Give them each the class ‘team-member‘ (Advanced > CSS ID & Classes).

make an awesome meet the team page in divi

3. Add a code module to the page. Copy and paste in the following CSS:

<style>
.team-member {
cursor: pointer;
}
.team-member .et_pb_team_member_description {
display: none;
padding: 0px 12px 15px 12px;
position: initial;
}
.team-member .et_pb_team_member_image {
max-width: 100%;
z-index: -1;
}
.team-member.unclicked .et_pb_team_member_image:before {
content: '';
opacity: 0 !important;
}
.team-member ul.et_pb_member_social_links {
padding: 13px 0 0px 1em;
}
@media (max-width: 980px) and (min-width: 768px){
.team-member .et_pb_team_member_image {
float: none;
margin: 0;}
}
</style>

 

4. Add another code module. This one is for the Javascript. Copy and paste the following code:

<script>
jQuery(document).ready(function(){
jQuery('.team-member').click(function(){
jQuery( '.team-member' ).each(function() {
if (jQuery(this).find('.et_pb_team_member_description').css('display') == 'block')
{
jQuery(this).find('.et_pb_team_member_description').slideToggle("fast", "linear");
}
});
if (jQuery(this).find('.et_pb_team_member_description').css('display') == 'none')
{
jQuery(this).find('.et_pb_team_member_description').slideToggle("fast", "linear");
}
});
});
</script>

 

You’re done!

Want to take it a step further?

You can purchase this cool design of ours from the Divi Marketplace for only $15! It can be fully customized to match your brand’s colors, fonts, etc.!

Pin It on Pinterest

Share This

Please share this post with your friends!