Tab Menu

[Mboyer]

Does anyone know if these tab objects can be done in Hubspot

Tab Object

[AJLaPorte_diagr · Accepted solution]

These types of tabbed interfaces can be created in HubSot. While there is not a native module for tabbed content, you can create a custom module to accomplish this. If you're using the new design manager (currently in beta) you can create a more efficient custom module with this using repeater fields. 

You can create tabs like this using either a JS plugin already out there or with CSS only (https://css-tricks.com/functional-css-tabs-revisited/).

[Mboyer]

Thanks AJ.  Lets pretend I am not a web designer.  so to use the script on the reference page, I would add say a flex column and paste the text into the CSS Declarations??

give me a bit more and i think I can do this

[AJLaPorte_diagr]

Ideally, yes. You should be able to copy the HTML from the HTML Structure portion (https://css-tricks.com/functional-css-tabs-revisited/#article-header-id-1) and paste that into an HTML Module (or into the view source view of the Rich Text editor. This is found by clicking the </> button on the menubar). Then you should be able to copy the CSS from the CSS Layout potrion (https://css-tricks.com/functional-css-tabs-revisited/#article-header-id-2) and then you should see similar to what they have in their demo here: https://css-tricks.com/examples/CSSTabs/radio.php

You may need to tweak your CSS a bit as the CSS they use for this:

[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}

is targeting all radio buttons so it could conflict with existing forms that have radio buttons. 

Likewise, if you are using classes on elements with the same name as those in their CSS this could also cause conflicting issues. 

I hope this helps to clarify this a bit for you. 

-AJ

[Mboyer]

Ok AJ, youre going to think I am air headed but see Below.  is this the right location to put the scripts or am I missing something??