All geek questions in one place

Base 5 tabs and accordion not working

I am using the Foundation 5 framework and trying to use the js tabs plugin they provide.

However, I get the following result http://crea8tion.com/PU2/index.html#

So far on their site it should be like this http://foundation.zurb.com/docs/components/tabs.html

Not sure what I am doing wrong?

Is it that the java script is not being called correctly?

+6
source share
4 answers

The same thing happened to me. It was like the css accordion was not included when you set up the Foundation assembly.

I solved it by downloading the standard Foundation and copying the contents of the base.min.css file to the folder that I am using.

+8
source

This is usually due to missing CSS rules that occur if you customize the assembly. For example, here is my custom assembly page where I didn’t take tabs into account.

problem

Then I copied the rules from the full download and tested it in a browser. What you can also do to make sure this is your problem.

.tabs { *zoom: 1; margin-bottom: 0 !important; } .tabs:before, .tabs:after { content: " "; display: table; } .tabs:after { clear: both; } .tabs dd { position: relative; margin-bottom: 0 !important; top: 1px; float: left; } .tabs dd > a { display: block; background: #efefef; color: #222222; padding-top: 1rem; padding-right: 2rem; padding-bottom: 1.0625rem; padding-left: 2rem; font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-size: 1rem; } .tabs dd > a:hover { background: #e2e2e2; } .tabs dd.active a { background: #fff; } .tabs.radius dd:first-child a { -moz-border-radius-bottomleft: 3px; -moz-border-radius-topleft: 3px; -webkit-border-bottom-left-radius: 3px; -webkit-border-top-left-radius: 3px; border-bottom-left-radius: 3px; border-top-left-radius: 3px; } .tabs.radius dd:last-child a { -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .tabs.vertical dd { position: inherit; float: none; display: block; top: auto; } .tabs-content { *zoom: 1; margin-bottom: 1.5rem; } .tabs-content:before, .tabs-content:after { content: " "; display: table; } .tabs-content:after { clear: both; } .tabs-content > .content { display: none; float: left; padding: 0.9375rem 0; } .tabs-content > .content.active { display: block; } .tabs-content > .content.contained { padding: 0.9375rem; } .tabs-content.vertical { display: block; } .tabs-content.vertical > .content { padding: 0 0.9375rem; } @media only screen and (min-width: 40.063em) { .tabs.vertical { width: 20%; float: left; margin-bottom: 1.25rem; } .tabs-content.vertical { width: 80%; float: left; margin-left: -1px; } } ul.pagination { display: block; height: 1.5rem; margin-left: -0.3125rem; } ul.pagination li { height: 1.5rem; color: #222222; font-size: 0.875rem; margin-left: 0.3125rem; } ul.pagination li a { display: block; padding: 0.0625rem 0.625rem 0.0625rem; color: #999999; -webkit-border-radius: 3px; border-radius: 3px; } ul.pagination li:hover a, ul.pagination li a:focus { background: #e6e6e6; } ul.pagination li.unavailable a { cursor: default; color: #999999; } ul.pagination li.unavailable:hover a, ul.pagination li.unavailable a:focus { background: transparent; } ul.pagination li.current a { background: #008cba; color: white; font-weight: bold; cursor: default; } ul.pagination li.current a:hover, ul.pagination li.current a:focus { background: #008cba; } ul.pagination li { float: left; display: block; }

Paste verification code

result

You can then go over or add the code manually or simply replace the css files for the foundation.

+5
source

What worked for me is updating to 5.3.3 (both JS and CSS files):

(Currently using 5.4.0, which also works great).

0
source

Lesson number 1. Custom Zurb string forms are not always correct . Were burned several times there. Downloading all the shebang, as Arthur Barshegyan suggests, solves the problem. At a cost of about 50 thousand. Ex. Depending on your setting.

The recommended link also applies to the non-minimized version: http://cdnjs.cloudflare.com/ajax/libs/foundation/5.3.3/css/foundation.css
if you like to hunt for absent ones and embed them in your custom download ...

I highly recommend manual hunting and editing. I had accordion bits and they were only 30 lines at the 3056 mark of the file without a minimum.

0
source

Source: https://habr.com/ru/post/958701/

More articles:


All Articles