<style>
.content-hide {
    display: none;
}

.details-area {
    max-height: 70px;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.show-more, .show-less {
cursor: pointer;
}

</style>

<script type="text/javascript">
var $ = jQuery;
$(document).ready(function() {
    $('.show-more').on('click', function(event) {
        event.preventDefault();
        var profileCard = $(this).closest('.profile-card');
        var detailsArea = profileCard.find('.details-area');
        
        $(this).addClass('content-hide');
        profileCard.find('.show-less').removeClass('content-hide');

        detailsArea.css('max-height', detailsArea[0].scrollHeight + 'px'); // Rozwijanie
    });

    $('.show-less').on('click', function(event) {
        event.preventDefault();
        var profileCard = $(this).closest('.profile-card');
        var detailsArea = profileCard.find('.details-area');
        
        $(this).addClass('content-hide');
        profileCard.find('.show-more').removeClass('content-hide');
        
        detailsArea.css('max-height', '70px'); // Zwijanie
    });
});
</script>