How to toggle data when access with url

Question

How can I toggle when I add #ID at the end of the URL? For example when I access a URL like domain.com/xxxxxx#01 then my div will show.

$(document).ready(function() {
  $(".toogle_button_<?php echo $link_shs['no_e'] ?>").click(function() {
    $("#<?php echo $link_shs['no_e'] ?>").slideToggle();
  });
  if (location.hash) {
    var id = location.hash.slice(1);
    var elementToShow = $("#" + id);
    if (elementToShow.length) {
      elementToShow.slideToggle();
    }
  }
});

#01 is the id from $link_shs['no_e'].

Rory McCrossan · Accepted Answer · 2018-09-05 10:48:57Z

1

You can use location.hash to read the fragment from the URL, then use it to select the element. Try this:

if (window.location.hash) {
  $(window.location.hash).slideToggle();
}

You'd obviously need to make this more secure and check that the hash is a valid value that you want to allow, but that's the general pattern to use.

answered Sep 5, 2018 at 10:48

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jazuly Over a year ago

i edit my code, please take a look, it show and hide 3 times and hide it at the end.

Rory McCrossan Over a year ago

You don't need the slice() call at all. You remove the leading # just to put it back again. Also, nothing about the code you've shown will execute three times. That is incredibly odd behaviour, as it should only run on load which can happen once per page. Can you set up a demo of the issue in a jsfiddle.net?

Collectives™ on Stack Overflow

How to toggle data when access with url

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related