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
93e0d0305ec8db0a4c0114af2a7bdf9cd38c9a40fb32b48bb3ad1e4d2e0110b16768c0924cbbe677f2263038089fede8768c156d4dfa3bce847f03b4eea14aefbc11f8fe6a2f28abb4c26d5d707dcf82e4897b089e2e55a4e80e12968f75973d19c5b1bc8f4bf726d79e17e11a73bb5012618685e757e48a199bedd0ccd6ed64cab8bde1c6629f19920d8709f0181b0682139ab19c3a0d451f93c4f915a75bc853dc6794614bffcdb8bf12f6bb9e89ef428b94d73418561bb3c80e4c6f28af589fbd1aba8cc286d7565fbbf0a08e59939be074ef6875084403c3ad0c0044868ae14eb37f94cd7d9cf64db8815610dd41b56702a1d4e2dc7067c5d86ad2d0c7d28ffa39dd5647e2c8ada544ca923da151a694e5c3d3d564df48fc6f0d898f3fe8a05efebad0c2830c4f1f036401798d9784b5aae98d1408706cdcda07b55642609ce8874f7f3a1dbec527d448f1a0706da92f309175c3edfbd0c84b199332854bdff4ce5aed6cecd6451633ccf1eb65f751c8056f118430088282accdcc35cd57905829e25485d17807f0f30e9fe6ee5d8804400d6e69ed4cf9661cf3c4c7b37b618f38940a5ff41a05f6d873a79f45aa45ebda8069dc42e5f01fcbd6ec207ab975ff628633008b0f07ed56e1f4bcf18543250b964dc8c50cc4e19e48a8dd2bfd6346f25651444b55ad940bddd14d43b564d3e7c3b4861631c212e3982ad71090d3958fa44a2aaf1e2fce50ead4a79167f59e889a5ed8d38b980f5736ba93268755924e38bff6591b5bf65cb8bfaa4540eff465a91306beebbad39309ceedc16e3d23ca81d91baca1e1de4b67c907e9e9acc54faf72e3e1b3015d0d82e23b58f06b2dab3d97b2915b681406676cc406648a2b2d9e261b4e158212d742134b2e99054de73e1a884c46e8ff90045558549d8981b42e083fd591966e2bd6a6241fb940ce3ebe2e042a63279160edba7003aeaf2498d4adcc8a164e3b016df858291593edb983367fdf260ab453b8887715ffd0f4067b6bdf2bfca059c3aee4cbe0ff44fa68a324be347591bbefdf0780ea7180d8fb888e5337b6d7ac74800400b0cd2c4de5d3495dfadeda612969aa39623f99162600fff060f575482da741268890e810c409dcc4ccc685ee59c676188255af90b20a29683d66655cffa9582c5472fc2c5648f2da512bbcfa229b29aaaddf7be9e265b5db043ab23bf496a8fd848fedda99b9b6d42b1e9aab84ba50541a48b62248338d1aae9d646b92c814c577187ed631c5d48df8e6194980c4c73a6011aac729a7d9b4c1a29e1285b160236dbe311d79da30b12b89e32f335374518b071f07188f18ca2ca16694fbee8f5fdedbefd6b069e1a697adc3996982b1ec4edf1a0ce5672f234e5d33016089f5ef5258675a36afb56e9fe1b8099592d2d1556fad8e9d0aef8268eb65fdf744fd6a01dacd0f97cfa21bfd8504501c031e8e66bf82a5f9a1fdbb973aa0c1ed6476363be1af102039c709a9d36e016c804943dc0c7dffdb7e26147bd2c982fa61b7081b59b80d042e88de3a256bcc73c1ca9dfe2a17023b849550027634c8664b0f682eb2dfc88b6d14aa56a5075a4a2160abca8c8b1b51ba9e24b3f79b1532c184c431708f52e7449f3d70b00eaad5dc47e4f9b1de5ab2952af07bb9ed374b3c7fb5659a06b358f4593fab5723246f5880195d69a949bd644147c3d98c175a233a08aa45e4f5cc490ff442174fafcca577cabe30428e703d3262bef85d403b693adf38bbecbfeb612615a652aa270b9e1475ea63dc3b14897403f045647a3fd71aa1b854b3d52c1acb39ddf4620319e2d094850ad0ac5dc047730ed1b1ac0a88b4b39e88ea3274471bdb639f088fbc9020b03500e7df4b891f582e58c9a7c851c80ecb9cc31866ecba217d59dbd06366bf95eb8ea3ef3061cc4afabbd32d3a8f250eeccbbd8d23f3a409b4feb691cd4310bdea562396b62d517433b02a31880be6c658681c320aa74482ac0bcda0d4288c22039ab86cd4ace2f8dfd490e9722dc0859ce4e3310e169191811fe5207244a04a9cadf0d61f7eabb07d85bd8a9fedce4fba9b99dc77c8afa3b07d6e2f3cf9dd44576d70536fd98eac714dbedc7e3711b8bd4b6462cde17b219c5b7523047bcd93acc7e0e14cf9b54d122015ff72885af57e6ec280c5b4befc96bf786ea78051fd92934e32a463428d2ef6343385266212e3e58ad38a2b7ed70b6540d347cb9ae994649c4f606ea0b5f1b48bb97ac99c21a324

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
c1670bcd4f79afa20088ec2dc5e93f6ad30c11b781626caecc7c317c0f5ce86eca50ba495e5f06680dac77678189b9831554ab241ac2565eadbace3f0af0f9c7436e10f3e4f6ec326f62754185218fb4788917d62308b393fcd9360027f997eb2b013dd373c12e7c153420b0da7ce1bfdcbaaa2bf01345862e360d36b511c1c1556f499f1b77724b15f0d63f2e7b112b968119b11d81d12a6b6bff39ba84b0a128b16bdc4993ea4cc2eed79a0d02ae5c18386a9f884ef5865c82a3e1da4eeedde9538bb5a96d13daf81d6927193a0c885e522f15cb468f273084657987b75fe60009103d8be6ec0cb4eb234076f8a8d50a1d95669fd95c8c1804b98ea10d195859221445c524cdb9eb0d6b283c50211001a71fbd1470e17d42553f5ad53ddceead3684c23bfead25c36af61ca042342ee79dfcc8051fef0e2d412813ef033af26fc1638ffef7a9bfbf4187f39d9f03200647cd8cb9146821b8565b2aef07f473103229a902d29549476a8a51edc92d7702b78a60839b1026433797c89067983bf112da1654bd95f3420402be26e3e0571a6f4f8cef420c83c4f07c1fbee51698e57571676b78eeeb8053316f8fa68e49f99409c3422112efdee97f40166bc75b55dfda4a8de98d805db9ab1f08bb11214aa7d4bd04f05657d4a367baee3be6cac23904e7bb372623bf916573ba7e016aaa72acecce5b2378d76a6fbe07e61ee489ce6b5ff75686a9605721fcd97c8eb31f75c4846aa58aae963a6bf00e05047c62137744ef4c81d4d315bc14e4d9701bcd5a34f6327fbb24b2b06c4037277810ca6a0cc33bd33f452c9d03fc3e7530f38ffa5a2c5aa9d826be5b27accd9e38ef5bf14cf50896579b28faf36daadf9fac0a1f7ab0519037f932dff2af3c03f1edc774a1e132eaf00be6a0c12e206eb271aecf502a0cd1c462d8d74d60f1f56c7cbad55690acfe6b32e680f077774ee15e3f0b7c3001ac0ff074881424eebcd36a269a1fee766de8e3e8cd8a14ddb0815e7f3c73e0db1bfb34f0f20936a52aceadd8c9e015672575f2d4f6f1ea4a0d63dcacdc322f42049dee760127885755ce8b9c7539625c120c93189e6ced860260fc805aa277a43a25ca224fc12659962929dcfcc534b3474edba9267864d8ceb517d0c27795c872b2c0f8f2cdcf41a21ff5f4ce230353a0869ca34d8802d8afe660dc5dbfa94f4180f9141f6ae8f02820ddee782039e6ad320d5656bfaa39e42ad18960700f74ab0f6f9052c4e65b04eb9d3e11f0eccd75ae745148642a904f6942e9a3090a298c08a7c538b6dcdf58d2b415f0f9ffff3a5faaec88a9eae61c0e4d626147f5ca3e5bb57c25aab93fd935089d97e51ca8f97382d54eb35d6922ece4bceb18a67a6dfe5d2542a9532b9d29d67d34a7201b2d286e0da1d30e0f25f99d8c072acf601639e02cc53c20465e2734689ccfd1a3ef7194c05448f8e8048e6b143e5c24d5383a3b1dcd88c9db56e466235f664b4f0be7928b201a16850bde77c3d8ddf81be003848af2f5f5685f0092b2fa4a5619697340f1df3e7f37cb12f7a140314e7d38330772580a768c3def429b9d954676a4eeb526375abd62e650ba265cb58ed76e436c267bd3d6ee38e6d5929057e0580a7cac279afa3a60c6a2b01be69e556bff8d03615faf8ba7df6b45c0a48dee78c259c5783bad40396232560894cdba3bff8257abcf9d77c534985ff8978e28961ba50e0fa254757a97cb33b738a29c02cfe9afbbe8aa99d1760f6ae6a0e8ab0969834e30d9f8483275c5a1d80f1faf0f7816c3d5c03d414e5402a85c111eb54e1dc96b2b88dbe2a5ada3e7995726bf6042aa6ab0ea8bea25634b372393b06486299217f6572d1d79b9fc31c80287af896284d542cb204338ea073aeb922085b12c128ba23695c7682ef72d7ccee7e4c0764e4eeb06ec322bedb6cd7887a674a7a106f177172c4d83b1f2bd8f513ab3100823aea3066e3a51b97f6a0df82b92ff217886c4da97f3bf2ce7aa2abf21e8df1794beb261444b76789913c0be81da183e6463afbc0dc321debece3cb7e8f4822e4deb345d8c41546bfc970caa3e9ab9856992bef96f5e2c7ac41566cb25fba97164107ef69a163e0db5de08c853b9e0394f7f90f4e608940a6a9e18559bf5e025ed4bd2a8a69a0d89e5040dd06ae4c90e3fd392561cfb52af6205624d13918d5ef3c9829eae22e607f11711298a3b940d365ae12b30a720b0dc14540f6760d71008b271104099e6e3faf9e3c8dc747a37e20ff829f1663e8f050e2e53ec9036daa9d9fb12364dae2031d8c5aeb94285758d4c5e0e8006a8f109d7664b054974c237f06dc82029c15cf20be786898e924f351b21568ed993261154ea7099449e79936107e20fca8e553372a618b5967c85b81d995e55113faeb53ebd20073b49ba28e0935f91f14c7d8b6dae6da4ab002ce16f3da63e8e6d3499435fc2a8ab0d0c9bd55b114cb7dd17c12a6e935b609cb3f3a78fe9ef18bd6025a03ffe54d084e8f376c20b7d644527a587343a9c5e143aed0b4261be361e1a6ae54176b51048d38fb120bfb366f6b635d78f4670b1721a9b4c217add8b67d50322e98165ef62e91fd4bd3720559718eb09cb1c8e615c1bb212ad82171fd4469c9789d302eae294a0a2637262c3c19016e5eedfd0cd4990764ac8f9dad01cb2049120f2b806f5fd9159f7ab9aa8807be2118e192d8ebe4b9f3cb8d6a8e17dc2a8bdb4910bd2c7c2e2a46b1a6813d6284f3ada5bd5017529c6d33c4cc79dfe9760641de8127ad2a538514f547931dba1968c41f1ee54bce27af33816f61d3f75c99c2e2d990bfcc32c029e31db1a9323b7423f7df5512d1f69d5231c1ac25b7e8107f9ed25e1f1e7102a90062c6786cf8cc52560e2b9d3ae2ef7507bd4688e266cfe8e6758e3131c28cd3561dd3ed0d98eda8e10ec835732a27be11537850178089eedb1621728451e56b72718e9392534d5a16b25465cf9a36b275574e316600aec7d96c59ace5af46450af10e7ac530127dd24c7b63c9f76fd34712ef1d8c6b7300a60e42f1b27cad46019f5ad8639d31580a64ec86afd53bb28e863e1800b3a2b1389aaae26cf037e4270ec619e861083fd8d5df1ecf6b3873b4c3b94029e6774e8bc3968dbc97ee9090ea47cdd6ab464743e125b4401eedda79295f36b127ce13aa6e343c8827d149e812fde6559aab6
Large toggles with background color on hover
View code
ada8cb070ad62812b24da800e0199424f1662a524f43f7c3c793746e588450e335de1d00124034ef8e9f0ce3396f297ba480029a0c6b974dbe3e8c6f7d619704983e4458bdfe2d729317cd6c84152df6abd1feb7316caecc5692a0b6dc0b3c961a2104f651c213d3a384cf8015535eea1e63274176bd249960dc3f06b4ec1272caad9ef9f906a454e5c16a2d8d58cacf46ce42dd0e3cd5cde0d64f476048b810b115bd478f7faeae6513c47b15d3f35b24608172fe3d6cb061b3f7928ed42b7581f7d713329897342d0f5910f7358a407cc368c7d6a20c5ae41a472078022adaac51c139128ff8774163c509b8d8b9ebd6d1f957115baa51f00541dc5e056733c8eb244cc41fb7160fad47959886de92036b51b33c443776911f8b1a9b487ebe74ebe53344b59f8dbf5777ce19aed4e3dc1457c1b80654e3d41d6b394131d6006b86d40fe37bd3a21e044db0214b5cbb9661eac1ac74322027f84a175ce11dd4892c8719c48f7ba57d77883e15a25a4f9041b3d5bfedd0b097350179b716eb0ef7488a41178b1a284e14f6d99c6e523239a4bb1653d7ca8a8c77d97711162543bec1cd04834d6e4c3bef0df05e7f6a9c5488715befcf27bd3f6b13f81a077e6cc3e1cc6ec417389cc2884491027fe9b060ce2d0db58f3c37e7e0c048d83d792cd711b51f8a45465734a87eb94e901705a1ae2f0300d1940a63d208141b8feda431538aff3a384248c071f8d56636ea5bf55bc3f3f18e4d9757100bd6e4867e9c74a18e83dc2c1f9e39b88f58bed6f0d8b55a4a6f3ef747f67ff3bf0881fc2cec81ea17407f5434b51284541a777a186fddb1cf844b7d262accbf8aa584479041df33579648f2218ad3acdbd338593f254ea99d6ecb9f8a0ddc5c4935e1a34956bfbe4ba44a5b468b44c4e8c38a4f86d3f6e1134d85aacdee76a02eeabd9c7363f42bfe69115cda77fda04f673b4d7a5d2724356647e17c62eb9941d8bdf2c33e4d74ed6c3eb84ece0dcc5ff328eb429747a400b0d6861bab382a4f69399e0f49ba4e511d7590529c70995ef3d82fa7fa556e2c38995c24aa8089b5f3d99775120d1f7b69da1636ff11f3134c29fb8344b514e9849a5a165f0017238acdd60fb564db4c443f902a2ebcb538e54944cfc1dd439361b2686daa1c8c80fb2f095c45f7c0938aafc4dd30f16a1e222d80f093dd94854ee9755a727439056225c858f52619430dfd3c2e83746a6ee3518fc2220e6cbcc27f24b6547b25f61666219d444c9595042a985303c40b496f328485428310a7dea696b16ac3eed9c400a3eae43234849ff1dfc0c32444f2a1f4ad06c50e22536dee17f6fd351e6b24aa2aaf19ce38a21ddd77b61913529f35d9169b16f56563f3546bba0093a57f443b5c279b88bd1a84ba891d2a126c7257ed67c051eb9a61c9282a60bbeed5dd95a8f5ff7ecafe109bd28c2327127e49070eaddedb34ae02b0de804bfe0368b182db86e722450fe9102ba2dc31e5a5d071a5eb11a873523b6e1c6ef0c8782968280b991f2af38b3a21682d97ddeff81300640bb8c78ecc9c353ea3a9ad177badfa547208565d910958615ed2c61fc1f4cd5962f80613d4bf9b466a1ec5a70a80aa2d88e2f2caf9e892de73550dba3f13d2ab0376e24cf32267a48995268154d5ef4b28d5264f38ef8cd4ed5a40f011c22f5fcb777f0d0ebb74be150ef3da0dd5d0fbf42f3b193c1cdf51e23129450e6ff973a7d6a293284c4ccee3e1dcdc47f8792472a802979ba882055dd7ea932e790ffe2089abc576227e43461efb16ed2ad73ff34678a18a9e9f9cd24bbeff01a6246320573884af536a1cd52e6e7326e770bc4e27224772b38ca4afabe02864ab3803251fb3eab1549edcf0e9876770b0e907dee780d148c707fd8f013ab65569a840f563e850059a67d7721a04eed1f6ad5d81aa83bb535c7cb8d8236de5c177540666025a677589876da0c39a725ba885da595868f127e37ec92fc2a9eaac70a05b9234262d33c3630ca70b68118ac1282b1e39bfc0fb8bf3466f1fbb054b2340ab466b06e7fff701ae5864e61f698fbe149d1279d02562691248238fbcce01cb49b05c78d5992869054fd30bccc368d7f7214580854e63a337978188731b6990450f09252a4cc0d02c1d3c62096f79a572592ae6224709665783386979f5a3ab3a3b7900a2ec96bce038f73d40c0badb7b352748f430ba7e9c5fac89720c6fbe8c36a3d6eef087fdc2b731f0d0ac549738a969045ae1b1289259ec4b0062ab4ea6b6e6442fcf87f8c2c1d65eb2606fffbbe2909400e0803f491d8bb608c7a5964e50b37b260c838409dc6d612a83c410b0c2d3297cc5b7115de30cc536cad1941a7adbf2151729a1e2407c217a88801c99fa8b5d787b703d4b777cc2cb221608f904735c
Large toggles with icons
View code
e877f42062e2fc7efffe87d0d5a6dced5f4549621be06ad32d53444e63aedf26fa1840e7856edc8be41b320946dcc28847bdbe2d14d88028da705f7a69cb1ee22622cbcf481d42ca2c53770acffbb50153a548eeeea1f5e9fe12c968d2987913cfcd944ecb666bbe5c3428e1ad8d8962ae00df82de6d118903fb67ebb8b9c60aeafa7b3be1ac4c960ceece2195082c97b442c993647348fb045dedbf92d69b33fac320ae8278b8b92365862a9bffddb0d3029677a50e5e0c2031967fc13b8f14c91b080fbab0a1579fa7c565bb083741007d1eb9e505c5b1df052cd23b8c0173c36d368036f33549dd37060e9c6a843e2c7418db37a29e51c46348bf7056c849d15e874ccc31b2c500a6cfa8ab649b7c0778aa1f93f4f88868954be9de621d1a622170c7454697a9803f86a6f09716b179e1e723e1bbc60a9c3797886a354bc1e9b14d97623ae972cf62c46fb87660f04ab1f8a56cc32f405965b90f79f32b4db57ef6703848a4864998176aabe8d35e8f04b595184f4dc6dc69d93468f46f3168cfe04f45b8b8edfc7d0e255cc9fa997f578ed714f0552736e2cc40da47d95a1ef8e17eba3a553a9de6a6f5739903417940939d181b13314ba6fc7e6603cb54aa3ff0842f1953c4eabb89fccc7045471c0753aed13f5d691f3ce5d487b65b8c0e8519650c3bd64989eab8797376e41fee3f3a90a3268d8062e1bbf131e92a3c5df0c2d3a93673dc38741378815e5f98f6896d05c685241d30ba95a23a5b787c1d9e180061104fe25df6b05019fe3af9a996c5d7fe057d72248f2bbdd81743d6305b7d581cdf16510affcb288be03fd189de543ebd42b39e0878c83cf12bdf9bf86a161bf271e4a51f3b3a193072883cc7aed6ef8c54bd476cc7b894669142530f9038d92c1710a505c39b24b89bf723688731d94e6332c0382ae64a1a7aa8c5d9118d299d37f86f8e6acdffd60ec3c97f7791ed298fe843df0ebd1d1981a39e5860e2fa0900babfb23b22d389981397caf1351a0a8655dbbd4a5159d03aeea1e7124829aa9a39371132d09c762f558f23dc839f66db3313abcabac8bdde7cbe11f7cb189b892963ef6fde0cae64949002b891bfa12d8d72852b2231a2ce62ccbb13777292af989e112e7f59835b9eca359d58271e75ad564c7fb759430e25843fd003aafe6cf98a59b07053e385e3ce399adcc3ad3db025284b0f35c59e691f3047eb212755acb573d473e589c15ef77abc39b2ff8e29c41d259a2de9d5829776d12e6708ea6d7001c87a4a7ce7d2b452955cdcc7f8d69fe1f3a789ac9eb8526c6259ffb8d371ede2cff36502e3bacdc063b4330e1334c2988fe161f48c2c48c59aefee962b67beff1c212d9ba19d0373ba680654cb2c4dd3163495d00a7da5e20c1256342a04e61c382b634ec7b70c744c58df1d73d9d806677c89279fe1a42e81a743dd6cd35f535787b0e46ffee050ec5aa44db78e765aace9bcf62cda4509715cb3e133e6edfb2cd970699b071d6e7a5d250c90d5e33000325ba13d16f87897d3ce35a6b18a10bedc5f8837f8c3d1e5392fab04f5e2f36a84569e88ea4ddb6cbc8813b6b91bbcbef64a94c5c824c42b8ae19daad990be8d47f0794ac01fa66736476e59666c62cb758162d98a11f07ea5e2631ff9413b09b12795b58b98ea98ef5dd8fd05ae1c0ec08367362c945fe99ac0a7352eea40a0a605194fb905421f53760d1284a9e03f1efb9273d4c614c7cb1d53381b30cfe28255251a4d253ab2abcf9ca8ab7aa2494c71e22fd4c3d1f325652395738b6fee6d1c9eb80a8cd4d1d888511ec39cee99699a652e436f2f36c2eb86796630ea3428c3bb9532e4a7316905e3bb4e9efbc3583ced8e2c851c3e66af7f377bb63d524288c878d1d28dcc67962306dd33e930ff4c876d9db9e4524f40283dfa61b3b8bd0237e90690b7e2c49406619f63bb095c1a4c1dfc85dabb8ea2b9cd4f004423a03f2317cec60e5b57890b7343c383c51c7452568c6c51bb1a90bc23de6a7ad85316ccde693a0e03961516334a7e8b24f9f36bacb6d80c19f6edc48324d7e657581a13ceb8e16207b84a9cbb7a2fee69603b93891da60fa0335e310d46c9194157f2a2058b007e8ed2369cedfe5a4373b9fd80bb23ab269170c759652322f6117a5f123bc8df9bc334c3d8550326f00f249184db9f8f0df8d3f6b793a6420b905f5e345448e4d0ec2a0b0efd33f3f730131536cb115c9e3952bc6d85ec252e8b0564f9892b191966f8626ca1ef1a7741440ce006defefef4b6096da033a531596702ced05f048d15ec581d9400fa53f9d51f074c29c2459c024ebf2dc1a866db3fd9e9bb4c4c1f3603c34cdfc3159f4a5c9d16de62d894b98c59781d53f9fa0099aaaec93d232f18997a00fb074f3a3691e189f5825115d9cfdef7dcefd874aa44b419ffc19b4223e38f8b7e459e8011cad08609fb8838d946ad36c3a5b6a05ebf7378c819c4c56cc3ada93ea93bb66ac94dcba82f734f57747bbff0960fe3c652b440010f9e733d478d0d3acb7762ca235fb9001f91f861ef365ed5505222414180dd9235458ccfd895d457dfa9c1809e1e2db6106b4255e8af6fc9498bfecbad1e3769297d2173ee93cd7432b39cc10a333dc326e94795eec740e8091647a27c7676753104567dcc07dcf2135aac13633b1e24035fc457501d105756ec7271d839b4a2778383b6ddc18a716859538d9ebce59351137bdc5d6a8ed951e084a6ce1aaee2fc95c7efe49499152099ff6febc93c4ca43de36af89b73357e9fb274ce458dad1c2884d62b933e9ea5a78d2a9eb409f14f7c3c332c7a79fc403d00545e7ab2c2b77a7cbdb277a7328740a7731c7c134537e99cde28f865aa82c822ecb15d60c2aad786605d44c6fb8cc0ce8c0c0be53446683e36d62a6f2f16a8df0fc2a2d397c9c9aac34d87a52e8dd9d34bf1c8c7de598abe8f620d521dcd7909156188b5029e2f7b50dd9c849fddc710e24bb41f93a46754a0cd7cbe8c6b65f3519602a941ed98fcebd8c0111afb8291e837c6986bfa4da9e984177a77bb2655d4aded0c230294587a8dc3a921d1951d01ef0abd0d017e65537b5bffbf4504a6f0eece01b1890778947bf3dc2cb441ba41d3fce5c5bd851136e5e0ab3bf1fa1a9c98a6eff7d3866d67cb31359312cfc12e607865ce1946d1b812da5d86bc961e61d89e592b22b633e914c41f4fdc8c6eaf0ae6974979ac0deb6d89d5ad23ea61b93a908d60eac40015837227de271662254644482465b83565f886f69ac198b1e3c9f01db2af077ac5fa55e69647719bb0c46bbdc13966828a93a4c5b18f69898c7a016a5f657c3b856819fb148d0606f93babe1feb513e48be8b404371ba23ebdf0971c27c933f1f4747bb451b70082dff1005470482a4ea169a83cc562c61202d7ea02bce0adcd26b9bb8c7bf9acdc10bccb0de58784007e693bc7a37156429f4792e980c6c58ddb9e04e865862e7a771fbf3f74bea7a14d4f45ef3ac5cfa1ed0cf7ce28e68a325f861dd3d301aea6b45d0aa2211b50b95d4d44aa25030de2bcbbc2f85ced69b00c335e1ce85432efb3d8cbc1713d6c40fc2fafe3c907d603cf48c550558916248dd8d2005b736272251b0efd491635b2fd834fc9a0d2ba41d1a72267e276ff4d3c206b3b39e9bce8bac3410e5cb78a7bc5c870c6887cdeb23177fbc9b27ac884221c583070fe53785dabf5c3ff0df42951a6145e31432c06ca1492bca2cf44a0549f4122a259bc1e93732d035a97855ba976dfe4f3f0d71a361d417b1c60a10535e3830b7fa6e9e8d0fbde1e41484ace051167e59eb4a63c66b5f329341ead818ba2b34e69294281527fdfd25fab60fe967dab6ccf1135a515d11e17aaf8366b184958676d9a43b50aa230c615b4087d666c89799c930f22d7f8c44dca3d6b40606eb3edd74a0aadcca2363b8d8149ed7b3766f0ce14423d7c088da038b62bb8cbd442621da1b528ebf28e9b333601fe0b0097b588ce5030786fc8b46cbde256154dbadb7cc5ed189539a0beb02ef31d2381c8262af9127142000bc01d0eed82cc0377e00b91b678bbcd728908ee6abc7a4e46619eac6f296badedac712272a9f0886cda876c74a5dbae9b5a727c337ba959176d603d92842fafbd4a6b3dd8e228470c412d165eec7e6d490afeea35e6138e911baf4529944e0c5e3a15a4dda28bef21de8a40565a10342e17cd884fa93ada16d52e64af565b9b2435337859adceb6bc4681bd7207682164ddb8eb15d79408e1e20420da2bc0294f9e9b2fa9a54d150439169cc8eab3fd0c924067306de7cb5b5a6b891ee1c4b6300aaaee57254150c1eb14b575eecef74e3fb0094e47522c5878ca8eac7e53dade19a29c02cab5cc658e9f6fa6e77a6d678c45ac1b4ebee77d95b6dcfa7c3c6e26378a7ce4fda8a49fbe57aededc7db18b4ca230f6274ffb3bf349a2ac9c1b5c8dd186e41028838de44f2ef7d8b0bcb7d3281df6c0629fefdde07f28cbc75c53b7bd097b1e2d439e072f1ebbc77e015158b5db8119562b6099c6d2dc606b40bdafcbd87d8692a12a64875a08e16786c696b0886d08ebd1da84504724b08c8c12ce226e959b872f93e4f59acd3d39473a2e91bacf2445eb520bb6c80d80f1858e5f390eeb9437eff87d7557e28c5e9c915fb4cd7d0c9417c5b5f1f64765e8e404e1b22e912187d0e0846ebdfad18818d5e91d00474e61dce2abcaec1967a926df833894bca27e5e68ef9a489da8f1a497c0d2628fa6ea070d9aece04324f665c587b6dc72120a4007448b8c9500aa12123958093c30a67b60b04613f3e6164e74c61808e49dfb468fa44045e71f3d531794913e8cd1f92d8fa1087158d75698b2350539b884ba5bcae2adba829a3264c9a151d7e46aa50d67845349ca4e288e20bc5d191df8425c5447bb44f39ea5fc21cbf1753a8b6e917cfd79dd5827a4260f4b29f2e550fc8442ad0a943c38487ac7ccdbeab4b2252c70d22317f0bb2f6af7de470244f15f9f4d9cf8ce27ddc443000d1574ca9faabc6426f593b6746c2b541256d02ffb77281bafb453ac5913f9523e08323897cd78c60142f17a2644ddc7db9e9df76b5aea6ef86035f419ebead2959bc58373d66872cacd217ca87237a1dc6928d2be225a3777a38b8dd214fe62bf567ccd77c6534935321d78715edd12eab58e607eeea95af4eab1cb61412bddfbfa254e19f6501e8db36f909ce3a628b51fd9915efbbbd4c0fb6baceff0bead851e75dba81743e10f97b98b13dca7fcb01202dfa835ff4a9b5c635781b10512b4b0a200ca8e01c26854db328804588653c9ce67c0efde9865fb3fa09ac421910510115026592492a8331fecdb767a64ab05148e6dba37ceea2d5c8896fda6e472b86d50981fee36654f2ad1188310087fe61795ab6eb6cda0058d14bfeade32d02ebf859004d843a6181b348a65b5720f732ec3a635d5133db9c09a65134c61e950ee6fbe2ba2e405c0814f422f9d13c04ecb7fbf7f5de3714222506ac2c8e09a023a7e8fc73153d972260065883dc2342315943d8b431fd8759d5e07db3c0fc1dffed3b17c6e370250a2cc814bb511c99d20a9cbb2ff1e1e2ad34c78ddb21b35735607bfe0defe6f4b7309c43ee600fc575fcbe9d68e8dd6102bd7548b3504b562041975f6c1f264a3e4f6a8fc9cdb91feab171ad333f171785e34bb7acd138e55bc8228a1266fb1fdd7375a81ebc0896f51d035dd027914510fe850c8e4ae3602b295e63a154acfda5069eb734a055dcd2f1ae679a1b935c0cdac4c660560bc4e089edbb5d7f846b64f05d15d289a2d36f23e8de0977475e91165fd18095f42a2e2eaa7b408e43799dfc19feae4b8e6b80523cd9a99291faa9d76f755c49d93b8baf9c47063598cc56a984aff4a7affa3a39bcc37ef24dc80e2236087667f2f06376a22aeb489969f20b373f472c379b91e6d03417fa928d07b4e62171d512aadfbdb9e3c44aba5ff1747704c062b2ae24938b52c3ecfb8b107e6f72289f4e80478bf2f528136d4acfd91ff7e515485630ec07a6843643c5513247d1f79f634aeca53ca686139a897ada1781b4b2bc0cc0954c72c8c4189cc06cebdc8983cd5e22e07b74ce196f3fa6239b7f189580cda967d25f933ad07a544d9ea730e5735ada500ac2c4651eed54e8c328a3a83034e99fcbcde0e8374264764ef0ea7f9826a4805121fca9b7581945b44101f01d866a70449aa082d122f3086d3acfbaffef933c1719804b37f95406a63cceb51be465e365e2807a685d600f1e6b1ac6d9b9c5b461fd8b103e6b50c9f42cbdce1fc7a5d3fb1af8742dc6324ec758adae6c443dffb43c41397867129d3f41560d7bb23dd2a8dae092529b8f95f2d0984036f354feed341aab9b2fc71aff570c5108641d9f31aff3c3322bd37c72c5298262693368b3ec041412d102a023b674a5f912d67c86666e81c4ac826e353ff4d9a0fd5e412c4c9b0ff7f6062bea080772f0418f86fdbf5c15392d4b94e2f1e7d637b70339e69e124d01b0998c83711fa088b9168a9e7bf233f3343d0400f58d64108c55147bd147e99a61e6e755f765ef9ee017f7f4f959daf3441dd95617771e82784008fa320f26357a1331bd2eb66beb70146c1e267f58c1e2f0a2f9a39d98024dcc82346982af5b3453bc5aedb9bc935a6343104cf923f166ea7dce1b9969c1e53739ba109fd7ea1162e5fd42c71ac0b6659e01e7d20b668cc5b83e405a4f66bd0a022fbe10a1b05ff5e81fc9a6f2b5457916db7c5b834eb7a29c9c68e838c01783d1832db3a8788ad3aa581d20584c7cb0a78420830223d8acb612c2eed8da23f48074b798049e6321c7e338e178c9f224553e2013925c363d68f7fb912d18eb9ad538f18dbfbad07718666e706f6b53e4a4f8de96306c16eca77800778987834428cf325c1b7ffebcabcba1a72621e2a5e53995851473df502950d8a833667d6dae2d139c065ca44688d4d311cb61be4e4beab7c7964672bee6ff3b6b60cc8cbc845d54e9b9d2b243991e9d8083fd3784fb235fa879ee91b731d0aa6e7bfa57114dfebdfd82b8bab8594d32a93ac176333b7575f8b0bcef533daeb9580defd224a1682d26d3e4c14310912054ab7fc31cfa25d983edae806939956d92c262bfc41a68f17a6ad553b6cb5bd85346e948d75cf8df5b7a5ff346b6f766affa24ab37ac3462c8edc17b5d53bc193881e6b61d88c9483d455ee073a3193331fe582b9712223a882f4292cf341fca4df653e03b62c74e0288b128fa8ebb7916ae997177a40cab329cabe3419cba70d8315793e9dd9a0d3c1f879e9eb8056d51a8fdfbe7ba6b2c6ba6eda79fea5e3cf8c666bf7a0fa6db7480bc5c668b43cb7ceed5aac2ac3e3fb04cf0eb31267e854aa78edb5a74eeb4358246560118284ec4ee11efe85fb4e8b5007b4d77f761847460284d1303c5eef439af72f863874cb8665d6e75ce2a0b698cb3207a920b4072ff9bcc6a9b401dec12df4dde91fd7566cd7ce9877746c5c63688593ceff663fb0abcf6bd5cfe3791aa669b6583dceb717b1bf61255024fabc19af63a03c6f75657b44f5c3fa5fcdb9767d79a39df5f6d3ed2cfc767fef81bec4d7b8b1f70a7149f45699ea09a7a731b4798cdb097a7d4cdf1e7c14207bd1b41353394ac0395854cd4003f42bf60c9984f11e57cb71c2e8f519917c4e7a4855c5b38b1e14a2a8db47d985842e886f13c96f73e577b73ebcb8d58c48855ab34e3386311df7ffa3f53e6aa6c2e2c518ea705111ffe26b2e83c06bc1a8d2b24af5e2d4b09f0cbd510918b2e8e00c5b2fbe8bd21969fc88156f6e598bde245627cc9da0b9855b0f6740e914552bd6ae58dbb270a45903e95c35e65a57dd6b3b5fb08b52d5ba9a942726fdf8b309eaaed3c3bff81cf4cf3723be157424e96b28ea2057c160ae5d25af5902d075b081b99eac5714eff9ea21f9f04bfc90fbc6b0324afcc8fad3b57278caae19ef261a1f767dade2ec758a0f8a2e885770ae8fa6343edcd2d50eef281e3895457197b3aad555a429a2a5cf7bd65a57c2a886e0663adaf2379779cbfe7998dec845ebcdeabe2eef8e8412ef250b149ed1813a65491980dbe498cd575f3cc0133ae587dea2500caf953fd2f0f914b369dc5829196bb17f47eba1efd551d02e3d287720b46002b49b3bd724b678cf8d0d181eb3cadd3b252b0e498110c8f109ab17b3654e97f93f2d484ba99ee867cc893b04dc6fd0705b470813ac779ed9046898b10b25a4925e5aa23f8b76aaa93a8344d201c8be1d9b8dce875c7d27f9abfcb334ec4b5efd1f171262e105c43a752c8852c043ce564109adc7074b88d2c8184c3333e9608b799dc8fc065419154cca4ef1bc778746eeb43705a16c9f173145a5b7de86cce68f3523d0cd35f6205f03b8625cff412990a4884063140cf1d79dc03c437d22bfe444ce598f59193d5fb5b66091b57f31443f75ede418b828f6d05ab2aba227fb245be334da4501e229dc4bc04bf82e08c6021077ea0ebbdfafe051e939e97da84d5d1079f4224f2d5483081325b6e9f82c95ce2ef0c916670f895597ed9b1069a1b6c24ecca115d70881b708a84a5ba58014efd9e954bdc74395aafa5f71639d5757005e97a867cf1cad0367a76bd852e03408d4fbee3c398ae9bcac7a94006d1a957ff7ecab8bcae3b8b500d17b9856f86bece659b83cd2de55b0403076d856d8b27b8ca9f9900f96509b99c614721c23553b760a750b14cb039abd9f81d579e4591831a689a4fb5920d2491c2a0cb5843fabc76271a34a73e876c36446728d5c6e8dacac1825f60a09dee45f7a27b4d00d265cd0d1353222deba59c789b70d869aa12854df476ba4e2002273e35ec12053976c8f50554bf6af0e5abd156c259bce49ebe1c95956f77719c5554c6b065e53ce3bc18e16ac82aabe568cc2ca24436effaff8807457ee09e074345af59ede833aec8a276f047c56fc5c33d8c855a67813f8700c06acaf13665f5a27f90dbeffd32cbec2ff291441f4b11b428dc49df927d402dd4526d4e5e10cbaa75a90772428f8fa113042999803b19626f2290829aa9bfd554130cb4c2fe1aff362e103cc751809e4cb951be5c6651078e74e174b3e078ce27bef84cc880ab7706a698247866764762fd046867adacca91c609ade7bf20e75c9041a36a7a44e7381adad443be0e717d3f4822141c649295b6c63166cf02f3cdb0ada6bb3160d802d811d22735aff00ecfc5ebcf59cdecacede75b59fcd51cd37b70bc3cffbcebfa9eb361d52a57f8da05b28888fa849894a1d58034b3d28008600467dcaa7a1b569cf08af64592bbc47e9e5819bc810cd2ed66fdcc5462c2b5f21bf8be54a419e6143cfc8f19dde3e992912594bbc0c1e129da3ec604655457d437cea82511c789e59399fc60c11aa4ad451ee8434e6cf6a4fbc12f5ec15fdf3ca1e06c54d047e393de9c78b40a3b34a01a9b37514d7af267c7f6985570295703cfd3b45829ea9c2282e2f74f58df6249c6a5391796902994f77d26778d519a000cebcb693027f93f493962a60a959b7f713685c479742ddb69e9b1d8ddf035f1a450a43834f0a7a62f88f89317531a9819f9ec388da95ac33ce20a5020fbe621b2c2dd3ada516672acfc30398558f365bcedf542800d0699b7e6c136435b35b05df9ca866b6ab54c2d6dcdc4161708301c12855f47acc4f636d9e3c2fabb9a3d887258831abafa4f1c930a9d5bbe4614034348f74b66edaab3a5d548aeda19a59e9f746cf89a1ed24460abcc5137fc90174cd46c9a515c688c08906a67dd4924fd3e363194b9a1e255eb063d70b4bf02d3a01bfd179d6adc4873a44f7b318e5bf7bb9e457cb9e23bb29e3ce66b20d4790290789a8ee40687ef6d7492ebbd41577e63165c985edc977013163118de3611d0e2d0e9135f5a1d3af060b695ed32a9b7868ea80597c218d58a492ecc77d72bd0829fd659dc1de42ac4a676f3d240b0719e905186c21d88c807c2c6bfb695d35da0df456dc41d2015f462bfb940530728c486c27d0dc16df1149bff0c3f81cf4ce695ae86f09120a2fc072acea9a2ff6564f4399a9a5467a7bebdc072e67594b425e131d03ffb52e10985c6ed44c34263411a953419b038e9dc6391613983108c7f55b24fe0c46698cdd1eec523e7afd80b3a073c6f6a2e22a8adfec2408143d62b52680f9bc681d8d3e75d7d9ff506d487b17fbf3c781d7aa0932bdfe091df597ad96b146e75237c2952ebc73e5bffe5c04025ce3a2f0d8670e6702a8b0639c84f4c4ee3f816617b2bd566c13d3a32dacebdffe7f6bf431bb8d4cb7a594491c6026a1a8c9e5c5b97cebde29c9faf327a719efb2fe5fc4b09be241a03d5211f762b398ad97f5f12a792997a82d1fafb985b50a4390fc93a3dfde570d2fa51843298e36e3f27d7234e543ad506efb3ff4ebe11ef62a3923ce1933b84e9f55d16f1ccb08f9bf4d04862e112157f74c4aa607d1f2fe656a5e958d2f9f34e408a40248d45c0db159f8e6f729abe7b9de7d7d33953baf0cecef789d9523398e379ae6c1d3dddf3c94c7

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

