Tab (nested)

Posted by Peter-ZA on 18 Nov 2012 01:50, last edited by Peter-ZA on 13 May 2016 22:23
Tags: nesting tab

This is to test the Tab function for //nested/ structures:

'Tab' References

• http://www.wikidot.com/doc:wiki-syntax#toc63
• http://snippets.wikidot.com/code:tabs
• http://community.wikidot.com/howto:apply-a-wikipedia-like-article-discussion-tabs

'Tab' - other Examples

• Tab (normal)
• Tab (nested)
• Tab (Calendar)
• Tab 'NEWS' (Calendar)

Tab (nested 1) TEST:

Code View:

[[tabview]]

[[tab A]]
= ##darkgreen|[[size 300%]]Text **A**[[/size]]##
[[tabview]]

[[tab 1]]
= ##red|[[size 300%]]Number **A1**[[/size]]##
[[/tab]]

[[tab 2]]
= ##red|[[size 300%]]Number **A2**[[/size]]##
[[/tab]]

[[tab 3]]
= ##red|[[size 300%]]Number **A3**[[/size]]##
[[/tab]]

[[/tabview]]

[[/tab]]

[[tab B]]
= ##darkgreen|[[size 300%]]Text **B**[[/size]]##
[[tabview]]

[[tab 1]]
= ##red|[[size 300%]]Number **B1**[[/size]]##
[[/tab]]

[[tab 2]]
= ##red|[[size 300%]]Number **B2**[[/size]]##
[[/tab]]

[[tab 3]]
= ##red|[[size 300%]]Number **B3**[[/size]]##
[[/tab]]

[[/tabview]]

[[/tab]]

[[tab C]]
= ##darkgreen|[[size 300%]]Text **C**[[/size]]##
[[tabview]]

[[tab 1]]
= ##red|[[size 300%]]Number **C1**[[/size]]##
[[/tab]]

[[tab 2]]
= ##red|[[size 300%]]Number **C2**[[/size]]##
[[/tab]]

[[tab 3]]
= ##red|[[size 300%]]Number **C3**[[/size]]##
[[/tab]]

[[/tabview]]

[[/tab]]

[[/tabview]]

Result:

A

Text A

1

Number A1

B

Number A2

C

Number A3

2

Text B

1

Number B1

2

Number B2

3

Number B3

3

Text C

1

Number C1

2

Number C2

3

Number C3

Tab (nested 2) TEST:

Code View:

[[tabview]]

[[tab A]]
= ##darkgreen|[[size 300%]]Text **A**[[/size]]##
[[tabview]]

[[tab 1]]
= ##red|[[size 300%]]Number **A1**[[/size]]##
[[tabview]]

[[tab a]]
= ##purple|[[size 300%]]**A1a**[[/size]]##
[[/tab]]

[[tab b]]
= ##purple|[[size 300%]]**A1b**[[/size]]##
[[/tab]]

[[tab c]]
= ##purple|[[size 300%]]**A1c**[[/size]]##
[[/tab]]

[[/tabview]]
[[/tab]]

[[tab 2]]
= ##red|[[size 300%]]Number **A2**[[/size]]##
[[tabview]]

[[tab a]]
= ##purple|[[size 300%]]**A2a**[[/size]]##
[[/tab]]

[[tab b]]
= ##purple|[[size 300%]]**A2b**[[/size]]##
[[/tab]]

[[tab c]]
= ##purple|[[size 300%]]**A2c**[[/size]]##
[[/tab]]

[[/tabview]]
[[/tab]]

[[tab 3]]
= ##red|[[size 300%]]Number **A3**[[/size]]##
[[tabview]]

[[tab a]]
= ##purple|[[size 300%]]**A3a**[[/size]]##
[[/tab]]

[[tab b]]
= ##purple|[[size 300%]]**A3b**[[/size]]##
[[/tab]]

[[tab c]]
= ##purple|[[size 300%]]**A3c**[[/size]]##
[[/tab]]

[[/tabview]]
[[/tab]]

[[/tabview]]

[[/tab]]

[[tab B]]
= ##darkgreen|[[size 300%]]Text **B**[[/size]]##
[[tabview]]

[[tab 1]]
= ##red|[[size 300%]]Number **B1**[[/size]]##
[[tabview]]

