Menu icon Foundation
Solutions for Tabs in latest F5?

Hello.

I'm trying to use the latest Foundation code for tabs, but it displays all tabs as opened.

In addition to this I want to show the Tabs as Accordion Tabs/Panels in a small screen. This was a nice feature in F4, but it seems to have been removed , just for the heck of ii, without any graceful or presentable replacement

How would you suggest doing this with F5 ? I would really appreciate a few tips.

Thank you,

Bit

tabs

Hello.

I'm trying to use the latest Foundation code for tabs, but it displays all tabs as opened.

In addition to this I want to show the Tabs as Accordion Tabs/Panels in a small screen. This was a nice feature in F4, but it seems to have been removed , just for the heck of ii, without any graceful or presentable replacement

How would you suggest doing this with F5 ? I would really appreciate a few tips.

Thank you,

Bit

Alexander Assimidis over 4 years ago

Hide the tabs for small and show the Accordion only for small.
Could you send us an link?

Bit Byte over 4 years ago

Hello Alexander,

Many thanks for your reply.

I'm putting down 3 links:

  1. http://www.caydees.com/testsite/testsite/index.html
    This is what sort of want, but more efficient. This was done with regular jQuery, in Dreamweaver CC with their code for Grids etc. I took part code from Foundation 4 for the Top Bar.There is no way to make these into accordion panels, perhaps..

  2. http://www.caydees.com/Examine/block_tabs.html
    This is where I am at the moment with Foundation 5 (the latest version) and having a tough time getting the Tabs to work in the first place and finally want the Tabs to reduce gracefully to accordion panels in smaller widths.

  3. http://www.caydees.com/Examine/tab_index.php

I also made one with Tabs within accordion panels, but this site does not have the contents of the sidebar which would be nicer to have as visible while going through main content.

All my content including the descriptions and the pictures are in a MySQL database and need to pull or gather together from there with PHP etc.

Perhaps you can give me a couple of ideas in the right direction.

Best regards,

Bit

Bit Byte over 4 years ago

Hello Alexander,

Your suggestion does not quite work correctly. When the browser is reduced it shows the "Accordion" quite fine, and when you expand it removes the accordion and shows the "Tabs" quite fine too.

But the problem is when you open the page on a Desktop or a large sized browser window there are no "Accordion Keys" nor any "Tabs"!

One has to:

  1. reduce the browser width
  2. open the first Accordion Key
  3. and then expand to see the page.

Surely, I am overlooking something or making a silly mistake somewhere..

http://www.caydees.com/Examine/tab_index.php

Thanks for any suggestions

Bit