Toggles

Use toggles to organize your article content in a way that makes it easy for your visitors to find what they're looking for.

The default template used by the Toggles extension is simple and responsive. All patterns shown on the page support accordion functionality, which can be enabled using the data-accordion="true" on the list element used to create the toggles.

The default toggles template
View code
5cc5e0f03a9505b7f7c878f4896d5ef1af382f34a15ec9b051bb8f0a5f6b91291e1f5f3860b41bd1bd13b88dc79a7c48ac397734582b35b15507d9eabb3f28349e3fadb94d9834d0ecc43dc8da6edc059bf4805d59e9bfcdcbc4b4ab5a6ca45ff195ca224857653335f5f3bfc2c896d102deac112127b7546c0b4849a2f59e743830019276dcf21753513feedac78e879f150947802aa706fabfd2a4346a6488504e019fda76ee33eaceb47af9abada06479df095ca1af99789e377e099972de2765e432af5af8aea5d75386e8bb8fb78132cf7a3959f6e6939c6b98eaef0d2dada777c32e583709c6de2ec2bd1e3ff30b731dc7c461387b3556901c1a8103e1cdef280c15dd54387dd4858f224339f6fc818992483bc5a948ef17b9404527e9d9f3a18bec60cd53fd7cd0be66a80cca65aeaba59609be81ed43b3f3f4fed74f2f1084a44c520c50701926004709f72ae7d1358c7fa92f8b2ae4087fad65443060ece058a6dddc1e7900106c52e6fb1c549c19d82ccb1f2dbcd9d7e54d3de98bbbd099a3153ebddf12f4d14bb53691337c9d3237eb7679de49c4ffd7b2c1cf91420603ca73853606c0a16247c0a75e247bf932456c5c5f0c9096e5ffe88c4281b01debd1576f1e0d3da70f508e17f836717bd704bf5c98c28738ea33f6e48fc61e3f49bc4b0a3a4dc5f1ce05f824ce54e157483b8dc40fe55fcfd1ec17e630c105196b72f29e4463ea807826aa8e2da0bd2f3cb8b8a55b2bcde6114b0675ba272733d1d62ae48a14e38acd25b7e0ed89c116c0dc23b8f742433f32927f57c3057e2e771d3ec1f4d30113f9cb1152bee52a58f16941bf92dea132c6f59fdc98eb8e211d0ac515e492de8f6a7b467db48fd72e5dd79ceb9525a725fc2544f17d411154994d1e4ac33a78a16e76bbcc54d02541790de9c64aaf9d24d7b1a5698485d7c3b8745f79014cf3fc99314d9eb235fa152675bc67c5f706e97a2b4f6c8fa96fc8c147b904c3be7c76c907733a7759a6db792498bd335c98689f38ef265761af3e344846212a6b9537af59665f241cf99aa1d83729090764a5fda923964c1fe634af976675c47420ca29ee0666a91860dc1e9d8a5920ffdb061cae880f117594ef6d7b3179e7a3154c7dd164545e2ac35716fe4cd40447710e100118cb663a9f34afd151444fb8080fbd9bb33de3d3a5fbfc492916725a0bfeed80ab819a7d74072757a01c530c6fa599fa2c4cc987dedc2b83d5eaf3ff75fdae10da02f2bcf4537b915521c11fbc6ec96d93769e12ce3d334a3ec48dfcb6afa072c5f5f8a13714729cf7fc615d8edc56add71d07f0509a21cb52637f20c39c303d8f24d4acb789c0e636e3a9eab28450ecdb368cf3cb689f9d45ecd68e8e6162802b77270bf8e4ff1211f21ac34c9f79e37d859e12897011cb12760a00d7b286f5b0069f1c4f27ada95f24abdb067afa27f37b59501dd6ce7e7b43595bbf5583ce82231a33279d7c04c5582fdb206c91d4f75d6a72c9cfaab70eec64df71aa0741a893778586544f0e74f209460ee6d9c94ef72150859821c7b699387cbfda6eaedf80ea5652248f28a9b17ee26ab496160669a78c6b85db79c2df52d0c0fc29b52285af12feae14dd5ebe7cb82e0265ec813dc6b03ce4a454812ed01bfb8fec096b408af5e0513bdf8ecebe66373fcfc6debad04c6b23d9945a28de54c46236b3c6873fff75e7f7f7fc6c97e0da757aae8988bdc3f87f412226d448dca318934bf3851f4b20d7c10da70740c943b6e35c82fd57bda7a0daf491f161dfa90e48f62e93eb2a9a6a1c78286c3376b0de0aa6ff811693ebc91d287fdbf4a6caf62612562e154c6033e61ec7f204e924ab53e82c287a11a3b14f728cef455f60a5168056c1a1dc97ce954c0512c9b5c7772c41e60aee86ca8c03e2c1d6db3d79c28f6017c59b50e066501e42e39a3b3e18059b43df9fbef5d1fdf77d84012198cdbfdc9fd0da6cb20852869b6066d4e963872b469fb7be84aefcbdfbc25715b501d3e7f5ef561d9c1d04e355a0ec84a0064e183f3c0ece34ee8572fc10d0ef5f8590f80dd52c94bba3a3a6dc35bc7e008c6fd40fca525467fd701e2c3da64d8cb2a0172bbd7de39db8cffc81a6a76d314547ae0d1d9fc89099e4ea144269f339477bb8de41e0a307e09404d9f0ac0f32ada743dd7986b11125820b05a76f9d818ee1f5c8fb018e8e85f772b6a791b2f5fcccb18f2fbb4c0c8f7123b3953aa0738fd946cd80a182

Using the collapse:show and collapse:hide events described on the extension page you can update elements of the default template when toggles expand or collapse.

