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.
2. Give them each the class ‘team-member‘ (Advanced > CSS ID & Classes).
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.!