Change Current Url On Click With Jquery

I want to change the current URL when I click on a link. At the moment, I'm using the following code to display a set of collapse items (with Bootstrap). If I click on one of the i

Solution 1:

Here's a bit of jQuery that will update the URL using pushState via the History API.

Upon clicking an element with the data-target attribute, this will update the page URL to append, for example, ?data-target=collapseTwo.

Note that I'm using replace() to remove the hash symbol from the attribute's value.

$('[data-target]').click(function() {
  window.history.pushState(
    null,
    null,
    '?data-target=' + $(this).data('target').replace('#', '')
  );
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="accordion"id="accordionExample"><divclass="card"><divclass="card-header"id="headingOne"><h5class="mb-0"><buttonclass="btn btn-link"type="button"data-toggle="collapse"data-target="#collapseOne"aria-expanded="true"aria-controls="collapseOne">
          Collapsible Group Item #1
        </button></h5></div><divid="collapseOne"class="collapse show"aria-labelledby="headingOne"data-parent="#accordionExample"><divclass="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div></div></div><divclass="card"><divclass="card-header"id="headingTwo"><h5class="mb-0"><buttonclass="btn btn-link collapsed"type="button"data-toggle="collapse"data-target="#collapseTwo"aria-expanded="false"aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button></h5></div><divid="collapseTwo"class="collapse"aria-labelledby="headingTwo"data-parent="#accordionExample"><divclass="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div></div></div><divclass="card"><divclass="card-header"id="headingThree"><h5class="mb-0"><buttonclass="btn btn-link collapsed"type="button"data-toggle="collapse"data-target="#collapseThree"aria-expanded="false"aria-controls="collapseThree">
          Collapsible Group Item #3
        </button></h5></div><divid="collapseThree"class="collapse"aria-labelledby="headingThree"data-parent="#accordionExample"><divclass="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div></div></div></div>

Solution 2:

I'm a bit late now that I see Jon's answer. I did the same thing in vanilla flavor...

If you need to add event listeners to your elements, here's that code:

const elems = document.querySelectorAll('[data-target]');
for(let i = 0; i < elems.length; i++){
  elems[i].addEventListener("click", redirectMe)
}

And here's the actual redirect function:

functionredirectMe(e){
  const targ = e.target.dataset["target"];
  const search = `?data-target=${targ}`;
  const url = location.protocol + location.hostname + location.pathname + search; 
  window.history.pushState({}, null, url);
}

I guess maybe it's not necessary to build out the whole url, but it works. (And I left your string as it is, although # is a special character in urls.)