Toggles with a shadow and active background color
View code
aae7cb34f46cbd330674eed9a60c3e359a338bcb4b097a1bc0bc2f59718810ba6abd6e9b50b8a4afb021282263b0a12451c407c298271d825d37687846dc0bfd4a3c669266b5640f4a969af6803a1c53c26a9bf2d420a13e66da7e396f2c22f321d65d91ce2171e5bd7b1efaf61de4a5936b8e1a0cb32a0c05bcdfe7ae569a10979eb3a881adcc31c86885be6f7a11cb52bf9b37df78986579a06e5d93a594472b3135750bbbd3d4752ad65ea0b66ff02f402c36a23bb8afd924777b6fb07d72af61a8e5c027725d2763de15a3d963d3e0b3e44bed0cc09aaae6bc614507e9553c2be3de804538eaa62acdac8381635f5bfb7ff02f476399fea37ac20554c23cd4e7065a77922a77914a6a2388c06e2e73b232c425bfc153007741e0be5d35e9dfc3f588d1047edb79d662ffb7fcefa3b1a094e838c338c9900a2c30117625df583304396cc1c0f16ad05cde2612b3338686060045b6830159f803e9295043f374735d6e02dc65b4949160a4e38867786a37f8fa41a861bcbb797d942757fe98459b0af01c3df70ded01b4d6773f9f56de9bfb9270e0fbec20e6d531c0e6d9bd40abef60bb929ed6799ff471a8b19a786c6881aeb41d36b569343f477655a1a08b9f87252f4ea446e51c52501b9b6673694f6791c063b5779d90d78ebdebd947ed0ea5925f523d46dc869cf9117f1c1ae8d6f6b2b9df44bd70cfaac1fc3b0cceb264a670bccc790fadb9959260be02850adea1f0e6eda3e063abf134f065c5eb930f499f00e368ed62037684697fbc7b626c6e1c43f4d5b3c9ca032b82e76920bc8cfa7cbebfe43d13247f4e16520f8d2f972edcd3b659b9b7afc6887da9e217202bb9599b82fb451738977954f7b68f66d3663c58d12b8efd3dcee0af22a95523eac984b286f8d92cfbf410f7d7d1a3040712d2fc441ca800b7a5a8e3b094c708691f43066f99643a08b711f4d07578d98588e48a4e151adbb328413f2f169fab909a3c8233443aa61a71434ee91ec5466d71cf8020640464bdd50b9ca9aa8c8ad6f289601a641ba9d8567cceb1417a873cc1c94acff86c199133a52c89d81b757832d60d1a4292e296c4b826c853e43dd96c67f1bef8d51bc2988542605fdece566d27a4b8ed64b9db99627fb616670e7fa987594f39ba052a8f3c1c78045491bf9c85bff8099adac3ac9bc6345bc6fbcc2f818a5217315689ac353f8ee9e83dce6d246d516807c05fcb4075ddb5f5903790601093693d84ed5aea3bfcdb50740692bc2c30fec6a5f0c6b74865c720203bd3d1cd88553618a0f160cc9cfec42593b6621e73dae6d5095f65596ba6af6de3f9ca9702343329cfb130345e580d87794c2f352270f9cf422cfe6b7ad48dd1dffae18c8d6a4a44aa74dc6897bc85dced8cb0a83585736ba47ad7b1811d27635bda37abd166beff40192a78aad3137585db70f7eb24f5a4904f902ae1e186ce35e3133a59826ba8dc86225cd2b7ed73333aa76134018aeef9677cf73cf1a54325cc9bbb40185cba73d6fd46ed2e39d1a2fae130bbb27680d04eab324017195c6152efd1f4655a29e189b444febe636f34c695dd4ea89e814b8a0d9740fa880b76520f817621b1cff26ee94c9b3ab74e7655a32d81c6b31272a94c2c9e5ad5993668478403990416c2122239fd58cf778e116387df3becfad46aaf7101789b1de0d6f07359786c1b97b268a7ebac302eab9e502866ef69a0ef3d33f0ab7e8ec21d5d22799f998b0f80c6a2d0ce1365804a68b091cdb19141f3d8ace41e0b374e6e5bc07be5e63fb0020609d4f76444e78abd36668069896b5b9c7b843d1b099775430d41c2ae13e34f3dc310bfed91e89b9dc3136c60ac18c20656a042941daf6905ac484c46517b5389e2326f9b08613be136009a814d5337fb1c5459374dc698c391f25bed53a9f67234bc4821fac5673980a93738e4730e35103d5627c3bfce8343a104c60e0151a1aad5c91c260aed8c5952a769b84172f853597e6d1a341f197119e66534d1b9ea9c2bead26d66531b8943a6bd45a20ed9f8b937b3dd58a85da93f42958ce3e419e6cb654eb527b49885b48f9d6809fa76daa2b9e111b1f86ad609c5fc6834565f2aadddc8de111db2cdac48352986581c87327f3ce78cb39f0bd011d157f6e5198f7a91cb963b6f9c6df126d1836bfab4964251ffd4e33bc80434591a5bbe0108453af45c00644d6751648535da4de93e4ba76e552b9ab4f1d23c5ae936eb043ba1c1d2a782b350e2b3427b31c6fd374e9c6623259d1859c7dce12126a52564802919a94f2026a63f74748baafcb58078e4edc34d3b2ae25587a98b50e556c1e619b6841394ba8867d0607f20a153deb378f8b907bee9322eb0e8c775dd4de99c5be05eb3d4212bc0ab199e8fb1a9f3f6f1ac88a55edc2f3dbd82d6ae333f5542403b55d6d5b6d903eb9b69c3b1e38131a661d5dcd5a5ea7f479190ca7801649ba2f8e54b08b0ac09a836cf52a1db96e1f645b29b2922cce511cd275bb13211f89bd276b1731ac0c5499c5dbf8c12458a319c7fdb6e68dfa5db05ee415497c4a5f28f5d3d9b90c5142f162b9d5981d77d1016d3c805754dc57057e34b1e349fa205843e42d45044e1d0537a600221909053c64c6be081ef9441e991f0e48cb437070b4dab4329894936630351d405c7c9aa1f2deaacdf058d2ac8e3efffeb23302126abeba8bc5391949bbaa48647e695baef0cd0c91a4f76a1bcb0298ee5c7f5a6f9c6747c2c3999e3c46d3728a4fea078c58f64d41e2ec858f4e9cf0ea495e5aaae74fe274867116d07a28308d346b560e57a6c651722586319bd1e5ec459ec30d8d433db5fd8ff76faa2477b79cde79449ba6d43df5a6856203df629a5aa8822aba045ffbdc4bc4f4c39e5917f612e143c887f29bd267630d3c1b77d9b91fab883be3c93061becffdf199692a9c7c1c49c1fb6dd51c7144c34fdbeeb2d525bb6fe71c5988382ee0fc913f54ea94c74ce80cc0640ffe76a71ecd3c5b669f752cfe98fdefffb74acb5f9df6085fc453bc9ea48cd4dded4e9207b02a660bc2be4ca7a962f1cc6e1ef73c67fabb0fb8e58b7b35dedf2dd223d75860b5dbfefd00621ef82d075babf239c387bb35ad0eec98dc311ae953164955e603ce1c5274932a8c320cb78f9f68e6369f427b5abef4ec2ef9d76016b946a1fcbf5f396a6637fd7b0621808
Large toggles with background color on hover
View code
988d756a3947a65def4fa81ff696a08abe13b8bd9d7b644e715b388b3672e9bafd3b3f962a4b2a3a2dfa9e7bdd9825e47496f352786d3c2f5a3ad72d263a020a4c01b3fcf7c1a49555996bdddb84ed087233f7cd45b4bb8bc9ef39688519cbf44f8be919705ef3e192ea3a342328f8a2230ef02098e1256e407fcdea4075e2ae742e97239d4c080fedec85ef5e7490b408bd407340282684bedb240bf9f4d6c8d6daeeb67279e50b9893fa972e5f930c8798bccccafc0601708dc566ff30e111b8e414ad2e8417285bb366411aec7ddaa082c7f059848eb74db391ccb64bc967be822a3fc90dab93b74b87bc78afe1719a4cbe386f014b8e61de84b3d1b842f3b870a04ce26502ccf1d2c13b19a781503b806d0ef1ed74925e5d6ca48ce03a804e636bd6280a18ec7d7196e30ba41b96e06fe9ce63878b8930259f895699584d6233f2931f4d807ba610564bec33e8fae77570a51e1a73340bca90415e39954427018f18b77ebe16b7ce41c930116f65dc9ebae073b8ca5b0cb23e358189615e6e2ad4e1cf288ab1fb6c95ae7cde8e9959452aeb886c2dd29cd35fc2bba6404431d427883fe369a307b583420ceeda8d9f83f18960e81facc38065f164ff182396aa62736f0f906e41f45b889f8caf577d9ae6118d465733c2f590cf56dfdc80c0745006880ed48bffceb4db13383953b3ce033c00d0f622e6956d8863b159e6fc800ac02f6c9b3d3bb7595bbf130e2576b7e8904ba1bc1c52d434bdb461c75e62bb1fb29f5695e92e3c1df03aa8397c23a8b836f34357720fa5456dea62e19e5c374cd427171458faca398f56a0e3592dc281203450ec7066bffe9b62a27281762a755a5e62fd35c419fbf4910955973604bcb0e05d74a53fc1f06aabcd16dd15b77973bfd2fce79444187c7447a36f35bf0f2afc4d22e5a18c6dc031d580202e54d49fe06ff59dade2962b431d7eaee8631e6824b68ca8d66cf4d7b3b54c27c785e5ad012619c6f18aa79e16a561d75e5fa17bacbc5a92b00e90fa88cb136bc661398e37963e47f03e437ca2efedde7f48cf4f788e2d34f18acbaf51662e2253b4641617ab381059d70e8936450bbf82016d27e9b8f15b83c129367746a9006821b5a3b315e50da10e640e5eb784b8b5304c215a4800ff71fa43a4f30e4b6ea491956bf09f6b5210e73dcb6ff61d5b53ed6772e665f73558835c1392931ce9fcd8ba02fd7c22ef971b83e4658a75382d7467429c44a323e13c06198885e842df2f7ba736a819a9a96f6c0907d1f169fa47f824b2fd7e3d2a0d7f9fcf46c6fdaea516f136053ed6192079ee2f7b5681cac42f7841109636841f6ef207f94cec59a0e3cb6d98c73431a271fb3e9d492940b8522a0d198fabe514cd4c187ae61397a4a0fe023584f3e322afe2e1e0fc2cd84ec867449bbecd519e59f6551f7e34cb86b324adefaa8cf9e8f91bb5d2959d9c63fe1b61ac10eae835fa7ab1709eb69db5d2da8f21d78ffb47c69902b0bb1e3c742cfd037909c219ea5731ae76b35c6d28b4102719d3621af457db915160e8a115da41706fbc0b1585a9ee0cfbd015b75e5d15a1ed8d8e37ac44e700c2975b067f2c72042d26b12e050a94091f4670f4ac889d2b72df1232e6a5ae7985633f96c70ab4be6dae4f6d7c29b31d8c72cef29097991e2a98337065f703010c29218160b7ef8e7de6904f2ba3abe0719f8e69269861497f41f240ca3c42557d3b31961f7a120a3e2eeee788e10a7642ada18891487a76e7cda927a2ff8b63799f16fa492d33fbbb97617cde8af6304461f6cf675342179681cf8199aadfdc1aa50ae9d883b8c109343812128caa87817d660eaa573a47df2ebd34d2891ce7b31314c3dfb68792884200bb9c9067b8d0b0286c91f686fda6cbcb8fd0a58d2f08960712add756e8dde4be40a2ea646f1942028d7b752931af59c1b868ba1e2e32d3f1fea02664480196fa654b5620c1c9ed38ab162ec0c200f7d78cfab759c5f3396fae8ab08f6b0ade32d694a8c75a4c84a4fe50c891d74c3b529ddb7bfa5aedf70f1d30f800949eec0558c7044162fde26636e202f1cb0d6ae951e9f85507163e9c5e62f92da83ba5cf6a5a72fcdbf467fc97990fb1a74ec932948c90ddf5cda161711d5901e973d9efe7d497cd6520421ec5d7c4db336a0b8c6e698aaf8d717ae24b44af6158225a8df93e67886ade49c18adccc201bbe41da886c978b446a810e9109aa4740ae5ba07a21608e5da5f8876517e38900ae57992e3332f8d91faccd7b470f5314be975b2c37bca9d1c86852a1a8f6f0c2fa30802b376b096c1f44fd5f294f6c06300a307db8533320ea0a3295dc4267df2948c933f893ae4698cb32fcb1148433e90786c62bc0492725ae316f96cc4c6821108789f8b56d46a5e829
Large toggles with icons
View code
867c34d3f0e408f51ba519c7f91367ccc7ad6a0c0853194ecf59fec1ae7674a6bbdc0f51985840c7bb36f04681151215f11bbccdc55034b43971b502a7b007bc895315aa73ac7e6f4fb269931b65535275f97ae5b080c8fabaea6b55bb5ed633028b5c7facc6b459fd9b25ff76b4c959f3222f9a5de49015d6cd215f15ed39ef21408e0c9251022f93be0247eeb3e7dfa5308e0a74abd6ef8e51df975466c9eeea48b3d1dc940c5802de7f8010011389047ec1085f932b19698d0fc72af527d965af0994ba0fa47b5850ec3200e85fbd4aeee2de76f482286f50115c881124a0b32453deb92091d6ca4ae258631e5612cd29e6212e1ec43e7005114f49b5cdaa83f786c49c34b0b77ab8fba551da64ea3aeef937000987cfb6a3a6691d40098263f5fe281fbac9b1a842c05a2cab3e15500f5374edfca1e4ee13fe9a8eca3b5e48b689334b57a38cfc630afaef798c40c89ca265a7fedcf94a2ad6cc97e2314ff78bcabf2b86f0d0fe750dfb6c2294c502449afccd588b375c196a8c3921083d08fc9ce8b6b0c6f1432d188a3038fa8f53f9bbecf658ba1bda57fd865a7793f38b9032d86057301b96a3384e4e18ae25b2432429ea08336cebcbb3df077ce7d1a883e3b23e299a700b933508fc2e1a7110a649eda635341c0442254e7d66afc772b11d5e2abfce52f552ac77722876fa77048381c991675aa019156089da60e6b57bd162e68227113afbf53bd8b9133d0dad6f37d6e7c47cc122812fce1c0f023e39c2d340db16a142c99815884f284dee17c8914b2aeb2caa8930ac766a99cf1a27797fffa1745e8e6a555dbe8125f1f6ef836e603b0286d9d290b4dd088e2642bcbcd3eca803c91bb0ea798d1ad07ac8727e7d4c7bde8fbb1f79a07ad48a3e7b033c5020eff17fca5cc864d71da9fa4564505a8610b2be7ee9409ead4af213198197d3dac72f5b545c53aca53599543dbac0728e01dadddf9c9d75d6a19ecfc9c506ea329c2cedef63111748640d6780738625902ebeb38fb089f2ee5914ea002d11e98bbf7f5ffd4abd3cf8f2a950ae3c962386ca04d083b8d07fd00fdab78c288162b595df2e2b335ae94976c9a5428ad1c5d63a5ad9c3e74908d68b8a1bf5bafb0009d61f60086e82790a13b46df977d756478e77106bf961abf027fc3bbe5a0b29a0eb4ec2743899d64afa7e2607a63c548e8d8a219886629f71793f49df727973c648fd8819bb42a2e01951d7c3a7eec00f8f5e1dd959c6c47701b19695ef5f64c0814bb0209c062ce610502639aa2940f8cd4dcfdfc6e35895b280276ad777a7340e3853cd9ba48fd9d86cc544e99d535dced5cebfa2727469f25fade1872bb584869534665df619be110cf2f20798bde35ecb2c089c7583c42c5350320036ef8bbbb79872ec6138f13594637fae29419b4d385e71c265d7219c1dc386e56c66812234f626f2ef48a070a042eab57ead2f07798d9998389bd047fa5770ec8db99aeaad2753ee166a8e18e738437c3a303da2a90f1cb286b34e0081345e8e3d7821139a21d0e63fb734ca6dc16507afbe118e81bdd5df3616918165bf06207cc9b5af9b580ffd423e45046d877b5dc655fb8206212b51c3aaa07e7a3a60a91ee2cf5228bc161b91efab578cb2908335609ec9a851864b9ec7152d692337176d87bd14d3ff8ce110eaf20adf935c278686fa5e38c98489354cd627e4bae866b7b9456cc094653cf5a620c54275c89e5ac9099c3007945f3ff1ac4edfc6b61785b13ba04e84407ccc10006563774916af195f79602754ed04e02c4d5e7461e1c90c0fc5430c92ba793b6016ccf0a659d2f7d23d460a6247d3685ba539b2b12ecfaa23bf91f8f4951c1d3115e40890c040309cde1967e05801eab3e37f4893d73a90830452e0f6abe9ba89345bb90e06b9a33f8ff89cd4245521c898b350357919477823538599276e3af2c53a06eb6f77a212659ff0e5b93c8ee54e5ddc8b346fc29dd40730fca697eb28c23695732cbb082659feeed98eb4bcc8c3df76a2af71dd8fa2a4c0ce469b37b76d02736923705385a4dfd42afd2955a411542abff9bc32802f52511f647ee8b67f8c9c5f9726bed9fa302a25ef89ad9c74239835a406e94f523932075d8d07da77ca792c8f638bff68e0e71dbd22a466a6d2b0db2aefbd7c684e110d682eb436e6b1656fb302ffaa5427910b49c7af6a616eb174a7a383c5d5940b21b482fb8227474799ccb00c25645158aa10fad035fcf20dce0aaee168208ca4885f7d8bf8211c765eb4d00651bcef2fdbf766b6dcb3378561fd48db927f3f4269d53bdcf30f88c39c448c0a5b1491969d3e7be8d8ec170303b44981673552a237697968487a41a57ef04d604a90538f761aea5a0e98e4f24b8dd5dad801bc7c0c8a6260c1652d542a105a0b26a84a5a84c63d3c69cb633ff8fb9a403cba7f415a7655a69f51a55bc7fcb73bf8ab90b9acb615245eb367a4a3940e7b80d8200778c9e41d8f834d67e326bf52e1031962ecf735c1262e7d7f3361df3951758b361c39c9f7d290a7ac7fcb1c1afc041d79ee02a16ab306650239359303f6017f70fe6cab029aeca531b248150382b96e008f2b1db43c060d9a0e1a4ced2a8e85ef14f9037801b3ad112b7a1d93b4cb5b03d56d117acc9e9d4bf715dd150f1209b664091a8d4b1a551a6246658049d516563419ab4e9fe61ec606588e813886c59cd9253bc0db0d3ddcdb00e1865c3a85b86ad4e5b5656fc06903573290733af3a87887dc9b13e028786d305c3e2ef46fc2d2804ab74f583b0a21b5bca62cf226e08881b6267432d1c5f1a458936249f05d6682eb08f9699e3ffa3290bf7a09d43f22f77635b3654b0545594d5257fa22cd7ada09054925eda962e52b299cf54f3178df495459c0971c88e08af414697a1d8dbf1588939e4e6d59edbe21687bd9697b07edf1a6e5d9fe3b752021435554438d0bef17c47108f54590051b1fe2245d73002095d6a394ad77865397a42324f7c16053c2e6c9d582497cc0f8abeb0c4727c583b32fbd318dcec959e22d51f07742c320abe884e947bbd86be023b59f81bf73668ebb4aac0b6ca612b6ad04b082e4e3c7dd2feee55839fa7fb0fe705f24e638fcac2e2abfbdb0167cb6373ba7257b901915f4a425f3252ead7129c9e06e43cd4be012d36fa10b318735433bb9b1873bc1ef055a2c93d9e4f4b941879d78077831c118dc8f7dd7abafe8091fab8db224296ba6b10bc62c04ac50adb0554faad3e4bbb04cddb3fd718e0a8accf4c1d3e22bc8426255d4e8547a8e604b6898dc381eeaf022307bd9b8e17cd137e637a12857f991350940e8841608d9938c85b533949fe6cee0e27d0d0577043d2f3673c2aa8a06292456689ca61686e25e2c6fb34331985f6aa937333964447ce78d321cbd4a6561d0a668f87e0a0e8e807bba9f7e3cae7195a00e056db8b05fd979ef488efff34d486eba898f26450c4e5e81ab548cdc80fbbc5bf675ca8d8a02ec20f3e3dedc4b76aa18d68e2089566dfa0c9418c0b52fc24352ba5a5c96496a6acb61629148021c8e34ac5ebff3e57319bac225bf1774ae5157edc74f312e619c72139ffc96df8c2fcf03a775e2891e3fabd85249e48117d0e4118c3ec6f075900614464dae6e09398c082a06a336ab4b66d09ce9bf8cd013f64370d1ae72922c4cb309434c78b26138f1b3b023354e6d447818a20f40fe0af2a846eb90e876a6161931c3ea79a46b19edae2e63321f635b7e8449e8e396bc2b46e640e54516fd8308055f5c24667af3c25487def8d0d3d548806f8d3cb2af4861b8bc1e62e0e5d7fb898f3639400eb1efdef46b90b167cd23dc79ad094a09faed91df2bf706c61f6b41c6d6d720b2ba16c933c29a8568b605c66a018dde2775334c96c99fbd9e7f9561d8db4cba875b3d492fa6c5b5693eba264d0ab0fded92983ebfb6430d77d978224cb27441ab51ee5cd5757377153df3339e4d2f17ee9249512bb355d061bee5aa7af3ab02d86f08895038fbdd07e18363286eced881738108ddd6d39b6848f06398a64d8f64a5d42df273e4f5998de9e29557329557556cabf9e58f2bd1c8481fd692cada13baedcd94d50b497ba5cd4c3d6cfc739b489f8f900b76a50f5e3c309b038b10b610485bb3d6fedb694605dadcfc5b93fdfc917d0f9fb915bc157e5a389c6095473e55fc8603140bf0caf4b4550eca147b3ce094faeb7b541133daf1c16b07a8bae9ce4a8cc7251544bfb1ec3ce4957c1096e016f5d047fb9388bc4d80e91894d539fd6b1206026ed23bf0429ce4199a5b62f257e5c99deb367b3722084fbca836f5fd9ec00125e6a3e7ad39ccb774e489237e73c30d082aa35e6def5ca7b5fb7aa4eb680998477bcea746e69c30e0b06d34f902af8c1602447fdb1c3c99aa2dd82fb38d2239eff12938d4379d47bfce28b308e26db70e3275a17a8e1396b878c2ad9f2b265f39464cc4c6873be24065c89e67e86f391d80805ec63bb143a547cdddacd8926b645cdc84b479461bfe2cac520faa5535ffd40f490f75f367be498683a2e3339d9e98be23f18d3d60dd382ec0dd2325952906d9b43f2f7552edfda2e7b3b40170912883e75ccaf11eb7d9e897a6772cf3b9be8083ef2a16375232fc18835b8fe0768c772826d7e17e3586d99400b3d367e026bfa6b5787bd90868eed7b4acdafdc3bb9c8138721c595229c28a9d8ec2e235ad235b7fa6fdc59ffb217dccd22cec5178b4daa232d32a3300dab83e3966e82e9541fc1eac065b90a6172a2672e606501301764074e3f2f21b26a716e760224092fbb2c2df4c50361256f6afcb54ebc58f6ad73a37e22c624ab69c98a1a4c0540862352a20332cb5e95f1583154f72f1b493abca9bc4688935ada33382c24ef210b83aeed1f4abf7d0fe5b33415b7efac87cb4980c40ad0ab20c1db6ec79e25349d367bfd2973956562c2dd02721f7da4c4239babcab99efe9302a40f77ff1a053eba85228b0256bf6be3bb540c5dc0611606ae29782d0a665f48a11fe02d96100620629931f28c3ff71f18395e600e77e622d8525684664ab6c62b0935ff092dc5dbf17def30be0b79a49aa432d8ac5dbb3de0f07bf2fdca864217fb385f2e3faf7fc9c5f06f828f7732dc97ecd0fa865dc10d52f10d96a5159a6ff6fe6e1ee98aba77063539343928aeefff5714ef4c735368add631ee7529a728756b1c9ff338c3f064f258a7dcd4733b2e7d8424d24001318fc9b672e7127108b33f9b1b32457c9c7e380650ec00cdc97def54dd5025b0a559981a45b823ad37c0919519795999ad5a89237776ffcc5d6fa10debd0aa97a73c47bc71cee11ede6f1809bfa887af32c2c1176ceb9a46c9855bd14bff63ee5d8027871da66e7a16aaedf35e555269b483c70927519d0605cae1ee93e707573427605fd4be2451433dc0b05af57e1154765975cdd47680c237609112fa72f18e3860e8edae727314dbe91a13b1106f2006d9a61b902f6a2f4661b965ad78264596acbc9e556c2a09734e361b70aac6ed02e2ecbd2d5fe4d36e17675cf3137e4791726b4d61a2297980f2858987991d28dbc59bf98ef564dfb7430401889e5bea2c2bd18f5b8a4930e7651e5aa45e1e2eb9169ca7f244b26c82e051d4e17d13a3fa74575207692d804aeb438d21410b1f4881d097f329423aa364d5d71830c838b21cffc5e4c540fd26fceb979cce23130394c5e404828a55eeb8bc3edb41e921daeb7b91c40839e1d8e218f7941e4480dded808c18d6361001af96ed0c52f5e071ffc12464b112d9002bb69a09a15902ce5aa18746a24450b62e37171fcf6041dbebc139e0a0fc3e9b11004238422496e3137ad399ba794e779b2a0b7f84e03c096d46459dbb08da3be683e9988d7f214ee67288328b5277f0f493d375d7839668285fe0ce4ec235af902bc7240facf03e1b3219007b2b3a2b22adb07b8e506c3ba85df9e89062d1958b840c4cef1e3be501616ddf306ca9b52d63f687749274688769c38d3cae82312589439f9aad5d9fc364163e27fdfabd76db9338a94c682b88f92cac71d5b4bd5a73566baed4712411d89e85efeb658bad32d2a42add212c2ac3154a417845362e117d30590ab1ba6ce56f56f3030ecf084c2c46951d9758b4a3e174fe95f4fca2c7654d18ebb75eafecc1899bd97117c16b36b3f98fdca7efe4624690445a2d51ea7c700fae91e776c5944331e4ea0b17e4ecd995b7c2ceeb6084e68be5bc15b92f06b6a8868b92c6c62075829aab7336d8467a710a2bc541190dd66c60fbfacc6960e99b08b45b6bc32b0b0b71e2737de955a63adba6ad748fb2c6fd293994034aa69ca2821a28a4433c642de8b06f5613f222020c66516fe96eb02bbfc1bad51c22971362d7c91cc1aa53c202014a2fae0c51cf188f715b3108001005d516a083db4d3c458fdf6fb2109546a01b1d2f4c1d063f1cd37f91d84691ced0e3cba9c2174718073a7a889f73aa7216e1c8b80fd3812d8f324f1c8aabc6347feff049c4749c1098fde77593f769a9176bbfc3cf73d6f9a820be87b0b859653c4bae2c1776b1e4088ba5eefa7f945e43caa2dbec974d5eadcfa2e3a136c753d45aa1a106f61feb1c723c5018cb8f20b2b799c0b1d3130f338de03bf879680254b8682434ddd1cfbf000ab68a18389a5d670730eca045efadf271b68a5f024e3426f72e8785b5a50fe62a1c434de383cae01106dd0db873b7f937f6e5d71aba263e65480ea9e1cf8c47a9446114495b2b4d65a33d03e5e7311a391bd0355445e6e390d9ba68810d67dccaa197ebc13598c43b7fed2ec603ad9548cac6d81ebfafe53a9e5382232367aa7564f9d7eee3b0b27e0cb7c0acb8d77dd84118bc89ac123fab2c7d6ca668d549176c9cf241f3bf87e1a8c1088964fd73f631e1bea3c8f090899576a6f1101c244bb9ba17619ed5812c6f50a49e6315c8abaadf955793a918ae15c28581ea786d998aad4639472ffe58f5594f1e3fd1348411a2ebefd3d63303c191a0b7cbbebb690f565b55aee6cf92b1dd3077814542b98d246bb571114fb1df7ccd8e7def577f021d8b8608d7599fad20763b92ac0795bb347db277bb6ed9f8de276b55fee9ce5ccf34128fe7fa340efcfcad961fd602d5cee754af0c5943be0f0e953428df254a00926ca01d02c21649f01ca73acddfc740386d59e20bf9dfc06481e6ebda452614f79bb23a66c4ad5a0362b7c009f4d156a6f24f8de81324b1e3bc652e4e430562ca362fd19ef2d18ed1ed4fd3d54ae5b8aeda3bab97cc1fda0b4e328d2108eb921a9211f865695e24819140ec659d08f0d68495a4ae395ec3f1a61290f86413d202d1326d3df7971f6ec42e1f668ed053e3db08dd1081cc6f4b02dac02b0bc2cccebba0b3e3c6dc2c0e4d146813de7548a892e925fb4ba4d28662ed2e81ada744c6789ea4ab85fd449c19af3fbeae6fbe4818090a8fc5e3f90864b64a23b0ff24e13ba5a89fe629c1e4d8223680c844b48a40d65ff01c61e05faffd9eb4ee1eb411a94d6fe56a51dfe75a7a42816989392f777a81dd572704d9edb2b064f055976e3fe710a664805577def9666f2c6c092cdad8eec7ebb76a3f2877158aaa357ac0a84a3325b43eb960e497b465510646b1cf183cb0f397632e56556e509d74769159231e50914ab11e94fc840d4595f0af08c6f2a68b19eb7d9db1b47f3e3e0510c9dec801d8761b31ddda1cb65af3530c72ae96558df819d8b403153071f356e23ca68eb6979edda6fe841dd2aba66d2b7685674972dff8a3f12024a69b4fcbb2b8a9bd2c415c2f352271f2d546ee6e0e4cbb559549db4ed5e0cc5143b30ad2acd7405e9eea3ac237fbae1daa27e50c5222d91e33b8e815a4a7cc1c3c7850837cb41329c96ad6afb21376ebbc137b3d23fd2867fdf4a460bfa68129d774174399661e791bab212a88fe6b78cf98abda2112ada7a1778eca11ea8884d707009e6c67372192df7368456255fd2489d893e592c673a1a3b6dde9180afbe665df212e77f2483f115decba586c688773358eec2092f5faa55c5d997c8c617a5f23e39236c98dbb95c21526f2751073032156fce0caf5c93051655fe6708e29828c9b45fa17167eb1933f1b1ec240ebab5c342d6f47a2650b461a810434e971de100853ee62b737840b21f79c783ef481fe64775f1ececaa013c97b60559a8fe896c4b9121eadd729a45126df38b5579d3e6c85eaa0c971bfa3556884d6274e5ccf252ece08dfdbe4e99375974ef65928143e13a81ae9cf3e12cba75f39fc5ff2978092009605d4ac3d3dee7f9d256d520e7adb952f77787b1a1c6a5bbe242942e0fbf59044b972dd9305842c4de552884829e924bfe9c1a97a7d741995c11ee45c604795db0c268455189ec5eec3b0e015cf2581bd6319f6cdd551350b1d849c675f805110365914e85d3957468fc4ccfbef80b6568b005134be5bc9532004c204d94be7993befc4f6e5f0924380a5f66bab438aee09c494d2074edde745ea4016ffb9693f6f7622dae09d14e5f224e73388d6600cf4c8f80a132dd5403346852a065e123ef95173a489abc0e02ad57b6bf5a4734929ddd8a51c24f6d34ca487406b98a047b82b40b3d1bb13db525bd865c0f28092bf120a01d378508e16d0b82b90ca0df40a612ab691c0eacf02341420869a8c648a3932bbae729b3d51267134e11c34c0c6df3ae74c03cae4019b445ce3f165ec45b30d24373184b0b1a4936a1126c80fbff22fb3f25557ee226c3d011b69b9e5ceb3c02c8687e4236c2066e99e505fdd8fe57b9507f20f6959484bc06c82c60e7255785d8c7063fa59286fe3c978800638dcb24338fc98ae7a00098ea6fb4b909181779ef45fdede8340ff150dd9b0c25bfb4963d10e6ed5725b005fbf1bf69fa97e32bcf018d03494ae383e820620cdd05a1a1a7d31f7ac8261da90afbc260af40f059c5fa7d1115d5840dcf3d1fa2e17397af25484820fa34e9ba1fedba89ec6700ca48b2af83cb0571329e9040662903fc61986da23c12d1a45496ac7d0a78607e0ceaeaf705ea6a51b5fd0ae5fc6a8e32eff3da55cc7966ee1171c87db1bc120e8b3e3b85de991cfd962d125e349e66df284ea9fc6f8361a061974456b3c4fddf90f581d69e1b64f068493516bded797ac09f730294e644f6e4bdbe95b6e77fd7b7a8ca921cfe6e829469b545fe9b281e80c9837e55e3201d85798c94232c0af561bed35b428b5b89effad46dd69383c5b60ddeaae09057a9d4350b511f64e5fe2f6b38c5a7f1028091a0657762785fe49707d4dd85435b4ed024ebf1be97ec6aa17be7ebe821c3d7d58f7bf3f4cacbf92af1bd619464dafbaaad6f0fa2ccba993e96cd5faba52c19596cf5d84c7562ffc3399d1b86bae444206fd5a8d65ecdfee4cfa54241cf0bde932aad9b5bc412a503bacc221bf181e1113beacadd65309cb2f038d499a667ae7f8078f888fc5945f1a7a62a571c903094db50f15616c0456b79dfd4d4bf0defc515330ee0099a10318b0ce840a8de8a41b28a080a7e260b6e6a17a131794e9f3034bf08bef19be0fb0504d22af2237e1bcbdf831846cec29131224a50462a85787fb9210f87958efdfa5590136ff5826f2edb6730845cc4d773a064da13de17b3f185ed17d3416270a8dc5d4d968a49a79f1ec3573c7453f1e2fe0a63f287b62bfac2db41bcecf5886b0ef593b7ed83bf868c8fac33b06b2f84479c6e5a4c2ccbb4a04aeb1d6f71df1d95d8e822a93812549876ff132de728fd38f249147d5b8ef0450ab8e15955e435141b0795cb15042e1c9777a6e4f57863194e36e7c2716f3d62e8d8a7fffab0f39a4c8a3e8f545b326d076e40c4114f29c737af20d688d6d64f73d37050f42d6c14ae0b2a7fea567134f0f2be4f50803cede1dba7d95fad3f440a25826fe9ae4362a4e76aea9f5847f23cc0ca6fbafd3c57831ee04055ac544a229b33ae1c926a58ff73317e901ad1905ef4ca82e53b8994aa84a27516e2965693d916d3908ff2a73be9c6f31508b9c1bbcac690ef8ddd441a148cfd11b09ab83d28de2b2f4b802b47ef9af696db46d1cbc68c1f04150db3637224bf97adbe0edfd057217cf250c565b7ae66ed8a4cd8e145ed5a26caba959989ce56a24c6ccb64e1d178a43f6c6db47bce6e1ec517f85255c7663dd757128b9d50563372cfc067c58d9de933529026266fc18c169f7534fe7a86d2509ed1b93ae289c034bbc55e297a787b6a541de08153a2bad3bcc8b004caf70572c2ab0cf8ce1d7214a4d32e74170f6180d1b577fd9a86be52c240bc60d225fd66385c6f5c749769c2db27ff19285b60b0e3e69aec7614145fa64eb9cda34d4b7bca95419bc60682b31c9f282abab59972b625e405d70deee80772d2aec7a89acc7ff5ab5babeb66c0b6bedb37229ff46f71826d33095f8054380c1bc642bc8c6a30a7702b9301af8d9b565914a30bb569a2a04923de44adfe56316ccf63afa81d02f8d79bf941b5036859852c9a9b07434f86cbed621c0d375f6b2c7d007c3fb8dd59585ad1c266712682851af5

