<ul class="text-justify">
	<li>
        <small>{{$users->pro_experience}}</small>
    </li>
</ul>

<ul class="text-justify">
	<li class="">
		<!-- <small>{{$users->pro_experience}}</small> -->
		@if(strlen($users->pro_experience) > 50)
			{{substr($users->pro_experience,0,50)}}
			<span class="read-more-show hide_content">More<i class="fa fa-angle-down"></i></span>
			<span class="read-more-content"> {{substr($users->pro_experience,50,strlen($users->pro_experience))}} 
			<span class="read-more-hide hide_content">Less <i class="fa fa-angle-up"></i></span> </span>
		@else
			{{$users->pro_experience}}
		@endif
	</li>
</ul>

<script type="text/javascript">
// Hide the extra content initially:
            $('.read-more-content').addClass('hide_content')
            $('.read-more-show, .read-more-hide').removeClass('hide_content')

            // Set up the toggle effect:
            $('.read-more-show').on('click', function(e) {
              $(this).next('.read-more-content').removeClass('hide_content');
              $(this).addClass('hide_content');
              e.preventDefault();
            });
            $('.read-more-hide').on('click', function(e) {
              var p = $(this).parent('.read-more-content');
              p.addClass('hide_content');
              p.prev('.read-more-show').removeClass('hide_content'); // Hide only the preceding "Read More"
              e.preventDefault();
            });
</script>

<style type="text/css">
    .read-more-show{
      cursor:pointer;
      color: #ed8323;
    }
    .read-more-hide{
      cursor:pointer;
      color: #ed8323;
    }

    .hide_content{
      display: none;
    }
</style>