How can i replace a section on a page with another section on a anchor click?

Question

I have a tasks listing on right side of a page. On the other side there is a map shown inside a div . I want to click on one of the tasks and get there details to replace map's div . After clicking in link when i refresh i should still get the task details not the map. Here is the code:

 $(document).ready(function() { $("#show_task_detail").click(function() { $("#details").show(); $("#browse_tasks_map").hide(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="javascript:;" class="list-group-item list-group-item-action task-detail-link " data-url="/task-details" data-id="{{ $post->id }}" id="show_task_detail"><input type="hidden" name="key" value="{{$post->id}}" />Post title</a> <div id="browse_tasks_map" style="position: relative; overflow: hidden;"></div> <div class="col-md-12 col-lg-12 col-xs-12 col-sm-12 task-detail-data" style="display: none;" id="details"></div>

Answer 1

You can use the addClass method of jquery

    $(document).ready(function () {

    var hash = window.location.hash.split("#");
    if (hash.indexOf('show-details') > -1 ) {
        $("#details").addClass('show');
        $("#browse_tasks_map").addClass('hidden');
    }

    $("#show_task_detail").click(function () {
        $("#details").addClass('show');
        $("#browse_tasks_map").addClass('hidden');
        window.location.hash = "show-details";

    });
});

Where the css would be,

.show{
display: block;
}

.hidden{
display: none;
}

Answer 2

1. When clicking the link set anchor part of the url

2. When rendering the page, check URL for the anchor tag

    function showDetails() { $("#details").show(); $("#browse_tasks_map").hide(); } $(document).ready(function() { if (document.hash == 'details') { showDetails(); } $("#show_task_detail").click(function () { showDetails(); document.location.hash = 'details' }); });