Laravel: Displaying the list with same URL when clicking the html button

I'm facing an issue, please see the below screenshot.

In the screenshot, you can see its image upload page. By default, the Add Image button and the table which showing the lists should be display. The concept that I want to implement is when I click the Add Image button, the table lists should be hidden and have to show the image upload section. This all should be happen in the same URL.

Below is the code:

Route:

Route::post('/imageupload', 'Admin\ImageController@imageUploadPost')->name('image.upload.post');

Blade File:

<div class="panel panel-container">
    <button type="button" class="btn btn-primary">Add Image</button>
</div>
<div class="panel panel-container">
    <table class="table table-striped" id="slideshow">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="panel panel-container hide-img-upload">
    <form action="{{ route('image.upload.post') }}" method="POST" enctype="multipart/form-data">

            @csrf


        <div class="row">
            <div class="col-md-6">
                <input type="file" name="image" class="form-control">
                </div>
                <div class="col-md-6">
                    <button type="submit" class="btn btn-success">Upload</button>
                </div>
            </div>
        </form>
    </div>
</div>

Controller:

public function imageUploadPost()

    {
  return back()

            ->with('success','You have successfully upload image.')

            ->with('image',$imageName);

    }

Since, I'm new to Laravel, I couldn't able to see the solution.

Any help will be appreciated.

Solution

Try this

<div class="panel panel-container">
    <button type="button" class="btn btn-primary"data-toggle="modal"data-target="#myModal">Add Image</button>
</div>
<div class="panel panel-container">
    <table class="table table-striped" id="slideshow">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
</div>
 <div class="modal" id="myModal" role="dialog"
         aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Upload Image </h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="container"></div>

                <div class="panel panel-container hide-img-upload">
                    <form action="{{ route('image.upload.post') }}" method="POST" enctype="multipart/form-data">

                        @csrf


                        <div class="row">
                            <div class="col-md-6">
                                <input type="file" name="image" class="form-control">
                            </div>
                            <div class="col-md-6">
                                <button type="submit" class="btn btn-success">Upload</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>


            </form>
        </div>

    </div>

or use javascript hidden show for this