Laravel - How to Customize Ellipsis with a button

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>
                        &nbsp;
                    </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">&times;</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)
      <a href="{{ route('organization.announcements.show', $announcement->id) }}"> Show more </a>
    @endif

</td>