Jump to content

Recommended Posts

Hi 

Am working on nested tabs, but level 1 tabs work fine but all the level 2 tabs displays data at once.

I have attached a source code .

For example, with attached code when i click on London->open Collapsible

That time internal 3 tabs data in "open collapsible" are visible at once.

How can i hide it?

Please suggest

Thanks and Regards

Rizwan Syed

test.txt

Share this post


Link to post
Share on other sites

Hi there Rizwan Syed!

I had a look through your code, and your class 'tabcontent1' isn't actually defined as being hidden, it gets shown when everything else does.

.tabcontent1 {
  float: left;
  padding: 0px 12px;
  border: 1px solid #ccc;
  width: 70%;
  border-left: none;
  height: 300px;
}

I suggest you add a 'display: none' in there and see if that does what you'd like.

Share this post


Link to post
Share on other sites

The bigger problem is that is not nested correctly, you nest only content within the body element, not insert another body element with its own content. Validating here

https://validator.w3.org/

would have pointed that out

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×