JavaScript code snippet for displaying More/Less functionality.

gistfile1.txt

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
var $ = jQuery;
    $(document).ready(function(){
        
    $('.show-more').on('click', function(){
        event.preventDefault()
        $(this).toggleClass('content-hide')
        $(this).closest('.profile-card').find('.show-less, .details-area').toggleClass('content-hide')
    })
    
    $('.show-less').on('click', function(){
        event.preventDefault()
        $(this).toggleClass('content-hide')
        $(this).closest('.profile-card').find('.show-more, .details-area').toggleClass('content-hide')
    })
    
    })
</script>
<style>
.content-hide{
    display: none;
}
</style>