How to get a shareable link for a hidden content opened dynamically using JS or JQuery?

Question

This question is related to this post: Implementing navigation side bar to load <div>s link click

What I want is basically to be able to change and load content on the right part of a website by clicking links on the sidebar.

The code below was from the post I mentioned above.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript">

    function loadContent(selector){
        $("#loadOnClick").html($(selector).html());
    };

    
    $(document).ready(function(){
    
        loadContent("#userGuide");
    
    });
</script>
<style>
div.container11 {
    width: 100%;
    
}
section.container1{
    display: -webkit-flex; /* Safari */
    display: flex;
}

.displayInline{
    -webkit-flex: 1;  /* Safari 6.1+ */
    -ms-flex: 1;  /* IE 10 */    
    flex: auto;
}

header, footer {
    padding: 1em;
    color: white;
    background-color: powderblue;
    clear: left;
    text-align: center;
}

nav {
    border-right: 2px solid gray;
}

nav ul {
    list-style-type: none;
    padding-top: 5px;
}
   
nav ul a {
    text-decoration: none;
    line-height: 30px;
}

div#loadOnClick {
    float: right;
}

 .displayOnClick{
    display: none;
 }
</style>
</head>
<body>

<div class="container">

<header>
   <h1>My Company</h1>
</header>

 <section id="container1">
    <nav class="displayInLine" style="width: 20%; float: left;">
      <ul>
        <li><a href="#userGuide" class="quickLinks" onclick='loadContent("#userGuide")'>User Guide</a></li>
        <li><a href="#SOP" class="quickLinks" onclick='loadContent("#SOP")'>SOP</a></li>
        <li><a href="#procedurePages" class="quickLinks" onclick='loadContent("#procedurePages")'>Procedure pages</a></li>
        <li><a href="#departmentInformation" class="quickLinks" onclick='loadContent("#departmentInformation")'>Department information</a></li>
        <li><a href="#hoursOfOperations" class="quickLinks" onclick='loadContent("#hoursOfOperations")'>Hours of operations</a></li>
      </ul>
    </nav>

    <div class="displayInLine" id="loadOnClick" style="width:75%; float: right;">
        
    </div>
</section>

<div id="userGuide" class="displayOnClick">
    <h1>User Guide</h1>
    <p>This is the userguide for employees</p>
</div>

<div id="SOP" class="displayOnClick">
    <h1>SOP</h1>
    <p>This is the Statement of purpose for employees</p>
</div>

<div id="procedurePages" class="displayOnClick">
    <h1>Procedure pages</h1>
    <p>This is the Procedure pages for employees</p>
</div>

<div id="departmentInformation" class="displayOnClick">
    <h1>Department information</h1>
    <p>This is the Department information for employees</p>
</div>

<div id="hoursOfOperations" class="displayOnClick">
    <h1>Hours of operations</h1>
    <p>This is the Hours of operations for employees</p>
</div>

<footer>Copyright &copy; Om Sao</footer>

</div>

</body>
</html>

It does this well, but the only thing missing is to get a shareable link to others. So for example if I share the link docs.html#Overview to others, they'll be able to open exactly the page I've specified.

Right now, if I give a link to others containing a # it still loads by default and not go to the specific page.

I'm planning to use it for a documentation part, so it's very important a certain page is shareable. How do I go about to changing this script to handle this?

Thank you in advance for any help!

Don't write inline event handlers (`onclick="...")` into your HTML, it's not 1995 anymore. Especially when you are using jQuery, which has been *made* to allow convenient event handling. — Tomalak, Mar 19 '22 at 09:39

Tomalak · Accepted Answer · 2022-03-19T09:48:50.053

There is not a lot you need to do, most of it is already built into how HTML works.

Links with href="#something" set the page URL to "...#something". That's called the hash. It's accessible through location.hash in JavaScript. Those URLs already are bookmarkable.

Loading a page with a hash will make the browser scroll to the element with that ID, and jQuery/CSS selectors will find the element with that ID, so you can use the element's href and the location.hash directly in code.

jQuery only needs to handle toggling the element visibility when the hash changes due to link clicks. Conveniently, the browser issues hashchange events whenever the location.hash changes.

$(window).on('hashchange', function () {
  $('.linkTargets > *:visible').addClass('hidden');
  $('.linkTargets ' + location.hash).removeClass('hidden');
});

$(function() {
  // trigger the change handler once at page load
  if (location.hash) $(window).trigger('hashchange');

  $('#simulateLoad').click(function () {
    location.hash = '#procedurePages';
    $(window).trigger('hashchange');
  });
});

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
  <li><a href="#userGuide">User Guide</a></li>
  <li><a href="#SOP">SOP</a></li>
  <li><a href="#procedurePages">Procedure pages</a></li>
  <li><a href="#departmentInformation">Department information</a></li>
  <li><a href="#hoursOfOperations">Hours of operations</a></li>
</ul>

<div class="linkTargets">
  <div id="userGuide" class="hidden">
    <p>This is the userguide for employees</p>
  </div>
  <div id="SOP" class="hidden">
    <p>This is the Statement of purpose for employees</p>
  </div>
  <div id="procedurePages" class="hidden">
    <p>This is the Procedure pages for employees</p>
  </div>
  <div id="departmentInformation" class="hidden">
    <p>This is the Department information for employees</p>
  </div>
  <div id="hoursOfOperations" class="hidden">
    <p>This is the Hours of operations for employees</p>
  </div>
</div>

<button id="simulateLoad">Simulate page load for #procedurePages</button>

Thank you kind sir! I'm still learning and I will take a really good look to understand how you did what you did in this script. Thank you! — ixcode, Mar 19 '22 at 10:01

score 0 · Answer 2 · answered Mar 19 '22 at 08:51

0

Possible approach,

Fetch the current url using, window.location.href
split the url and get the string after #.
With that you can hide and show the specific data (May be onload)

answered Mar 19 '22 at 08:51

dinesh oz

342
1
9

score 0 · Answer 3 · answered Mar 19 '22 at 09:05

0

Replace loadContent("#userGuide"); inside your document ready function to loadContent(window.location.href.replace(“docs.html/or your host“,””));

answered Mar 19 '22 at 09:05

Thai Dang

121
4

How to get a shareable link for a hidden content opened dynamically using JS or JQuery?

3 Answers3