CSS Only Content Toggle

content-toggle-template.json

{"content":[{"id":"vycagh","name":"section","parent":0,"children":["emodvu"],"settings":{"_cssGlobalClasses":["shblsr"],"_cssCustom":"#brxe-vycagh {  \n  \n\t--state-0-color: var(--action);\n  --state-0-label-color: var(--action-light);\n  --state-0-track-color: var(--secondary-light-trans-30); \n  --state-0-label-0-color: white;\n  --state-0-label-1-color: var(--primary);\n  \n  --state-1-color: var(--primary); \n  --state-1-label-color: var(--primary-dark);\n  --state-1-track-color: var(--primary-light-trans-20);\n  --state-1-label-0-color: var(--action-light);\n  --state-1-label-1-color: white;\n \n}"},"label":"Free Pro"},{"id":"emodvu","name":"container","parent":"vycagh","children":["dhlctq","spcnac"],"settings":{"_cssGlobalClasses":["dpfyhy"]},"label":"switcher wrapper (CSS)"},{"id":"dhlctq","name":"block","parent":"emodvu","children":["igpdel","erdeuh","prerjb"],"settings":{"_alignItems":"center","_cssGlobalClasses":["tiobzx"]},"label":"Header Wrapper"},{"id":"igpdel","name":"heading","parent":"dhlctq","children":[],"settings":{"text":"Toggle Switch CSS Only","_cssGlobalClasses":["oomdbj"]}},{"id":"erdeuh","name":"text-basic","parent":"dhlctq","children":[],"settings":{"text":"This switch uses the now widely accepted :has() selector and zero JavaScript.","tag":"p","_cssGlobalClasses":["focdxz"]},"label":"Lede"},{"id":"prerjb","name":"div","parent":"dhlctq","children":["gygxhf"],"settings":{"_cssGlobalClasses":["bdqcdr"],"classConverterComponent":true},"label":"Toggle Switch (CSS)","rerenderControls":1709269512630},{"id":"gygxhf","name":"div","parent":"prerjb","children":["ugxlni","zoupxg"],"settings":{"_cssGlobalClasses":["sabnds"],"tag":"custom","customTag":"fieldset"},"label":"Fieldset"},{"id":"ugxlni","name":"text-basic","parent":"gygxhf","children":[],"settings":{"text":"Toggle Switch","tag":"custom","_cssGlobalClasses":["gbksiv"],"customTag":"legend"},"label":"Legend"},{"id":"zoupxg","name":"div","parent":"gygxhf","children":["bkpylw","ktugcd","zwxuhp"],"settings":{"_cssGlobalClasses":["cbanjs"],"tag":"custom","customTag":"label","_attributes":[{"id":"dfjjxu","name":"aria-label","value":"Switch uncheck for Free, check for Pro options"}]},"label":"Label"},{"id":"bkpylw","name":"div","parent":"zoupxg","children":[],"settings":{"_cssGlobalClasses":["ekhvog"],"tag":"custom","customTag":"input","_attributes":[{"id":"lxgxpe","name":"type","value":"checkbox"},{"id":"uknctj","name":"tabindex","value":"0"}]},"label":"Checkbox"},{"id":"ktugcd","name":"text-basic","parent":"zoupxg","children":[],"settings":{"text":"Free","tag":"span","_cssGlobalClasses":["uccdle"]},"label":"Label 0"},{"id":"zwxuhp","name":"text-basic","parent":"zoupxg","children":[],"settings":{"text":"Pro","tag":"span","_cssGlobalClasses":["gdufft"]},"label":"Label 1"},{"id":"spcnac","name":"block","parent":"emodvu","children":["jippoh","mfwwqu"],"settings":{"_cssGlobalClasses":["wotbzv"]},"label":"Content Wrapper"},{"id":"jippoh","name":"block","parent":"spcnac","children":["aihdrs"],"settings":{"_cssGlobalClasses":["yvwhxj","dxurlb"]},"label":"State 0 Content"},{"id":"aihdrs","name":"text-basic","parent":"jippoh","children":[],"settings":{"text":"Free content","tag":"p","_cssGlobalClasses":["imiaph"]}},{"id":"mfwwqu","name":"block","parent":"spcnac","children":["xaybks"],"settings":{"_cssGlobalClasses":["bwcywn","idosrb"]},"label":"State 1 Content"},{"id":"xaybks","name":"text-basic","parent":"mfwwqu","children":[],"settings":{"text":"Pro Content","tag":"p","_cssGlobalClasses":["imiaph"]}}],"source":"bricksCopiedElements","sourceUrl":"https://base-wordpress.local","version":"1.9.6.1","globalClasses":[{"id":"shblsr","name":"checkbox-based","settings":{}},{"id":"dpfyhy","name":"checkbox-based__wrapper","settings":{"_cssCustom":"\n\n.bricks-is-frontend .state-0-content, .bricks-is-frontend  .state-1-content{\n  opacity: 0;\n  transition: all .5s ease;\n}\n\n.bricks-is-frontend .checkbox-based__wrapper:not(:has(.toggle-switch__checkbox:checked)) .state-0-content{\n\topacity: 1;\n  z-index: 1;\n}\n\n.bricks-is-frontend .checkbox-based__wrapper:has(.toggle-switch__checkbox:checked) .state-1-content{\n\topacity: 1;\n  z-index: 1;\n}\n","_padding":{"top":"2rem","right":"2rem","bottom":"2rem","left":"2rem"},"_border":{"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"id":"bbcolors_neutral-light-trans-30","name":"neutral-light-trans-30","raw":"var(--neutral-light-trans-30)"}}}},{"id":"tiobzx","name":"checkbox-based__header-wrapper","settings":{"_alignItems":"center"}},{"id":"oomdbj","name":"checkbox-based__heading","settings":[]},{"id":"focdxz","name":"checkbox-based__lede","settings":[]},{"id":"bdqcdr","name":"toggle-switch","settings":{"_cssCustom":"\n:where(.toggle-switch){\n  --transition: all 0.3s ease-out;\n  --label-padding: 2rem 3rem;\n  \n  --fieldset-border-color: var(--action-light-trans-20);\n  \n  --inner-padding: 3px; \n  \n  /* track colors */\n  --state-0-track-bg:  var(--state-0-track-color, #ffffff20);\n  --state-1-track-bg: var(--state-1-track-color, #00ff0020);\n  --track-bg: var(--state-0-track-bg);\n  \n  /* label colors */\n\t--unchecked-label-0-color: var(--state-0-label-0-color, white);\n  --checked-label-0-color: var(--state-1-label-0-color);\n  --label-0-color: var(--unchecked-label-0-color);\n  \n  --unchecked-label-1-color: var(--state-0-label-1-color);\n  --checked-label-1-color: var(--state-1-label-1-color, black);\n  --label-1-color: var(--unchecked-label-1-color);\n  \n  /* Switch colors */\n  --unchecked-switch-bg: var(--state-0-color, #777); \n  --checked-switch-bg: var(--state-1-color, #fff); \n  --switch-bg: var(--unchecked-switch-bg);\n\n  \n  --inset-inline-start: var(--inner-padding);\n  --inset-inline-end: calc( 50% + var(--inner-padding));\n  --line-height: 1;\n  --font-weight: bold;\n}\n\n/* Outer wrapper */\n.toggle-switch__fieldset{\n  transition: var(--transition);\n  padding: 0;\n\tborder: 1px solid var(--fieldset-border-color);\n  border-radius: 300px;\n  position: relative;\n  background: var( --track-bg);\n}\n\n/* Switch */\n.toggle-switch__fieldset::before{\n  transition: var(--transition);\n  content: \"\";\n  position: absolute;\n  background: var(--switch-bg);\n  inset-block: var(--inner-padding);\n  inset-inline-start: var(--inset-inline-start);\n  inset-inline-end: var(--inset-inline-end);\n  border-radius: 300px;\n  \n}\n\n/* Hide checkbox and legend */\n.toggle-switch__legend, .toggle-switch__checkbox{\n\tposition: absolute;\n  left: -999999px;\n  width: 0;\n  height: 0;\n}\n\n/* Set label styles */\n.toggle-switch__label{\n\tmargin: 0;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  position: relative;\n  line-height: var(--line-height);\n  font-weight: var(--font-weight);\n}\n.toggle-switch__label > span{\n  display: flex;\n  place-content: center;\n  padding: var(--label-padding);\n}\n\n/* Center label text in their SPAN's */\n.toggle-switch__label-0, .toggle-switch__label-1{\n  transition: var(--transition);\n  display: flex;\n\tpadding: var(--switch-padding);\n  cursor: pointer;\n}\n\n/* Set label colors */\n.toggle-switch__label-0{\n  color: var(--label-0-color); \n}\n\n.toggle-switch__label-1{\n\tcolor: var(--label-1-color);\n}\n\n/* Set variables based on checked status */\n.toggle-switch:has(:checked){\n  --inset-inline-start: calc(50% + var(--inner-padding));\n  --inset-inline-end: var(--inner-padding);\n  --track-bg: var( --state-1-track-bg );\n  \n  --switch-bg: var(--checked-switch-bg);\n  \n  --label-0-color: var(--checked-label-0-color);\n  --label-1-color: var(--checked-label-1-color);\n}\n\n/* Focus state */\n.toggle-switch__fieldset:focus-within {\n\tbox-shadow: 0 0 var(--focus-width) var(--focus-color);\n}"}},{"id":"sabnds","name":"toggle-switch__fieldset","settings":[]},{"id":"gbksiv","name":"toggle-switch__legend","settings":[]},{"id":"cbanjs","name":"toggle-switch__label","settings":{}},{"id":"ekhvog","name":"toggle-switch__checkbox","settings":{}},{"id":"uccdle","name":"toggle-switch__label-0","settings":{}},{"id":"gdufft","name":"toggle-switch__label-1","settings":{}},{"id":"wotbzv","name":"checkbox-based__content-wrapper","settings":{"_cssCustom":".bricks-is-frontend .checkbox-based__content-wrapper{\n  display: grid;\n}\n\n.bricks-is-frontend .checkbox-based__content-wrapper > div{\n  grid-row: 1;\n  grid-column: 1;\n}"}},{"id":"yvwhxj","name":"state-0-content","settings":{"_alignItems":"center"}},{"id":"dxurlb","name":"checkbox-based__state-0-content","settings":{"_background":{"color":{"raw":"var(--state-0-color)"}},"_typography":{"color":{"raw":"var(--state-0-label-color)"}}}},{"id":"imiaph","name":"checkbox-based__text-basic","settings":{"_padding":{"top":"3rem","right":"3rem","bottom":"3rem","left":"3rem"}}},{"id":"bwcywn","name":"state-1-content","settings":{"_alignItems":"center"}},{"id":"idosrb","name":"checkbox-based__state-1-content","settings":{"_background":{"color":{"raw":"var(--state-1-color)"}},"_typography":{"color":{"raw":"var(--state-1-label-color)"}}}}],"globalElements":[]}