0

Would it be possible to have the internal page reference hide/unhide an element.

    <div class="hidden">
    <div id="thanks">
        <h1>Thank you!</h1>
        <p></p>
        </div>
    </div>

So you would visit "http://www.website.com/#thanks" and the div "hidden" would be hidden / vice versa

Jon P
  • 19,442
  • 8
  • 49
  • 72
Makaveli
  • 3
  • 2
  • Welcome to Stackoverflow. Your question is very vague. Please take the [tour] to see how to best answer a question. Perhaps provide a small example of the HTML you would like to hide/unhide. There are ways to achieve this with CSS which is very dependant on your HTML structure. Otherwise you are using javascript. – Jon P Jan 29 '17 at 23:52
  • @JonP the question is actually quite clear as long as you know what internal page references are, as I believe that if you don't you wouldn't be able to help with this question. – Makaveli Jan 30 '17 at 00:05
  • @Makaveli can you explain what you mean by internal page reference? – Michael Coker Jan 30 '17 at 00:19
  • @MichaelCoker Internal Page Reference is the "#thanks" or whatever the page allows, You can see more at http://www.yourhtmlsource.com/text/internallinks.html – Makaveli Jan 30 '17 at 00:22
  • This answer might help you: http://stackoverflow.com/a/27179245 – Moses Davidowitz Jan 30 '17 at 00:26
  • I understand internal links well or as you have chosen to call it an internal page reference. What you had failed to provide was the context and how you wanted to show and hide them, which now appears to via a link. As you chose to insult me. I was trying to assist you to provide a better phrase question. Yet you choose to insult me... nice. – Jon P Jan 30 '17 at 00:28
  • @JonP I didn't insult you? Sorry if it came across that way, I was using "you" as in anyone not directly directed at you. – Makaveli Jan 30 '17 at 00:31
  • @Makaveli for what it's worth, I didn't know what you meant by "internal page reference," either. I refer to those kinds of links as anchor links or page jumps. – Michael Coker Jan 30 '17 at 00:49
  • Possible duplicate of [Hide/unhide div with button?](http://stackoverflow.com/questions/21203526/hide-unhide-div-with-button) – user692942 Jan 31 '17 at 00:10

2 Answers2

1

Yes, using the :target pseudo class.

#main {
  display: none;  
}
#main:target {
  display: block;
}
<a href="#main">main</a>

<div id="main">
  main section
</div>

Alternatively, you can nest hidden content inside of the :target like this.

.hidden {
  display: none;  
}
:target .hidden {
  display: block;
}
<a href="#main">main</a>

<div id="main">
  <div class="hidden">
    main section
  </div>
</div>
Michael Coker
  • 52,626
  • 5
  • 64
  • 64
0

You can use the following JavaScript to get the value after hash (#) from a URL. 

var hash = location.hash.substr(1);

You can then hide/unhide based on the results.

Moses Davidowitz
  • 982
  • 11
  • 28