shareable URLs when displaying page content via jQuery

Question

I am working on a static webpage that hides/shows particular sections of content when according buttons are clicked (I should mention I'm very new to jQuery).

As of now, it is not possible to directly visit a section by means of an URL. Is there a way to achieve this?

For instance, visiting http://www.mypage.com/#contact would automatically show the according section/div (and hide all others).

thanks!

HTML:

<a href="#home" id="button_home">Home</a>
<a href="#contact" id="button_contact">Contact</a> 

<div id="section_home">some text</div>
<div id="section_contact">some text</div>

jQuery:

   $(document).ready(function(){

      $("#button_home").click(function(){
          $("#section_home").addClass("visible");
          $("#section_contact").removeClass("visible");
      });

      $("#button_contact").click(function(){
          $("#section_home").removeClass("visible");
          $("#section_contact").addClass("visible");
      });
   });

The `hcontact` class inside `
some text
` is a misstake right? — David, Aug 09 '18 at 14:30

score 0 · Answer 1 · answered Aug 09 '18 at 14:35

Check this fiddle https://jsfiddle.net/s4Ljw9zo/

Is this what are you looking for?

$(document).ready(function(){

      $("#button_home").click(function(){
          $("#section_home").addClass("visible");
          $("#section_contact").removeClass("visible");
      });

      $("#button_contact").click(function(){
          $("#section_home").removeClass("visible");
          $("#section_contact").addClass("visible");
      });
   });

.section{
  display: none;
}
.section.visible{
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#home" id="button_home">Home</a>
<a href="#contact" id="button_contact">Contact</a> 

<div class="section" id="section_home">Section Home</div>
<div class="section" id="section_contact">Section Contact</div>

thanks for your help, but no... hiding and showing sections works fine. i'd like to be able to share an URL to instance the "contact" section.. therefore i need to find a way to (only) show this section when the page is visited by a link such as http://www.mypage.com/#contact ... sorry for not making myself clear enough — benniy, Aug 09 '18 at 14:45
Maybe you could check the url if it contains for example the `#contact` string and if so, add `visible` class to the contact section. https://stackoverflow.com/questions/4597050/how-to-check-if-the-url-contains-a-given-string — David, Aug 09 '18 at 14:48

shareable URLs when displaying page content via jQuery

1 Answers1