#devPunk Pure CSS Tabs (Inspired by Vicente)

[snuggs]

• based on https://gist.github.com/snuggs/d10c14af11c7ee3070e47168fa9bc0bb

Working Example

http://devpunks.herokuapp.com/tabs.html#about

/cc @brandondees

[VicenteRD]

I like the use of Fragment Identifiers, as it solves issues like memorizing the selection when the page is refreshed.
With that said, I'd like to evaluate the possibility of having it be a toggle-like button, in the case where there's 2 pieces of content (panels, for ease of expression) to switch between.

For example, if the page contains an a tag with id="jobs", have the href and content of the tag change depending on which panel is (not) shown.
Thus, if by default, the panel shown is #maintenance, have #jobs with href="#calibrations" and content 'View Calibrations', or vice versa.
And when the switch is clicked, make it change to href="#maintenance" and content to 'View Maintenance Jobs', as well as switching which panel is visible (in this case, from #maintenance to #calibrations).

[snuggs]

@VicenteRD "I'd like to evaluate the possibility of having it be a toggle-like button, in the case where there's 2 pieces of content (panels, for ease of expression) to switch between."

Still a little unclear about your statement. Please let me know.

[VicenteRD]

Since it seems it's easier for me to explain things with examples, apparently, here's one, instead of me trying to give a coherent explanation 20 times: https://jsfiddle.net/92jx9yru/ . The point is to replace the JS code, if possible at all.

[snuggs]

@VicenteRD copy that. I'll check it out now and rebase and add a commit if we can pull it off.

[snuggs]

Ready for review @VicenteRD @brandondees @mrbernnz
http://devpunks.herokuapp.com/tabs.html#about

Mobile / Tablet / Desktop (Portrait)

No "tabs" as portrait device orientation is not a good UX/UI for tabs.

Notice how content is hoisted up to link list.

Mobile / Tablet / Desktop (landscape)

TOGGLED Mobile / Tablet / Desktop (landscape)

Notice tab anchors are only visible for the non currently selected

No Flexbox Support

Default anchored list for old janky browsers that don't support flexbox

[brandondees]

looks weird to me

[snuggs]

@VicenteRD ☝️ does this look like @brandondees on your end? /cc @pachonk

[VicenteRD]

@snuggs: I think @brandondees is wearing the trollface mask right now. Fine on my end, tested it all already, works like a charm!

[brandondees]

That's what the live example looks like for me. I think you're using flexbox in a non-responsive way here.

[snuggs]

@brandondees browser vender / version? Also resolution. I'll get that fixed right up.

[brandondees]

chrome 57 (released stable this week) some medium-wide window size. the screenshot is 1228x637