Tabs With “Link To Tab” Functionality

By February 25, 2016Blog, CSS, Javascript, jQuery
Allure Web Solutions Code Snippet

The topic of this blog post is pretty self-explanatory. This code can be used within any environment, such as a CMS. For example, I’m currently working on a project that integrates this code with ACF Repeater fields in a WordPress website.┬áTo see how the “link to tab” functionality work, click here to open Tab 2 directly.

 

  • Tab 1
  • Tab 2
  • Tab 3

To see how the "link to tab" functionality work, click here to open Tab 2 directly. Then take a look at the URL in the address bar.

Siamese cheetah. American shorthair. American shorthair scottish fold yet ocicat and ocelot norwegian forest, but cheetah for persian. Bengal leopard or jaguar bombay.

Siamese cheetah. American shorthair. American shorthair scottish fold yet ocicat and ocelot norwegian forest, but cheetah for persian. Bengal leopard or jaguar bombay. Havana brown. Kitten tiger.
Siamese cheetah. American shorthair. American shorthair scottish fold yet ocicat and ocelot norwegian forest, but cheetah for persian. Bengal leopard or jaguar bombay. Havana brown. Kitten tiger. Burmese devonshire rex but ocelot tom for kitty norwegian forest but grimalkin. Cornish rex munchkin. Abyssinia.
Mike Doubintchik

Author Mike Doubintchik

More posts by Mike Doubintchik

Join the discussion 2 Comments

  • hi, is this code working as expected.
    Every time I click on “click here to open Tab 2” it opens a new code pen tab.

    • Mike Doubintchik says:

      @Anandarajeshwaran.J
      Thanks for commenting! The functionality was in fact broken, I’m not sure why.

      I’ve gone ahead and updated both the CodePen and added an example directly to this blog post.

      Now when you click on “click here to open Tab 2” it will open a new CodePen window with tab 2 already activated.

Leave a Reply