For a simple look, you can remove the surrounding border and horizontal padding to create flush toggles.

Simple flush toggles
View code
c6812740b9beb3beb332bd7679ee2e41f78f809d57909123dae76ccbdea449a561ec22682f48d6befc1913fab53534e9a320f8aff3454a5ad9a60404d769b009a99cc29d396c2397faf85fa8aaca5f05c6b5445d2f922ed707424f058cd3e289a660ee777d35365c1ade6fd639906a7e14097d458cc1997ed3d878ee3200015b3a6ae23d4d1e56bc8cd197a34695c97e85a88ec3d2068f6139c0bb4dcb7d9d3cb062ac3046e21a9bfa9a63bed6fefbeba8821998f89f6927298e9be411e73657f7374186029a5f221d2b91f3bd3fcbc0fc8edb0d9c0f4447da2cc1aa388851bf4ba90be2700f09500ad750bb2d62a0d43d0c66700e412285b900b45c7eea31dbc3074e58db6a7ff36d6f30819757dc8eaf1ac7fe509d03500e07bc5417fc7feceb00e21c543829e5e408337daaac642f7a955cc2e4222e8d92fa96eaa2c5c1c86129e7e9097f6606f778661c93e7c8de4430248611c94300a54cc5877ebd5097a33d1799e33ba4144879e4b73048514edcd38648731657f3a2daa518c63eac2d3dfa112dc70d2acadc06dfd7f26b3111ea0404a146ba343bd7e51a630630477552bac90d9434838329e879aeaa61945dd4d1765d799c661c508159b4a62255a399bf636254c33524da5c6a92bc056eca07bbc4dea25b5bb9a615b6ea9f8f0e73c4486288ecb909705e22ec39eabe80c5eb09ae36735c91aebb53a194a4a6279c40e5bc77e2775292ac4d62393e53ebab8034e72ef39070831b5870866fe4b17c057074c2f22026bdb8f24f4e8836bda50b9b7003a4c60e6ae88283b8f5ea7a05ab905b869756d98baef3f10882456f33974f21a219cab2b550af11b4f8d7c372d2946b08f847d5ad7ba203f06cc833dfc6ac66a145ef3a7ab779d86d0e4c00838a51d3c1a4b28df526e54055c5592f7f585dbc80cd5e4cee749925c957cb1e7d66eb143875a58b58eaf764dbf2da63250cecf2e66a3f288722a16568e1a17680acb96f35ee7680f493aa4cc7ab137749555321773fa2d5ce0cd56a9cd246f10b3c9f87309b06956ec87e5a61b47db3b21fdab1d447c52650fdd9fa11bd4590d0558c159c9ad950a192ab23f686d4abbb525436b561dc9461963aa7b2c5b123d6a25f17336a3f009c30b5f81c661da3688347f12feb34dae85053449ee931ad696305f1b243921b1be4d46c53f87e5007c069898dc6097b7bcae9125e875da45464f20ac5a7fddb8b05fcb2cb4240f63527582af8835a3c00083a281da7ee09600563c3864addd610de98fe6fd5ad26dcb9e232b904c42a46f30a488b222becd223e20719928a0c4d190290f932f46b12f33192044983bccdf12c810d2f0356a9d023307080a4691a2ad76b486a5459c6bac5cb9bc9cffba651455a65de7eafda875f4f4fe837012334775b27bffe7f586f9bdb9288509c3cd0367d396bc11df880dfd82981df8a8971fe5ed0923938bf5efcb6caa47e2a6919a2a2da4a1853c7c1c6d39bf5c82952a4ba0a53582fd5328e201f03d7c8df7d6af89631b9ccffd872cb7e86ac2e59f970e6c1ebeffa76ad426b0b4e9abf0740664c498c7c6f90d073774df84d468cd4d03c185dd1172b9226f1e8ac8540ab4afbdfa25a35f1558a46afdf76d8a4be786203c79905543eca98151d0353cec5121d7677016c1ac9c5720f2afe28e5f0bf8b6ac18413af6fd5fb99c11387cc73bdf891d0726e4514ad38543b0b0332b362943a4523ba6dfb1f7c64df2c296ea79a54a40c0a7401837a4aec0cfd3f8a8d40b52d20973a8eafe02ac96b4c81f638d9af04e62c2dc13790a7663d97ab8041ae31fff291698cd8b730181230229fca70a43741c29a1e669e67f07a87efe232bb960590e27ff3ff38172c9a1da653f05e2747aee62febb820d3c376a58d70db648fa2dec814705af0d98b78d4ba6336f7e7612f0b64af784b5d960ed34cc17f3712a81619ca5641e17609f7de30b5432533cc3da7bebbc76a0be46f03d57d4e5623018efdce30f7f712b5ab06f17d0eed27f1e1fd51a55f5da9e460059dcc571055d7c019394698ca15928d1c0fd28372def1d2732d18a7899c906688354c89b12d3f2f7f1de384b733dde47ffc86c571d46004523797c198de2a9f139eeabc9c1ca83a956ff46975004e6625b7a51b95706375015737abac75d42648b18994d603bf024eb570d98f32c628f81afaafa0ca457b29d3b7758695c145c761bd81c2b3a85d0be0642989da15437326a210c82e33acbc4bcac327af835ff7a9dce955afad42953b3a8c771d1f4a7532891db5202393a75f984fd8d568ceee61e570a87511109659a932ae92e125189f963b1f77c8d0514e4e63a2c96c9c1a50f578a5b87ad282a79ea86b72cf0e38eaca8771beb01b2a6e48759d859fcf292d8136d9fb9963297a13e7a0f7ad7bd943609ab393f1ea06fffa237111f2229b0ff899dcc895dce2e656c11cb654ae99f1aef2209532bb9e6d9d60b4d6ef15a6801ed2063e0ee09fcd4979957aee41fdab5d1ffd5819127246d99d69fb0bbbe06554d8655d8afa04c9de1718c18e52dd561dbd27b18537a619ac572c756014d22ee159c25ee5299fe0404fc48c91f72607b86c517b809e3e8d82a6dee0ed8e448e7a938038445afcb8676bce27e53ef88a035a248217a1a25189e375017a785a1660c1fb349cf9ae25ce1585d8b9566228cfb3a6c21f14c8b5b8b966dc74172774bb0dd2b8b59b1759befbb3a48ed9962fd839ec4382101b6ba80d97791d4cdf458c98b3f7e4cebe8430066400e60c16c52126299e59caed32f1fc5e622f9476f584662e2950c8a584159fc4a31465048f900939570b20715f5b6e1a7e1086848f1ce8bce436abd54bfd2c3913b1964f9a7553ac5df3f7f15a3acafa266e8e04de3423710d5d24d27bb1f1142178166f2de18fb3916abf18b5d6a7b757f68574fb66d70fd00411165150b6f7a0d439bbc2b0307bb5082ae4108a0a55b5ea9de71384af15a7f060fb4152f9eb39eca52a508dccbe6770af3a13dc918b29831ee057e377ac2db9fb5e5e7f3e5699966507380db3576467d5a6db916cc9

Toggles patterns are custom micro-templates that you can use with our Toggles extension. To have them applied when you create toggles within your article content, simply copy-and-paste the code into the bottom of your Article page template (article_page.hbs).

You can have have the toggles behave as accoredions, with one opening at a time, by adding a data-accordion="true" attribute to the list that you use to create the toggles. To learn how to actually create toggles within your article content and the other options available, refer to the Toggles extension page.

Related patterns