JS tabbed content - On load issues

[Hawk-Steve]

Hi all

Just been messing around with js tabbed content, something I am pretty new to. I went to w3 to get an example (HERE) and pretty much copied and pasted it over to design manager to play with. Applying .tabcontent classes to content module groups and wrapping the button groups like so: <element onclick="openCity(event, 'London')">{{ html }}</element>

The only problem I am having is that the page loads and displays each tab's content where I want it to display none at first. The script works otherwise as intended, clicking each button will display that tab's content and hides the rest, it's just that initial issue upon loading the page I can't figure out.

I've set up a quick dummy LP below:

http://info.hawktraining.com/-temporary-slug-0e516d27-bd42-4805-ac09-6dde2e4d4401?hs_preview=dscHhiq...

Any help would be greatly appreciated!

Steve

[tjoyce · Accepted solution]

add this css to your page

.body-container > div:nth-child(n+4) .tabcontent{
 display: none;
}

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

[Hawk-Steve]

Thanks Tim, did the job perfectly

Is it ok if you explain the inner workings to me little? I and maybe others will likely do this in the future so would be good to get an understanding and learn from the experience.

I am not sure where my second update post went, but I had thought of:

.tabconent > .row-fluid-wrapper > .row-fluid {
display: none;}

which prevented the script from displaying as well as

.tabcontent {
    display: none !important;
}

It looks like you simply went the other way, down to the body on the COS grid.

I also don't quite understand the inclusion of nth-child(n+4), this is for 4 and onwards correct?

[tjoyce]

@Hawk-Steve - Sure! When I first looked at your page (it's not now)... I did 

$('.tabcontent').length //result was 5

But, I only saw 4 tabcontents you wanted hidden, so I figured I would Isolate the 4 a little bit more by targeting the parent container and hiding only the children that contained tabcontent. That's why there was nth-child(n+4)

However, your page structure is now different from when I wrote the code and you only have 4 tabcontent blocks so, the following css should be sufficient

div.body-container .tabcontent{
    display: none;
}

[Hawk-Steve]

Hi Tim

I think I'd caused some confusion by accidentally making a change and altering the structure, which I quickly reverted when I noticed. It seems you had already picked up the post while it was changed.

Thanks for explaining your reasoning behind it, the child element makes sense now.

Thanks for the help. +1 Kudos for you. 

[Hawk-Steve]

Quick update:

I had a look at the page elements and can see display: none; from the .tabcontent class was being overwritten by .row-fluid:

.row-fluid [class*="span"] {
/* display: block; */
float: left;
width: 100%;
min-height: 28px;
margin-left: 2.127659574%;
margin-left: 2.0744680846382977%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

So I guess the question is, how do I prevent .row-fluid from affecting the script? I can see  .row-fluid sits quite high up on the grid. I would simply do this but this stops the script from working correctly.

.tabcontent > .row-fluid-wrapper > .row-fluid {
display: none;
}

Adding !important to .tabcontent {display: none} creates a similar issue.