Upgrade & Secure Your Future with DevOps, SRE, DevSecOps, MLOps!

We spend hours on Instagram and YouTube and waste money on coffee and fast food, but won’t spend 30 minutes a day learning skills to boost our careers.
Master in DevOps, SRE, DevSecOps & MLOps!

Learn from Guru Rajesh Kumar and double your salary in just one year.



Get Started Now!

How to set read more button using data from database in Laravel?

Laravel

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 :

  1. Click Here
  2. Click Here
Chandan Kumar
0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x