Navigate among div pages with show/hide CSS

HTML & CSS
1

If I have a series of divs labeled page1, page2, page3, page4, then how do you use the show/hide div method to turn on/off the correct pages?

Specifically, how does a button on one of the page divs turn on one page while turning off all the other pages?

There are many web page explaining how to show/hide divs, or make “navigation bars” to show/hide nav links, but the ones really discussing navigating across several pages use Jquery. But I don’t want the overhead of Jquery for this simple function, because this will be in a mobile phone app.

2
3

Tabs? In my case, the page contents should replace all other content. No tabs allowed.

4

The example shows tabs but the functionality is the same, no?

5

I will implement and adapt, then. Thanks!

6

How do people then switch from page to page? I’m confused. You can also use accordions for this, but I’m not clear on what you are picturing. Show/hide functionality normally relates to content that’s all on one page.

7

Indeed, I want all the content on one page. The user will navigate back from a page div just like with a Jquery-type Back button at top and/or bottom.

My page will have a pre-populated database; on body load, all the page divs will be populated with content, but the content won’t be seen until the page div is visible for that section.

8

But I don’t want the overhead of Jquery for this simple function, because this will be in a mobile phone app.

But you don’t mind if the users on their mobile phones sustain the overhead of loading hidden data that they may not want to see?

9

Are you saying that Jquery will not load items when they are all on one page as hidden divs?

10

Not at all. I am commenting about priorities.

The “friendly” method is to serve one page at a time, therefore the users on mobiles who do not want to see the whole show do not use up their bandwith unnecessarily.

If the amount of hidden data is relatively small, then no problem; but if it is large, sending all of it to an unsuspecting user is unkind. Serving one page at a time would be more considerate of the mobile user’s bandwidth usage.

Hiding and showing divs can be accomplished with a fairly simple JavaScript (not jQuery) and with css.

11

This is what your after no? If different then say how. http://www.visibilityinherit.com/code/jquery-fading-tabs.php