hide and show page within page - development

hide and show page within page

I am using Ajax to show page within div of a page. It shows everything is well but I want than it asks for another page the old one must hide and new one depending on the clicking

finance.blade

 <div class="final_finance_master_tab">

        <div class="col-md-12">
            <div class="box box-solid">
                <div class="tasks-sec clearfix">
                    <div class="panel panel-default mb-0">
                        <div class="panel-body p-0">
                            <div>
                                <h4 class="mt-12 display-ib">Finance</h4>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix task-sec-border">
                        <div class="col-md-12">
                            <div class="col-md-4 border-bottom task-inner-fields" id="receivables">
                                <div>
                                    <i class="icon-leave" aria-hidden="true"></i>
                                    <a target="_blank" onclick="loadTab('')">Recievables</a>
                                    <div class="pending-leave-approvals">
                                        <span>0</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 border-bottom task-inner-fields" id="attendance-not-marked">
                                <div>
                                    <i class="fa fa-file-text-o" aria-hidden="true"></i>
                                    <a  onclick="loadTab('')">Payables</a>
                                    <div class="job-openings">
                                        <span>0</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </ul>


    <script>
        function loadTab(target) {
            $.ajax({
                url: target,
                type: 'GET',
                data: {},
                success: function (data) {
                    $('.final_finance_master_tab').append(data);
                    console.log(data);

                }
            });
        }


    </script>
@endsection

And every page section will be opened depending on the i=clicking. But when on link its div just get bigger. I want to hide old page in div and show new page in div

from Laravel Questions and Answers https://laravelquestions.com/html/hide-and-show-page-within-page/
via Lzo Media