Hi friends, I want to add read more… button in my blade file where data is coming from database.
below is my code in blade file getalldata.blade.php
<ul class="text-justify">
<li>
<small>{{$users->pro_experience}}</small>
</li>
</ul>
In above Unordered list I am getting a long data from database and I want to add a Read more and Read Less toggle option. Now follow below steps to get your result now.
getalldata.blade.php
<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>
Javascript Code
<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>
CSS Code
<style type="text/css">
.read-more-show{
cursor:pointer;
color: #ed8323;
}
.read-more-hide{
cursor:pointer;
color: #ed8323;
}
.hide_content{
display: none;
}
</style>
Resources :
- ❓ Click Here
- ❓ Click Here