four deep secret container test

group 1 group 2 group 3 group 4

This information only exists if all 4 groups are held.

---

How to make a container only appear if the reader is a part of 4 specific subscriber groups:
First, prep all 4 subscriber groups. Then in your article structure, you will need an overall holder container to hold everything within it (so you can specifically target it). Inside you want a subcontainer for each specific subscriber group, one after another (the order does not matter for them), followed finally by a container that will be your actual secret information.
The way this works is by using sibling selectors in css, in this case, +. It's essentially saying:
"Show the secret container only if subcontainer 4 exists, but only let subcontainer 4 exist if subcontainer 3 exists, but only let subcontainer 3 exist if subcontainer 2 exists", etc etc. If all 4 subcontainers exist (by someone being in all 4 groups), then the secret will show! If any single subcontainer is missing, the chain is broken, and the secret information will not display.

Note: watch out for trailing spaces or missing brackets when copying and pasting. Feel free to change things to names that fit better, and make sure to use your own subcontainers and subscriber group numbers :D

BBCODE:

[container:groupsecret-holder]


[subcontainer:f51d7ed2-0532-4f2a-aff1-d3e0119e8aa0] [/subcontainer]


[subcontainer:53e3ece5-0995-467d-9b18-5f4c48cdf472] [/subcontainer]


[subcontainer:01fc2818-eaf8-4e94-853b-67253b1974cf] [/subcontainer]


[subcontainer:7bae93b1-5982-4bcd-b02c-75485946ba99] [/subcontainer]


[container:fourdeep-secret]This information only exists if all 4 groups are held.[/container]


[/container]

CSS:

.fourdeep-secret {
  padding: 15px; border: 2px solid black;
  background: white;
  display: none;
}


.groupsecret-holder .secret-subdivision:nth-child(2) {
  display: none;
}


.groupsecret-holder .secret-subdivision:nth-child(3) {
  display: none;
}


.groupsecret-holder .secret-subdivision:nth-child(4) {
  display: none;  
}


.groupsecret-holder .secret-subdivision:nth-child(1) + .secret-subdivision:nth-child(2) {
  display: block;  
}


.groupsecret-holder .secret-subdivision:nth-child(2) + .secret-subdivision:nth-child(3) {
  display: block;  
}


.groupsecret-holder .secret-subdivision:nth-child(3) + .secret-subdivision:nth-child(4) {
  display: block;
}


.groupsecret-holder .secret-subdivision:nth-child(4) + .fourdeep-secret {
  display: block;    
}