CODEWITHSUNDEEP
javascriptjqueryhtml
Claudiu Creanga
Claudiu Creanga

Reputation: 8366

Refresh the page and then go to a specific div that is in another hidden div without using cookies

I have a grid of tabs and each tab has items that are hidden by default:

#tab1, #tab2, #tab3 etc.

Each tab has:

#item1, #item2, #item3 etc.

The ids are coming from a cms and cannot be changed so you have duplicate ids: #item1 can refer to the div in both #tab1 and #tab2.

The user clicks on #tab2 and shows the #tab2. The url changes to example.com/page#tab2, then he clicks on an item (#item5) inside that tab and the entire item shows. The url becomes example.com/page#item5.

If the user refreshes that page I would like to show the item5 in tab2.

Is it possible to do it without cookies? Given that the ids cannot be changed or insert some data-attributes I'm not sure how I can show the desired item on page reload.

Upvotes: 0

Views: 80

Answers (2)

Martin Chaov
Martin Chaov

Reputation: 864

Is it possible to change the URL schema to:

domain.ext/page#tabs2/#item5

This will be easily solvable with JS after you parse the URL.

Upvotes: 1

Ivan Minakov
Ivan Minakov

Reputation: 1442

You can get url hash, when page loaded like this: var currentTabId = location.hash.

After that you can scroll page to div element whose id equals currentTabId.

Upvotes: 1

Related Questions