CODEWITHSUNDEEP
javascripthtml
Shahzad Khan
Shahzad Khan

Reputation: 11

how to add multiple pages in single html file

I want to make a web app in which i have multiple pages i want that when i click on any link it should move to that page i got the code from site it works fine but i want that it does not show like the show Page1 Page but without onclick functions without java script using ancchor tag

     <html>
     <head>
      <script>
     function show(shown, hidden) {
     document.getElementById(shown).style.display='block';
      document.getElementById(hidden).style.display='none';
     return false;
     }
    </script>
    </head>
   <body>


   <div id="Page1">
     Content of page 1
     <a href="#" onclick="return show('Page2','Page1');">Show page 2</a>
    </div>

    <div id="Page2" style="display:none">
    Content of page 2
     <a href="#" onclick="return show('Page1','Page2');">Show page 1</a>
    </div>

   </body>
   </html>

Upvotes: 1

Views: 9653

Answers (1)

Nippey
Nippey

Reputation: 4739

You can use CSS and checkboxes to get such a behaviour as written on this SITE.

The checkbox is the only HTML element which has two different states which can be exported/evaluated by CSS via the :checked property.

Cited from http://www.inserthtml.com/2012/04/css-click-states/:
HTML:

<form class="clickable"> 
  <label for="the-checkbox">Click Me!</label>
  <input type="checkbox" id="the-checkbox" /> 
  <!-- This is the div we want to appear and disappear -->
  <div class="appear">Some text to appear</div>
</form>

CSS:

.clickable .appear { 
  display: none;
}

.clickable input:checked ~ .appear {
  display: block;
}

Check out the demo at the bottom of that page.

To select among more than two pages, you could maybe use radio buttons. Not tested, just as an idea ;)

Upvotes: 1

Related Questions