Simple flush toggles
View code
33149720a63795a8ecdb10720c434fe7f836d851c82ec168746d81d5680fbf03f7800f5e1925d0b0629743a478e21c6d72b22747191419e082276d36f3248ec43c78913b3d908ab69ce7fb65946cdc0b9b5e676220a6786925dce8927479f3c229552adae9e6d6a58aa757510d957c535081907b720d678a2e065d3b8635797e33ffc7e546a3657c08b3e7e2e65f8e9bb029f1ce2e6be8ba9943157f992956ccdba1a63c1927c7ebf73f96cb91af4723f56ce00e8cc353ccf72b054fdb7e620d5e1bb9b6918d9b4e252faa586e2c5a7471d593bead5105f1600f931cbb193ac47fcbc33812e3070eba1b177afd75269afea05edbe558209a851cc05929ab765cedb1e12210f1370198c80eca91864506df9a873891d5806881cf32fd0d9267a3c59e1bd94a38ec4ccf30ad420b142de56c157342d4714b70b6370ae19036449debe8557adad2bcdc89adf53411e68506d0d914d41275adfb6e9d3316bdc89d01f6e46de8590d810f22586d6f904b0514590c0ad6514e93df8b07cffeb63e684bebcfe9f897e21c996064c261a955f38701128b3b0ffda68489936128808640134b07caee917c756050018259e2d3a848f2ebacefd30195118200206de63930a2d2226bec4d172fcd29f4bc13e77885ea01706490d7768f4b20397cd70737b369af5489c9f15401668091d68af16940afd3f0f988cd4a4c7f71e76e06964e9af406b2bf8e67f89b0049cdd469cc9cc4bfba60a426d7ff3486cd109cb3b8c60b132af0ead8f0f7dc3ae565ec17f5f82bfd92568ac65d04315abda5344fc571a1353947f07807e3501dbbc44919c88a75175b240fd07fac7699c7ee10f6f3500db4936a90d6d22bf1143631c96dd1b818a94b70e21e8f87b90b4b8d6dd8e4ea61e111e8f2a549933f2e9a3488400d1992b27b3dfaa30cd443385ceef40075108e4fdf95df23b666d963f21e02250fb1fa3e1aec99da4b30cf79f6ea2696ebdc56d1303089d599e0dc63c03696fbc31ca26086758b5e5683a78fc420c669ebb38d0506961f7c13fdffb159fc665f315f4287526c7fc6d1e47bf02e73e1ddba1a2f07ae7e61adfe5019a010e1a69eb2a127580052b6f5a23bb58e035c88df35c16e383ff606a273d973aef03716e1fd39d2b0b62da8cdc12ed721c093fdf0247219a9d0c6a9222e6bc2591f560acf8a5e274443009c2d9b6823890853fa659e828283f059fa1c981802c290285a64be3925666f5f248b3c1a830ee9aa18e913789787d1d0a041d424640fbd511c4b96458ef826bcf0505b444b8509bbc1cd4b600ca0a1d2a8ca957d5b0109a4ce5b5b31bf426a5c85d27047520cbb71a6965a8c1f4d8fc9d2169d9958bc5c605bec61c14f4e21b776d7aa14a58442ea24866a9567e426ed5b38f050a18dafa4be8e128703d851c056ff07a819a37a89b3935798db3d783671745d7ba86d812a53a2184d6003726fd4c59aa0f88405db95b6740d0d99c6fed85e9f5564e043675da3b1eb5fee4a29031989e924b8f6ccf3414d4d43a4b648f8d83ba716d9027bea9d79a78044ef597b4122951328b8f0ee88a442c880cea510f55e6a2f6bc311bc08fa0d143e840f5d4292ae5a41f8b493875c931e6a570d2d450cd9dceb1b667900efecc78d5009c0ca99a623066a4baccd5e6b4d3b6b0a761365aeba2ebec33fb870f365d7fa75a6f6d40e0f9aa346aecb8f67de6dce56c652419622a13e8e59579804bcf08b31708320a22b9a8542a1dc053c27b12e6c01ac763b2cbed52512243c61eca89ac24e5cfd86395fb575ca6b5f86cfc023ca0896bce1c2d41f602e3053ff69321892efd61b54cda134a43827bb791902bee2e8e852c0a73cbefce6e72210973236607cc8b721d58b241de2ad3df38c2e036322ceb90962ea9b650a5561afdb6c1f42450dc697d2fa3d07fc97e8de8a5ff272bc0392b339a70a8ff3cff9045de74aebf834e4e2aa661569b5d1f8c618ade79903a920695e91ff9c50a137d5976a9b7382ba0887ec1e7b0c1cfce723fa6afb9ee7b153e095c4396b959d386af75a97dea1f323a7019dd562697771fb1795dbda54ab2cced44a8ea7a7eef5a92d4448f00c26b78828d513fa252c70445ff622f8da9abe48c2ff0a3c71524c453b11facdaf13f87a3e9311171eb15df84173ce6570bb9b02061514a524515ab35bc250903164781f30000ff9d1ab8cfac852d927d5b84833fb3b241b63b0c0a94a0fc069fa114d035ed8b6c02fadf407899b617abc440621400d9226833eb58e2a4660f9ab8805f8686478a073b0cca86d51cf92ffe645d755b063d1ca9b102d6533dc1a8c7f7bb37a04e55f14b3d02a5e7d94c94a278c2027c82878724cf78f922cb3de89ee848ec39b82d573ad0ebd8317a353d7549aeae7b80bc0350fb1024e2e3bd7fcc8edc5e3acb618530b07c13ad5bc8f81833fad7b706e80e3bda948e1d5d6b94aaca865f3b7936d24350d2c295f49b0a1a19efac9cd769deb1bfbbf28c42d524ee95213eec8a04ac58866f0081a05bdc2c488fe13bf9c1afd6d7c7adb20b83be413add76e4d436b244513a54de188529f0d131fa877a1a7c5d7bcaaa8e6315c67fc99945e7dec638caf3c425e0564af8a1ebf059ba682567a5106d21fd718b6165184b54cc7cea4599c16f7f247b4cce550c7d8fa82d28a89b7b26ce2743da5a3b8f0942fc1b75c4dc3e53408cffd7042e6777b9df690752dfb8edf585b291c7d1a7d22497aa58fc4195982aba62a66a18757aae169b5682dae540a10cea818d7c5a01c0d6208911942ce1aa1ef1d0e644bba4934cf1766c0977cf4564815932b1e551f799fcfa13ef2ac159add0fcbe621e18955dabfb5a8b1586b1837c8305cb116aecba7e1efebefc7ad4389075bf74176cd9a8f846a6acf293856843f16e8bf9fbd6ed0868ccaee7b3fcdc8fd97df151b27a444c376b3bcfac7fd370d90fdf841807d67c6b49a6c3df1871afcac3aa4ea07c1a3771e06e07949ea79dc0a7e64e888e9d89243f8300f103fef2058a85d7c0a5c6a9f5b92f45a3f4365943ef3bdf83b336a4cecdffa8c17f38e

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