Laravel - How to Customize Ellipsis with a button - laravel

Question

I have a web application project using Laravel-5.8. In the project, I applied HTML text editor.
Controller
public function create()
{
return view('organization.announcements.create');
}
public function store(StoreAnnouncementRequest $request)
{
try {
$announcement = new OrgAnnouncement();
$announcement->title = $request->title;
$announcement->description = $request->description;
$announcement->save();
Session::flash('success', 'Announcement is created successfully');
return redirect()->route('organization.announcements.index');
} catch (Exception $exception) {
Session::flash('danger', 'Announcement creation failed!');
return redirect()->route('organization.announcements.index');
}
}
View
<table class=" table table-bordered table-striped table-hover datatable">
<thead>
<tr>
<th width="10">
#
</th>
<th>
Announcement Title
</th>
<th>
Description
</th>
<th>
</th>
</tr>
</thead>
<tbody>
#foreach($announcements as $key => $announcement)
<td>
{{$key+1}}
</td>
<td>
{{$announcement->title ?? '' }}
</td>
<td>
{{str_limit($announcement->description, $limit = 20, $end = ' ...')}}
</td>
<td>
#can('announcement_show')
<a class="btn btn-xs btn-primary" href="{{ route('organization.announcements.show', $announcement->id) }}">
{{ trans('global.view') }}
</a>
#endcan
#can('announcement_edit')
<a class="btn btn-xs btn-info" href="{{ route('organization.announcements.edit', ['id'=>$announcement->id]) }}">
{{ trans('global.edit') }}
</a>
#endcan
#can('announcement_delete')
<a class="btn btn-xs btn-danger" data-toggle="modal" data-target="#confirm-delete{{ $announcement->id }}" data-original-title="Close">
<span style="color:white;">{{ trans('global.delete') }}</span>
</a>
#endcan
<div class="modal fade" id="confirm-delete{{ $announcement->id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Delete Announcement</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="{{route('organization.announcements.destroy',$announcement->id)}}" method="post">
{{ csrf_field() }}
<p>Are you sure you want to delete this Announcement?</p>
<div class="modal-header">
<h4>{{ $announcement->title }}</h4>
</div>
</form>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-danger">Delete</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</td>
</tr>
#endforeach
</tbody>
</table>
The field description is the text editor. On the view blade, I truncated the field description to 20 characters and ... will be displayed as shown in my field.
However, what I want to achieve is that I want to replace the ... with a button that will have view more. Then it is clicked, it will show the full content in a modal form of redirect to another page.
How do I achieve this?
Thank you

Answer 1

You may use
<td>
{{str_limit($announcement->description, $limit = 20, $end = ' ...')}}
#if(strlen($announcement->description) > 20)
Show more
#endif
</td>