How to make custom URLs for different website states?

Question

In my project I have a page where there are different directories inside other directories, which show and hide with "style.display="block/none", problem is that I cannot figure out how to save those states in an URL so they can be sent to others.

Ideally after user clicks on the button to "Show Section 1", and then on "Show section 11" the URL becomes website.com/section1/section11 that he can share to others.

So question is, how do I save states of websites to be shared based on where in the directory the user is?

Example code:

JS

const Section1 = document.getElementById("section1");
const Section2 = document.getElementById("section2");
const Section11 = document.getElementById("section1-1");
const Section12 = document.getElementById("section1-2");

function show1(){
     Section1.style.display="block";
     Section2.style.display="none";
}

function show2(){
     Section1.style.display="none";
     Section2.style.display="block";
}


function show11(){
     Section11.style.display="block";
     Section12.style.display="none";

}

function show12(){
     Section11.style.display="none";
     Section12.style.display="block";

}

And so on...

HTML


<button onclick="show1()">Show Section 1</button>
<button onclick="show2()">Show Section 2</button>

<div id="section1" style="display: block">

     <button onclick="show11()">Show Section 11</button>
     <button onclick="show12()">Show Section 12</button>

     <div id="section1-1" style="display: block">

          <p>Some text</p>
          <button onclick="show111()">Show Section 111</button>
          <button onclick="show112()">Show Section 112</button>

     </div>

     <div id="section1-2" style="display: none">

          <p>Some text</p>
          <button onclick="show121()">Show Section 121</button>
          <button onclick="show122()">Show Section 122</button>

     </div>

</div>

<div id="section2" style="display: none">

<p>Something in here...</p>

</div>

In addition to *building* a url, you can use history.pushstate to update the browser url without refreshing the page - this would make it easier to *retrieve* the url. See [this question](https://stackoverflow.com/questions/4015613/good-tutorial-for-using-html5-history-api-pushstate) for more info. — freedomn-m, Feb 17 '22 at 09:17

score 0 · Answer 1 · answered Feb 17 '22 at 07:40

You can try something like this:

var url = ""

function show(target) {
  $(target).siblings("[id^=section]").hide();
  $(target).show();

  generateUrl();
}

function generateUrl() {
  url = "/";
  url += $("[id^=section]:visible").map(function() {
    return $(this).attr("id")
  }).get().join("/");
  console.log(url)
}

Since you tagged jquery then I thought I would provide you an example with less code. I will work properly once your html is complete.

But it general it generates the url based on the div's where the id start with section and it's visible.

Demo

var url = ""

function show(target) {
  $(target).siblings("[id^=section]").hide();
  $(target).show();

  generateUrl();
}

function generateUrl() {
  url = "/";
  url += $("[id^=section]:visible").map(function() {
    return $(this).attr("id")
  }).get().join("/");
  console.log(url)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="show('#section1')">Show Section 1</button>
<button onclick="show('#section2')">Show Section 2</button>

<div id="section1" style="display: block">

  <button onclick="show('#section1-1')">Show Section 11</button>
  <button onclick="show('#section1-2')">Show Section 12</button>

  <div id="section1-1" style="display: block">

    <p>Some text</p>
    <button onclick="show('#section1-1-1')">Show Section 111</button>
    <button onclick="show('#section1-1-2')">Show Section 112</button>

  </div>

  <div id="section1-2" style="display: none">

    <p>Some text</p>
    <button onclick="show('#section1-2-1')">Show Section 121</button>
    <button onclick="show('#section1-2-2')">Show Section 122</button>

  </div>

</div>

<div id="section2" style="display: none">

  <p>Something in here...</p>

</div>

How to make custom URLs for different website states?

1 Answers1