[[tab a]]
= ##purple|[[size 300%]]**B1a**[[/size]]##
[[/tab]]

[[tab b]]
= ##purple|[[size 300%]]**B1b**[[/size]]##
[[/tab]]

[[tab c]]
= ##purple|[[size 300%]]**B1c**[[/size]]##
[[/tab]]

[[/tabview]]
[[/tab]]

[[tab 2]]
= ##red|[[size 300%]]Number **B2**[[/size]]##
[[tabview]]

[[tab a]]
= ##purple|[[size 300%]]**B2a**[[/size]]##
[[/tab]]

[[tab b]]
= ##purple|[[size 300%]]**B2b**[[/size]]##
[[/tab]]

[[tab c]]
= ##purple|[[size 300%]]**B2c**[[/size]]##
[[/tab]]

[[/tabview]]
[[/tab]]

[[tab 3]]
= ##red|[[size 300%]]Number **B3**[[/size]]##
[[tabview]]

[[tab a]]
= ##purple|[[size 300%]]**B3a**[[/size]]##
[[/tab]]

[[tab b]]
= ##purple|[[size 300%]]**B3b**[[/size]]##
[[/tab]]

[[tab c]]
= ##purple|[[size 300%]]**B3c**[[/size]]##
[[/tab]]

[[/tabview]]
[[/tab]]

[[/tabview]]

[[/tab]]

[[tab C]]
= ##darkgreen|[[size 300%]]Text **C**[[/size]]##
[[tabview]]

[[tab 1]]
= ##red|[[size 300%]]Number **C1**[[/size]]##
[[tabview]]

[[tab a]]
= ##purple|[[size 300%]]**C1a**[[/size]]##
[[/tab]]

[[tab b]]
= ##purple|[[size 300%]]**C1b**[[/size]]##
[[/tab]]

[[tab c]]
= ##purple|[[size 300%]]**C1c**[[/size]]##
[[/tab]]

[[/tabview]]
[[/tab]]

[[tab 2]]
= ##red|[[size 300%]]Number **C2**[[/size]]##
[[tabview]]

[[tab a]]
= ##purple|[[size 300%]]**C2a**[[/size]]##
[[/tab]]

[[tab b]]
= ##purple|[[size 300%]]**C2b**[[/size]]##
[[/tab]]

[[tab c]]
= ##purple|[[size 300%]]**C2c**[[/size]]##
[[/tab]]

[[/tabview]]
[[/tab]]

[[tab 3]]
= ##red|[[size 300%]]Number **C3**[[/size]]##
[[tabview]]

[[tab a]]
= ##purple|[[size 300%]]**C3a**[[/size]]##
[[/tab]]

[[tab b]]
= ##purple|[[size 300%]]**C3b**[[/size]]##
[[/tab]]

[[tab c]]
= ##purple|[[size 300%]]**C3c**[[/size]]##
[[/tab]]

[[/tabview]]
[[/tab]]

[[/tabview]]

[[/tab]]

[[/tabview]]

Result:

A

Text A

1

Number A1

a

A1a

B

A1b

C

A1c

2

Number A2

a

A2a

b

A2b

c

A2c

3

Number A3

a

A3a

b

A3b

c

A3c

b

Text B

1

Number B1

a

B1a

2

B1b

3

B1c

b

Number B2

a

B2a

b

B2b

c

B2c

c

Number B3

a

B3a

b

B3b

c

B3c

c

Text C

1

Number C1

a

C1a

2

C1b

3

C1c

b

Number C2

a

C2a

b

C2b

c

C2c

c

Number C3

a

C3a

b

C3b

c

C3c

---

+ Show Backlinks

Backlinks (Links to this page from others): Tab (Calendar) Tab (nested) Tab 'NEWS' (Calendar) Tab (normal)

+ Show Comments

Comments:

Doesn't work

itsabee 27 Nov 2020 17:22

What happens:

After the first tab of your nested (child) tabview, the [[/tab]] tag ends the tab of the parent tabview, NOT the child tabview. So, the rest of the tabs become switched (the parent tabs move into the nested tabview, and the child tags move to the parent tabview).

It's hard to tell when there are an equal number of tabs, i.e. as this author has done - "A, B, C" and "1, 2, 3" - but note that the tabs go "A, 2, 3" in the parent tabview and "1, B, C" in the nested tabview.

Number of Comments: 1)