Databases
StackOverflow2013
Postsdbo
POSplit page into many numbered Divs and reload whole page when clicking to show the hidden div
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSplit page into many numbered Divs and reload whole page when clicking to show the hidden div
    text
    copied!<p>My code:</p> <pre><code>&lt;div class="content_1"&gt; //Content of first page goes &lt;/div&gt; &lt;div class="content_2" style="display:none;"&gt; //Content of second page goes here &lt;/div&gt; &lt;div class="content_3" style="display:none;"&gt; //Third page content goes here &lt;/div&gt; &lt;p&gt;Pages: &lt;a href="#" class="button_1"&gt; 1&lt;/a&gt; &lt;a href="#" class="button_2"&gt; 2&lt;/a&gt; &lt;a href="#" class="button_3"&gt; 3&lt;/a&gt;&lt;/p&gt; &lt;div class="clearLeft"&gt;&lt;/div&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ var a = 200; $('.button_1').css("background-color","#00CCFF"); $('.button_1').click(function(){ $('.content_1').fadeIn(a); $('.content_2').fadeOut(); $('.content_3').fadeOut(); $('.content_4').fadeOut(); $('.button_1').css("background-color","#00CCFF"); $('.button_2').css("background-color","#99FF99"); $('.button_3').css("background-color","#99FF99"); $('.button_4').css("background-color","#99FF99"); }); $('.button_2').click(function(){ $('.content_1').fadeOut(); $('.content_2').fadeIn(a); $('.content_3').fadeOut(); $('.content_4').fadeOut(); $('.button_2').css("background-color","#00CCFF"); $('.button_1').css("background-color","#99FF99"); $('.button_3').css("background-color","#99FF99"); $('.button_4').css("background-color","#99FF99"); }); $('.button_3').click(function(){ $('.content_1').fadeOut(); $('.content_2').fadeOut(); $('.content_3').fadeIn(a); $('.content_4').fadeOut(); $('.button_3').css("background-color","#00CCFF"); $('.button_1').css("background-color","#99FF99"); $('.button_2').css("background-color","#99FF99"); $('.button_4').css("background-color","#99FF99"); }); }); &lt;/script&gt; </code></pre> <p>I want to refresh the page on clicking the buttons and show the hidden div. I tried many things but the result was page reload and show the first div again whatever button chosen.</p> <p>Edit: Code above is working well with Jquery library. I want to add extra property to the code. I want page reloads when clicking buttons and keep the div shown.</p> <p>Example: When click on button "2" I want page to be reloaded and show "//Content of second page goes here"</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload