0

I want to create a simple website page that allows my users to flip through a few different sets of data (kind of like mini-pages) but without reloading the page. The data could all be preloaded or requested with Ajax for each selection.

I tried using Bootstrap to create Tabs, but the first screen would never disappear.

I'm not aware of any other way to do this, other than with complicated Javascript that sets visibility to invisible.

Are there any clean, convenient, HTML/CSS-only ways to go about this?

Below, are some prototype screenshots of what the page would look like, and how it changes with each sidebar selection.

Site 1

Site 2

Site 3

CodyBugstein
  • 21,984
  • 61
  • 207
  • 363
  • doing it with javascript would be the simplest way, and really easy to implement. You would just set click events on your tabs. If you are using ajax to fetch the content, you could just set the html of your right panel with one line of js in your ajax success function – Jacob Jul 08 '14 at 23:39
  • This: http://stackoverflow.com/questions/17731457/hide-show-content-list-with-only-css-no-javascript-used might be helpful – eithed Jul 08 '14 at 23:40

2 Answers2

1

You could do it without the use of JavaScript if you are willing to make the data sets change upon hovering the menu, instead of clicking it. Here's a JSFiddle: http://jsfiddle.net/n8wF4/. It's quite ugly, but it works...

HTML:

<div class="menu">
    <div class="menu-item-1">item 1
        <div class="content data-set-1">Content 1</div>
    </div>
    <div class="menu-item-2">item 2
        <div class="content data-set-2">Content 2</div>
    </div>
    <div class="menu-item-3">item 3
        <div class="content data-set-3">Content 3</div>
    </div>
</div>

CSS:

.menu {
    position: relative;
}

.content {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
}

.menu-item-1:hover .data-set-1,
.menu-item-2:hover .data-set-2,
.menu-item-3:hover .data-set-3 {
    display: block;
}
Narxx
  • 7,929
  • 5
  • 26
  • 34
  • This is cool, but I don't want it to change back when the cursor leaves the option, because I want the user to be able to click on items in the information panel – CodyBugstein Jul 09 '14 at 19:52
  • You are able to do just that... The fiddle might not work because of the little 'result' element in the corner... Check out this version: http://jsfiddle.net/n8wF4/1/ . Let me know if this answer your question :) – Narxx Jul 10 '14 at 05:40
0

no need to have complicated javascript. Have a look at jquery ui tabs.

I believe you can't do the same thing in pure CSS. There are no click events in CSS.

user1094553
  • 786
  • 5
  • 15
  • No click events, but you could so something like that with `:hover`. Once the cursor is hovering over a menu item, the relevant content will appear on the right. Pure CSS, no JS... – Narxx Jul 09 '14 at 00:19