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 c546b7916e389e802a8a38231d4a48eb936a44692c283d12fc6c1181eebf22c5c4b929d0cac8a5c8ad0b0f462a4f63b6cdacdee5e5fbacead40060441d349241052af56ac9a6078d288a06026749aba2bcf4a475c7a0c08c9c4f2e7333aed3eea29c7e9c562dc117dcd51b2a69a9f735fa57e2256a232fd319f1b5d48b6af153def713db6eb748c571b1d41e8fbb4ce665f1fb6f0eb14c7bc4a22647e226d0a156c90bc78f627750bf5b7ebc5e4ef80d39a9fb2d5ec6eec97d440b399d645aff76bd6c3563d4fdc1af8efbae4537c408c3c1ee928a2e94b395e97256ffac4f9699dbd2ffbb39ee85efa46bbc488fad1179fb76ef24bd0eb2e6779872b8b2a892b8b5a25881528c74100069c0fa8acf280fdaf6407b5fccda24145a201101de3128426edf1d3b718b26c7777ccfd4fda3d1b6b60082636e0d20c257b65f464f257f64f309d1afdd78e38880ef98bb02e7b62ee9ae5050edee18b716e5ca4e8973297f2e6d2995b11286a3343847340bf2a7c3577d49fe8c51b9d9661adcf725bc6dd321d3b186d3ffefaed9c34f81158367f5369c2147e552fc223d72a3f40a76ef858e4e1c2c3fde536230a21fe4d9c5bc09d27fe6b95a911d901e1c5480cb81ce72ca97bcc964772fa45927d10cb40d1d406b65bbdd28c12ab4449e4868180febcccf9a40dbfaef88960ccb4c8cb3a24176c85bbec6b6dfe219fcf223c8fea896e3b0155d25f0c158efd4a123f57629d43b7ecf82d3cbc1f33c9dc4a028e2a1abbe68c9867b2334c0e338cd537d970bf7857bca675ff771ce03d97abe2854fa947cb0e145250816f038c5a702825c08a458c54310dca15f0f7a48a23670fac37fa11295ef5c06193157833ceb05225628b5f4e1fd9997e4ccaac55394fb4dd7d2a4a172686a6619fd9f6b86b5568cce3aaeb966200215c772ad6969c74477603b3d2070abe21a8f93755db3a3ddae7127e7c5f1a6ed490c8100cf1f26ac80f31d38a067df47bca7d9fa62be10a242060e4bb1c7a1bc8f9fde3e27bd4fea46d8688fa7af66a04b9d106016afc75749b52b5a93875353e674609fc5377201a61efc3de88e3a1b8d89076869933d2ca0e03d01955a51fcb39b451d501f499cb05418f67f91cd41edde5b321267ac83d64bcecf48eb75f1e54bb46b9ce05b9e14ca480630afa51e633c164abd68c006309ec2ace4de8878e4a7bb69d709a68f5345e964d96c1894c1ed40f982841221709e91835b45674ded14cfec71011318d634a90ef7760b4decea794d4f5a165d5c2dd497f05c41f9979093dac1bb78b1fc1b2df979ba1dc488c8141776addf4c12dbd78d22b37d5e71bc8b908d00adb7cff65d2844f216984ba7c77a7447dad9d589dacbebde1553c3b38cb859b7c91494ef220205362704091b019a1fa96226555c0e976eb350aeace0e5fd7aca79715ae00096bea199255984dee5334f66f96545b809b7ec7fa5470a1d81c8ff57255e30ffadbb17f8eb8978e51beee970003d9a658ff39dcc3fa20cb7970919de53c2102d95ca12ef37fd439c26e4711084fae6d36a2fbaeca5bb65963c6fc9cc329acc1953f04c3644dc8397c071db693337d3268010e999041a9e782399d87db31fd48ab171f98d7fa582ee5d9f9c1912739aca0f88f25c5e81b8ef0a75de5172c82e53c6d72528731f6d3db1d367cfe8d9ecaa5121ccce834df91782fb7e9424036caedc84911bb3bfb324c9426ab22c679e502a60eb28c1c45bc49674a498b82d7485c26958a69270f253d5dd9c98d975413acce1066c26a7511a2cf7ed0ab16cae02a8d12f7d48ffde5b44f199fb5e26ed788cc34a565baefadc9c4a1ccad7cc80590731e1632ca62d0d3a7e136bce70f5938ce10031acbc29d1ca7ec3144e42c6a7edcd91e4f6b5c0479dedb30f4b47e87bfe5b32caf0da04bb57cce4d184e1b5f7167eefda8b27079a1c4a9a80068934fe29ff348e0f7eea617822abb1ca7b97bd0c4d85f6f7f1173a19860bf4073956ef56bc9373477f3aa34ff32fbe08075b5940d2273f388768e71c98f2852f862252de301c028c747ae65e5ae058f5ed6ea44e45ff5935e0e95eb3553cff22150e4716fde3aa4867cfd14c3e8ccf3a00856562557747adaab5b55f4c3bfc08199f681cda9fe5c54936c54b93dcd4b91cbb3ca641d71788431bcca4f2a8aca404069ac40f8773811cb36603a10ef899d62d2889ab2dd30a11b29cb91de3cbd8b6b038cefbfac64ac99c1ac98e0cea1ad819
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 12a2e0cec2432b53205672cf025cf0179abeadaf534ad4e8fd1e9851cad4497f40cc76bdd70b6441d407d1da65cdf1c9ea5249a64f1efc4e268b5f376155ed9ca845a4827b6581f6c4deda7bf8caaff249ec26bb2317ec24c3ddf49504389036b034a21f5079a55e0937d411ee22cb33e58618d6301c59a9bf7df276ea9e3f09f48d040952a1c5485d5c1a9c4a900302b4511fb2e64e8734a9dceef98513457557a7957212f1bb794dd1dbd1de9130b2035f6d456cd44f21acdf161215d767c735e8b4c697027670d754b8e613f5d566d48e1ac6504da738ac765366435eb97ebf09ec788aaf2fa83ac8342526344b4276871fa4066017f87bdffaccc6b0e062be38a75a1d02d56ede0a2d4c8bc5cc2dfc0579f770f772cbf95bffa2a83b51794b0999eb656f9f4e1f6ed67acf1bd51d500ef93f4f4dbea338483f784ab6556fd3367e0ad46ea34961b3cdca000d607b812baec894b42cb048aee66d8f1e9cf407f6f9ab9c1e037e3bdd7bdd5b0d912029ea723e64b8b0b3e3a9803e62d17e91079ba49eb29d66b2a0c00db2c3420fe71600a75daec6417fcd7a3f1bcadcb38c32a4f8b1da2d43659521aa9a8758c48c7b3c5f56c9fca26667587b45363158667f24c4bf26fe5bb8f6f0f574d4c7ce894ccfb410eba0312913674872950d225927e979984454e9adda61fee0490e4d30798acff178f911188f50d2223246b51f51ef5885d274b5f09f7daf042af78983853049ae9f30975c3204b9a32742b1552665b72d6dfebf766f9309c2f1e8d1c97c43b48d914931d7da22843ff5bbbb5541f479e409fa1e2a258b1001aeb78167a5ef70a9b58497694bc85ba6126320627a63658239a772e9e41267cc99547c8162f434269bee4e9fdfd6377ddbd02d0ce2c58be85b90a899bb70e2a3b9c5470f4b27e9b80b6ed0916bfce03a9e61821897cac66a4f02fc44149ece16c4828dc11f4b39876a35fde32aeb9104941c3877f010cba171e88c5055481af12343b0863242929389648ba7d478e2edb64116161f4b7a3499e498da96cb5217ace2e4364f73c0d99cb7ecd60e38be2fa0bacde71606d26abcc2e16bea294b8313bdf99e1ca32dcd762b345c38f16b50cde7b77f232acf8ca7dcb68f6ed37f72a3c8f9c994921b7992554b03eb687fad53745707f57df2e2437be2943f4f1d4d969063de5dda9f08474ee03e8bc4b0a32d14af521fd4c9245fb3d43d0cb096a12311acb1bf270adcfee319a88009b370d88b0f30b305efdea3a4665c009b6856809a861763e14e0d8b51d03ef5dadabe9a56705b19f5a980be3418c5f0d21fc6d9c5aa3f9ea63ba5a50a10a7678a9f607e17ef0e396f23e1db24ae177ac49efbcfb6b85dd707ec3206aefcdac66da4f53ba03527ee4df73b2a2d7ca1f0f564af9cb21699cba1afe651522b4e19191523d5206e21d029e5425384585ec5367e2d68a0f5c53df51fb0f5e144d8b86dc20a25b34b7a79ef58676f42d1ec881dfb0bf548c28712fb693f38eebdafea5ee09cb54b9b8de5b1b9aeaa6b868a4490b22b788fda341398801237bf80458f8fd734f923b00744449dc4d86ad25c9b9af0cd92bf492def67782685a326e840d989d2e6b2f6ca51c7de1fc5caca30768d575989f3dba42f7addacbaf6f1f5e8a48b4aae25cac5702455532e0f7428c336468c9ab45ad1463a9351498ead8548530289c0aed638f63dd8169ebba2628dd1f415eee3d3532e9947048201810f3eb3473c0c47dd65ac3075b1f250d11eb2d14bc37fb33f6abbbdd561c5cc4ef32fac5a5af23b402e3b31b0c041420951a494653b931a6a9be7f3a7e59c4041574cfda2e2dbf9bbc6c6b4b28fd6c1987575b421a2cc923420fe8b63efd13616d8f4f833934a17b3abb17c1d97258581163a32e741a360e945b99923e72c6077324ff7b35e73ed421ca1f3bea28781d4840cd79d38e2c0b62d3620c719f8c1cce3515d20bd3c31265d7b7a888a913198c20da3e0a988e408a7f5f15ecbb5f812edc814da80561199a14fa44ffbc62e39cefa019e89e5b8280d50b622d3803df95995069c5ac8f247fcc479c2f5913ea640a54c69f05efdfff72eb31bc8404c5620b200530de501e480e41c723383b33bbaaa50475c94fcc7f03bd10bbc226b3a6cc50b18064b6ef15ba68ad6cd9b5326167c0609f79dbf12600c7d1d4acc61db37003b4d9dbda8737e32263455be3c9636f1e79ffcf0ed2cc14c6fc96f46fcab99a40d14988816803d3b5e8a48bdbe797986bc98da4c19e76c8b82085dddc91c1c4e3995c02e4aa74efa454c13dc24680c362359166c9c8458c3001d4988abb9d8cc5540fd264167b7009de2c91895e60b77da5fce9446eeebdb6b024e4546cbd9fa6281db53bbff083b5563f9dc7cef20fbce8ad54b6bed416c410c05a795677bebc8f5ad27877123d62e9f59354eedbbe5546559130661f6492bc62208341f0d2e40314d70886dd0d4285042d81df068692940a170349ff0c12858b9ef0b93e3d896531249c69bf94dc66b6a98e926adf43d0432c1441421670938f2a8f2cc8f2f64abdd82b3e3fa344d071b56b507b27ba06e616be3dc677736406706a4b3f4633894abe315c9e8b13c92ce1cfdd0c361540f5cb350bcaf00e43d6d901aa25fa22d2f3b481b989dd7738eb9c7b4073fead78deb9b048746ba63050e1ee7e57406e36e0730b8e4220e7cf1a3dcaf4ea29479d24ddf5b71475f8749c63cc465dca5e2f5ecdc2729611b437f70fca2233f7a2c03ebc0f772ade4c61c4a8eb8d704e410232b6b9c785ba2d5b49cdb671a09de98461dfc5972d4b002f0887152a45fe92e18d316d8ea5ce3fdbb0d832682903c7e1a255e9088cdc42e5eff1ade9e7cda1f62479edb7b2fabdbca5b5849a6765b4c7301a2bad97e3836980599e59bf70cbb9f03c93319872734107684446c36dc96ac87ceb57fb1d2c9aca75de0ce09d3736db423d80f37abd7f4e24677428e6bfca253c24722b23ef946d7b7ac90c20eb692dd7c0e1fb6f535f1b491b42dea682b18238d07986a4bc8bbb3d5d43027895249990856dcc4f7b814767c368d05480bf9228b9c6df86d423fef54a16f32ed6e4dbe0f70a1a9ac6ea2614ddced51367a29925979e60e1f20bfe07d9fa0555dcfb0af1e541e18ae45dd5ad74b8b8e8131b8c1cbab3b75ae5f90e548665aa8895d686fc900fa369e7a33e45cb027bfaff27dc3515b7431
Large toggles with background color on hover
View code 44bc2735dde9f2b83a0f7d6e547272c950c7969a53f97a5d6898f79f71e5752b645b2527d4cbe9988f58fba2d397b04b504e7b8752f41ed57c063bebc240e6c55ffdcc0246c96e7a35f2e7e2c5423916bb622afdbeffc4845bb8d90c3aecdfef0c0213a3bb138991cafc87b99548b177579132e98dec5e0873acf7a3ff9fac2c20ae4193481826c190c6dfd2410e7592d323e681bcea107ef0576bee40066813df58e73d14f35794bb9a776e6b2d83e213515df9ba0af6fed7a00bfa4d224968f7518fbceda4ce6ebc2e867af04f966bc0b1d26257e6eced2f9c044ce1d71acdae26c0d32564538f4b74f74a9cdf6bd42549cfdb0a5c227d4dcf9ca036bb222695bc108c3a7e5543cd78a0fde1fc2cf05e7ce7d278b293005595a6de15b1746b1d67da4237cb6335d9d4684821fdec179af40722e98c64a7671f133ecdd4a476dc93f59bec6dae6b874736e0b8610f36e3353d794ba43708bf4161727cb6cf07abca1414b78629e9b9126e57d2735abce3920bf96c5e29b110315155cd343fce8921331c21d40237657449910045c1803fad6f941e1bedbb78581e994837806248bf163cedc5903bc8e658e4ff686fb75d1981746ed4b7cc06cb6d61c1e3dd799f7bfec776cbdbbfa0e9440ee8fe50055b7df10e742cf982ab4779e6e01ce36cb2067d56f193ac7452bf71c4c3d8bb857b933a74e660ba9c937fe2692d8a222d2329d3d6029146edddfa143eb464354e4663f1ea4196248fd0d95c874ab58721661b5f84b02ebe903708368cc75a4bc7d759b8dd6f5ebb25410ef8b4b9d453826a4cbb5dc1eab987bb8a173bec0aca2acb5e54f98ab52e38a6d509bd97894ced042ce667765f41572a32fbcd034c738b08cb217d17c3d9abe9d015f96ebdaafedb71a8c5408da3f10b0eb2e9458bb4a5c3065b30abf6f2e6a081243dd592c57bebfa5e2d4a08bdb940172d7574f826b16715128b211e479397fe235e7eb03ef1684f469fac979754a4ebaca7c3de4af30bfe05d58d84e57fca58f194a18373cc4a10dd3eca200dc356202aba66acbf90460e410f5f7fdf8ccc81974f9ff7794df3e78d8397d5caefb95a26b07053495ef9f2502d3a22b03dc625905ee32dd141bf1a7d8d5d198e46d52babc50cb5ebf1d578ba9118548ee274ef99cec87b97569fa7d61a9eed69a71011c4d2bd3b1fe105027a4025b93579cb7de65389fe6fe80064d1e8c5d2abf2ba04c20f104706d387b544f539345a4a492a4cb5016b4aebaeb1414aa1512878827dbfe69ff9910a2e55b26e096e34e96a704df123ed4ba14cfa566de542af06571cb85d4e26473f4d6b5672d83545b50fb58b3813a251984ec0c496d55eaffca1fc53b29fe75b4d504b2cd299b04cadcc907af11300c176b61e51fe3bd23b764b43fbee23eb09716214eb6d15acdb3804e52ea05b0e33ce7612e4e2dc61de64e1d78c235b44bbccbdea5e84a36b1af8c8ea94a80499c67c342f594bd25e91f907b7da44196dccd87fd9ea8ea1804c384a228b114670e1390a2580c21b932c5ee07a1a04059dc528a9317b4a3667ed28e243887d1f7f44117c00cc9a051cc442a5556a6265b91734fed48725671eaa918ac9c8965f59b69ebf6693599fe64f1a296592b8551275c1cc074a07d15b546af5941dcd12fa6e477c0391ec6aa82bf85682590c367567e992e7c4bdc9ac1e189f839cf8052b04ed53e373e3cc12cc28c6e9855dc191fb2621e3add2ddeafd00c794ea5ca967da3c3333d5028eb73b6dfee394ef1b0cb254f382cd6b2ae5f1dada5ce559704fa609b1d61265f07ff0f46f9ba3b162b90500488fd438f122dad4be00536a08cd02fb91da83ea02973da1e32a9b035415af0c0a21149f2707c39c7e4b5b8cc6cc04889dbda45d9a8a8cd443ac8b8149b60ce587ba130d103e3a96365efcdb05df9be3f051358b326200664266ae5fa521543eec8e6a1ff41550f7f739d43544c909236dee2a7455196e45e9da3b13dfc971ea8230dbcc8530fb694ec9285af0070b56fc88297da5e166466618f3b768eb4e4da32509cc77ce8d7a1035f797d2b97c40cfc75de0b575e57992df480dc71c58b5b7639ae361ca400b4b66e0957c8b5e720fedc73d67f2ff06368cb31c27698f4301eeebd0d11cb02de0791f5fd7f580e8f31a837979d6ddeb8d0417a2615d3de46f08a4677c810e7a3d83940e974dfadb3af196927cf52758deb840a727579532ba7916984fe2a419f0afa11b7daa9161ab693639cc4dd8c3aed650d6396ed3bcc8dfcca38920c247089f1684a2f19a36de359690e6ec9c5e9651ce43b02a8f3153d562d885f0f2d08281f439c0b5f8fcac2b06f1719d8f5ecc7c3cc94fbc777259fdeef70356ba715a909bc6113f7e0a296ba06111068fe0616a327b6a27e94b60fa115730383620812a99970d94a284
Large toggles with icons
View code cbfec16abfaf3b0a92e7cc1fe58dd793a54030f5c7e16b273a174503aa52aaace4b56b950a5a9ec6117fcd8f84df8d91a69c97f2081fc02f4f243ca9b2af4384a879464f218aff3e045776eff5a6632d0d96802415d39892e520e13a83b5a7bb12d3ac0f71903337160b5adb182e9464499bbd2b72385bfb8c93bb81c44ac11e21ca58e790c295f9396a27369afd31c979a288c497f136f13c72cbe20eefd5217de4c2984c3f0c931abb7eab496e5686c1d98ee851cc5c2c0af7708b6baae48aa815ada1aead3bf37af1cf87e9575bf13342c4850e1b98fda261aff58a76765cdf9a9a58f5acabbc3bda324b4238a4f4e653630b4a63c6bf92da8b4d95ddd0ec58df460d47112cb27ffd792d1329787fa4cc2dbdf6f8b00710f05290258ab5c3f81ae0e0e4a9db337428c8bc3aed2712aee714840600d0390044b137554cd73cf7a18c4558a5eae2f0028706232b39e1b0409f228d255aa4408c5e0680b42af349014eb325f172923d05316609ea20292673f33ac017e26f57b0f40bb4afad6af42369e766c3339f50c06ba418016c7c904c978421aa265e1693f7fe80fe22c00949e5dde7bd13389dabb556735779fb8274da0f64d84f6785112b8f25b1304eadde2dac2bcd0d0fb8271caecb344a95c86d3bb9d8a629aba5085ddf9149470fc2c2b765f86542122fd642ce6625a94c2b50af9b1862add6f0890c1a0d37df3bc9958b5746580fe57352383bb5fd5d5506d88d6c8596ddd38fd77c822b13ca775e7e15fdbedcb6cb5d0d3e214e63487135323542d5541cc04d5cdb0f00c6db3fd82dd9ea0efc13d743d468324e30fe0af0a195c425f6d4c0a93d8c0ee7bc976775c8e06ce8e1906032e31d167991a384806335bde1d12ec65b81c3451a178f87ce7456f8099e1d50ed41d0cb760cb152534c7c0b8baa3b6f86930e776d402962fa4ee8b085188370558b31f35c7e06b370c820aab4fea0db540b4f0c176da524a831a167afe43d89af345430b9e6e9e4fb1c16ef90bb763d4e1cd325beeb39d75e0cd2075cf73e370ffd4782e5d3645cdd56bfbaf7ea37f3c9ed497bd6efb5842866055aab8b7124bb7b1cb0275edd89f9047adfbe32b5192e44e27a1cc2eed4181b86edbe0b85b74ee835d9eef6e371adddd3fbae268217cd90e2f0e9669bdf8ee9ea304012e5f53607e9fa963e2daad22551a271bba968fdaa5416f78e75da3082b4f78e798b265265a0d153d6e3742eeee0d0cfe5f109e1784fccc69e278f4a6af73892fb222a56231801b5f7fa0070dcf6448ec8e7c82ed4afe7e3508a2762e301259dcdc70d795cb789e3790cb05f8517393d6f22cb9ff880eb97085a1539b76af3c9e3cf264a59d691f5f3f9d2fa703422cc4af57759982b10f71de4f047d423d22d5082ea62538ab520cac6a1b2b8a8151d48b1696e2caf71754176f32b2339cb1a7b7eb4fa5ec9a8515def86e641d74cd6b8ad7f5086eb6c9ecd5c0184a572feeb21910ec9f6e3f4fb0dd446742725673289d904138ab1812d388d15e95e80b3f2dd63e56a564fc7478dfe9027a42437c06d143395375a76dbe8ef7ce6e66ed92627c6c9ae4ba224d963576946d676248758bf7705ed6c1dc8cab55c554088ec22da4f4e26d00e11ea3b5a179086d9d314caa6fb488084d8f9e5ca8f09edc950b2979226de038a7da07ba2575a7c3e1d83a91f390599501fbbdaccd42cc7eb22443832169b272d44bbaa73812ec67e6b1640ac995cdcd4dadf146a61914f6b62610b7e9bc21b497606600de3d466921c1946b6a0019f1fb8a14c2f7a98cc5df08592f6ba83fa0932be18044135be2b0ed23d600fd4f4e32b939fb27af44709e43cb6078244a65b4fa53e1bd49d4d475a8606b543a5a030119f16af84c46d974b38694643db39902736b042d6ebc0846630189aa150f5588426acb05afb6f9e98850dd6591be42bd1c51bfddb741b82b486ca78eda1389bb023b4e79075cae16a56e7e57d569c7a3685155b2ec8fe0206fd2ac33c991685b0ed4716815a26f21d2ca0c71697139bf8304a1e8004a1451fcbd872fc0980cdfed99e5cdedac4d749af1840eac62a7c8b08dca4f6f9d42ee412bbe603b5a9e3580b176435148717d1d7438a624d03a3e5c987340d0b9a7ecdb3b4c2b351016edd7ff2755dc5791126643f82dfcfd157a3d3334713872768700d52c181396490d3d0a0432be154009cf0abd15847a8572b33ee1ef44a688e705d43feaf6110f58c5f40186cbf76e78300cc4d4b0516b9d0f082d0beab379c7df40cf071ceac22cfb9630527bc20412ef20dd987f6f519552374c29ff4b353882c100a247d3f7ee5a75a4c2cea36acad1f4ee685306a35311a11127987f4edee05d86c52f508ea8f9ee2a8b587b3da727706bccbf7147f570414bcd79c561c7f16ae7628f67e9f9b64be83c5bce32d21e41d12d794475d5c0c8496ceac2da44d0e772f6d36e400f250433391e5a65630855f4c32cecab9c5e21f38b3b2144a73dde994f88733ac5e583ac367ac5fe2e5301371b869556d33f753f08d000f11cc7c2319ab5c27e505d0b367c72be430a4add7f624ae4aab64b4c1a2f28ac446f0efa34c72b5600b8e3aa05a04945b115c67b584ac4770d5ecc0dcfed44dbe3f6af1241d455a2f28c067a91279f904208c40a45c8182ac5493651452be1853c52dede9e3bac40a91b5e6aaf4741451eff136e1c2690287c7b17c4b19c9c45d77cc315f5ae6edf1d49a24d936f06fbfb5a618f8e160d804de60ca8a57fb1866106a82de578ca5371d3f0a936c24c3b118273661fd207fb3cb8bf7dda54f1284ffc79dd21bb0538c48058ab96e87024340c7bcbed8038314f0f53c36a6dd7b9e7830d46011964ba5d938d2940d017e066026240991f039b4adcec5dc9b47fb62a0c6a8a4dd5fe36723d4bb382184521d7342971607660cdee65e93345bc87e28e4c9268f33964f61fedc1af808de22575b12ef61fe901a18ba66dc2a2226c8321074d1efd08457dea176b7b6122c0cd4e0019a56c88e72647b44abe2e2e7b1f0a3d34a8477142cf5de2ef498b5f01a3e95a561f189ad43e0c4909b8082debe3bc72128d84ecaf5ccb24402b1d0f1a5824600a9352d682b1bb792451ec66a6ec1992b5e9a1b5dcb9b7edd4647f68e6dc57402da74f953d81bbe357f24fc19ed551e39693163e261b350264ce596c1331e408abe31983bf8c463dfed4f79dd6f3b57d976b6e525db93d1bcae6dc5096c40d0a685eb0df3115eb10b35fedea436634bb8bbeca63a43b3a9adc233ffe6edce8583fd5e4b11d7af145d50a3b867407ddc8dc337b88dabaeabd2b57795a0c80dbce8836f95cf540134d25c86a639dda390e3dd5f25f223cbae30f4bde499c7a9c7f8ae611134cd76f5c8fc725b1fa452db5d0149bb2b06dadc16ff615708743cd0dcf3d33304c1a22713af4e32a938a1daa599ffe83707d51ddda7cfc48a582ace0faba586d4f7f7d0b743de1909bc3ebf157690c7885d2a96ddd56ed89f19f41b3eef9c84cd13bb1e96c6d1762b0717f1f52653acb58a0b0e2cc504cbf35bc0ffcf7bf68d27d4aa66ac9c3a1cdeff79cff81d8ac61e2562f569eb58350b7e9fc6da3ea0df70970c8f811294e0bf97e86004df16e91bbe122aaa19f316f793b0b27ecd3d26a3541f81f8a1e175c153a7a88a9f118392dd73ed56c2440a7c8329c237e18bb9a2f2f6a184b3c61bc24b07bbdbe677f9479b517b1c0ef7292965905abe822da0688cb536cb8330b4126ccf03b998ea4db6b7679ddc8eedbd9cab11c48d523ffa6b2acdb62eb2bbf3ba813305ff2aa3257f8a3cf568260d202267cdecf445c5f12e96c8e9afe027aeed9a97b37798d6e67bcd08a030032338148f928f6bc4a646bf3a54d3fb5d9df38110f1661146da092c2300207b5197a8fb1bfad95e8374fb61f8c6dfcb764663430dc0c20e91a68a6be762e2aa9be952427f416392e48fc1472094ea3ca6dfdbe7e7c439aaa11980653b1431452d423350732b8de902263784e3864c9865cf1b9a7c8a39246c47d8f219107bc22f426423f124535f099bfddc7d988b60ac9ff6d3a96e668c1922c4c6814e765bf8261ecc5c1e7befe7634b784beab0779de5ec6420d12777fc8440d3f2859c7e650e5f5c36ad90d60aed13e674e37a88d2fcbb5da78b9e45c4883d19e26ff3777bb3e4f6041abb6949d95b2c706b6ec2768623a63a8baf7925e91441e503227dddba974659db1fe240d23c1749b96acd1c752582f447372766c87e8ffe91b1066f4ab7186c5e56a130bd69fd27f822f5a43a91c500de102620f6092191e1cf0e93547c7129d1edb9481096dde51df4242636b94d4bfd51889594c5ded3556d4857afaf80d741baba34b56d64b533d7f47d546d956b8422a3c49c2f09d27f3e4a20facc98602d66f7de3f111bc3701115a63ff3deab49cb9601a23de0c110a699b1f3eb8ea69bfa5623473e1e935c03fcea3acf344032139258eeb946d956fdbedc85449c8f7648e77e09d40fa62963ee89d3a8780b0aadee661662753c47ad10860173d82cb05b704ca0f39cc59578dbdda09d332717dc771a6b065fde155a3efaed850f6fd81374560cb1ad4af37d25e914e5d22df30d609fa038130452f992d1d2f8cf4dd30dcebd38a287f6a719927e5b913c4ad2d1483676cb9ddf787ea3e4427b195d8e5af3cee19ae69408aca63488ba9584e325c19d370abfc54da32b16094180dbfc7f039b20a8b9d694227ebb522ac56cdd9dc62631133c9a685341d467d7c26285a9385246295527f6ede4057fa67974b5d92c27b9f272f08be88beb48ec39e9ca3d8ed460fe9293faa6e1e106032996595235d070d03bf8f6c4dcec513dbfd88feef6e988342cf4c2803a0ef8f95f539f777cf6ea0da03b87ba7d0385048ae4212e74d575b3bfb5a75be86932440dc4f674c41b5f658a80d5d97175ebfbd163f2db61b117ccb1ef50e4614f9706401dfa362534f5edfb6bf84ac1157c83ae673d0a941f2f6877bde5560c862ba9f4e13bd51480535e68bd54cb948e74f8be4d153f06163193bdc0d6dc6ba3de9ed73b739cde9d11d69d46cf329a6042329981a56fc41b710059d18898104e0e65996b6f2cc54eb418006f72fbf72833406a017fd393c2a33cbb93b25ed2fb6b744a3adff0d15d29b22b98534b090071fc51afd4f1345efa63c2366fc8c388646ed114d9907fc8e5b1f6e1ba608471f2c0ec971b446be3d2bb02247642f030c8e55f187840d9acc55765ced78518e1f9c3b06b6b6d01a3f5c26c4d2676b8097ba50418cffc0b0164179931dd4f31c4c932239b84284a43db60617395cf511fa3071c394665a63573e7b78792e6639b509b04a27112c90f9eda88da5c9faac47d7fd9a900962462aa2f74fd3d184b451c99dc7c4765369c30ced0983e197af01915a766330106bb2deb2400b22c3c9590cac5967772e64a1f863ed5c023f5c84bbc385b6aa38a75011b57280d3bad6c09eb1d9e751c2253861fad8517827b9e367ae2b28a2e514bb3cdb8317c705a1ec7e05c70d1c20da46f6f6e6a6ff8d2e477ab33d85c36b70bc6d2e933bfa371543c4cacf6ce2bc86450684c7876d1d0a091e6a8c7c985f42899d784e98c9e5a62181139fa4af9bbe5165bdb45f40f108fc3cf6705feb93e07ab2649cc919ab09510e4c930ee6fdd0902de381ab488fa0f66a66520fc985e2291e6635da6b28cd2da0473bd471874df975ed8a400488fc22c42f4447a5418ef0dc1166b34cec5c531d9b103b478837f1528394b5501cf289bc813dc0d87014fb86b7239d719875c57f558465bb3150db1995fa9f0e863a98d97a133eb5828a1b4e16ed58312cecf091bbb63183399ba023a5fcfb64dd15e019bf2b31e0d372f96f2751349994609bfd106ed9269d3d72333c325168142d666f571becf1f3a008f3bc06f0026955066ec194518d8807c23cad7f2a3cbbd54cfe3faf3e52b3ab5a7f1d8ea9d6bd4c21125b74a7653dd60cebe8d64d1e8740bf05371a629d8465f43373383a5cb2011bb9b1b2219836464daa1c4559b652975f8978889adfbde1763687472c9673d45e380003f588c61f30358598f1a83e0a322b90a2ec488253f2cea357b652b3f8db3b6ec4909a5d09e5f22e5048efd64a47f02a80446b08182b8b944ad1fc21adaa4784146e14de038a0c73119bbdc4be8ba8e5b67d866faea5c0ee9865677571453d65406541b179bd91808976e1daef7673a7801336a4cc26518c8ed56f21ce8f0347a88eef7572294613a4009860b6c9c5e594dbba81ef8aad2f886deb6ca1eab6c19bec2d49a0a9cbc9cf55b948dbead6c3f2c49220cdd16eec5f7fd204a7d10e59363a09ba2fc685abd8cf5c7d430a0460a2df6b97accf6f0c124ffcbfe0f2fddf98e3b8eb147ef0c4ea07f1cc9ff0363363c85353ae0b52b213d13ff0881c7e253440238e6213d885cff735e917adc78e9af45626b34562fed8b704dbe9b30303bce28e1dea135528ff2ed331238cd0c9eae3fe1f4e654633d237d33c6ff3d2c30e4a2e5a409b0d8c2015df8248f6f553887c788a8ee3e5af89881c73ece50723c731ddc8f771a8bd1accbea84a37caf78960f11a3e6e0d374bd834e3c707ee91ff20edd00edfb1b843e2e9c6dfb158e9ab389638f56d550b06b63761fbc357842c7aa371463539dea086adc8f0b37c6506b29d96660aea2eed1a069c537d1253970300fff3a5b4ee47540e1175710f2f0916ebc179846f11184e037de924fa7a818cba8906ee7b45b34bf2cd464b5c98e9b0a99b1a3e9b0a4794246cd5db2c1e1cb447a742b3b67ad70df91cec63f3cf4d07fde3c8e5a3c799426636903a46ff0f7e1fffff4bd72eaa831df01f0e99fd5ca8efd5cd0bc9c9e47eb9d9665a8840d2404684e3f3efb1c9564d8320b0397c6bef56d53e708cc29d7fe9e565f61a052a105b615c6bf471b4106de8ff6817843bf18a4231a0e0201df8a18bbf691d7c5b64c2504875a1b8ca55ceb74b8ce6eaaf4978be57a8ebd54a7a69cd6aa8ad6554abe999d8a20013b7f5ee2316218232cc28cbabae782b55c81eb91677f14758b903985e4a3de377700cc9755efae1fc117a4c16ce6c94450d77952b8218f5070c28982b02cf188c1c7a9fea76974884ee93c5ef663142f946200839ca715a21e46abe16ff2f7d50d40ce2d84ff3ae48d6998489f2ab203f632f29d1ecc1bdba7282f6f067dab9c6fbb70e0ae2d2287b35a39e46d3d80077e33be788c404b69f096d0a522de7871d8537339bc0f0ce9e1e2d06018af577a12a734aba5eb1f541ab214f9ae6ae3fa0fb995459ce2c4f649d86d4d9d9d7d2f11e83e664ab93154ef59bfc08a45884fa5716cd90cbc6cb67ca9d2d124388687890a1a71e4f12536e9672680d4bd69d6e280cfda02821bc61010678c09200788cc53d48b3dd0103c8c89f0e3bc33229d080011e095c45f3c8083cd0e3f57ae933d055618442fd8c149e2b3e5b8162ef97222de64df04ce70e9e8b67ab8e0d25ad2d8e9804b3c74f2af4dbfbb874978175f68f1a51096675bd5fdbd846bad1d772e34c12a8437e0724c569e9b5924e43a2a44d14fad1f57653ab13818fc388ca3cf7e49474f13661513bbec46f6c1adfce5dd4fd04518da1fe30b9501c63cdebca480ae1ef21341f9e8c639f4a8d0ff12e65e03f99d97a3548a970a85b2ec68c020a25664b1b564736fb354d68d61efeecf3590fec1bb3778ccbc1b311b6fd189f84537855c2103ca5ad1eec8595f5f731fa43132042ba4784c124d885eee3d459f3a7c525b404adaee189cfcaf54a96e3ddef9c2240ea88670b2b0fc54b4504f3ddac480d2415093524aac921f73c72bd41a1a6dadef5c3fe56c0b8fadc7c4733f30f44cee8e3354cfa6ba768b73a22a20d013add37e2afe4da18bc270e143c8e6c2575fef67a2cffdb30040dfe7ccc9edbddcdd2e66aa97bd267382010c258e7c2ff0f48368de5912af494430792f5067b9614d3e04694d881a5ef0128299c9227750f87c8d9460d0d5fe9401548ed1cc0a6e14f4d49bd296e3bac7588a571903b06e3c98045d28adad8f3cc067768bf9182d35b1ec27130c4bc5e344e3154c69f315ed1d38ae9dc442dddd7a76cc285afaecb7fe98558f408142cb728614201d6df87886c65bd7cfe578fafa55bb73a486f16c7d9166a72355b4850c8c2e4440a2ebe15d425aeb324c97bed98396bad6cae4930ae423ce03b59b135f0631e351e5e67eb6d08ab170aa92b974a1925793f708c4e674f7db64fe3fe9ee438a732c85fc10fb3cade1aa3b863845e4276f9dc901b0b714e0365b83676c1e2264917ae625063f18252ff4b2bdf1d84909305f89c7f569d8728a53a4f1d4688e0a58e424d981edc4405397d4a6fe2d7bc538fee3925ce64e1721e95e6d969f75fadcb22f926788302befb2d121c36d8c2d7060f9de9c8de08137baef5fb2339f7407d273f1bc00467f7fa2a47bca30525a346c2f98ac80b79953ec674660d58703d76950309df1c2925a96d3826cd259dc5bc8c64f311a4e7e31fb73139339bd1a6a1eeb7ddcf6c3802a90e5cc23d80bd1a80d2125cb465126e345156f7f40528b1a2f2a3f0f616ab61c2cff353a869c799accadb701bf4b605fd792b8fad7cbbba1db508e600801c4538dc43e41a53a629b7e08db88eec1988841bd5aaa930be3f6614ea5d4febc2759037dbe41b9e10d8781ee993fee1b68fff0ec9de4f9f2e4d691250bc50d0112122022ba74a4bbac555f94766bd57d3c4e2517af10daf9619147bc2f1db5461bd6449468499790c905f4dbcd6b98aa22d506b1acdb7b9c4a7f3f0aaf5fa61f4dd3ebcb7e37a1e8f2cb5b182485170244dabfc3b17fbf8d4f4623ee00a8f5c86f2cd6a211ced3b63b03e7b75c85183268830459024c7c1c1390159deb4b8cd827d07d20bf5679f03b774eee2f6e87ab804084d1d64e7b33a0f5f0c3a853b995acfa7285b467a723ec41ff016a50b2fad86adb6ab74902f262c06dbe98712321665829d0c99c94bc8fbe4df692be4939c781da27e3178fe20e308579330f5938ee9b08766218a53afe5c9b10f68badb1b90acfd1970d041a7caa49dbb7c9c5e40b02329ed1d70d18c4d910e9f97e570d7929c71707100af9201f6c680fda6767d9c0ef0a0a0bfb577d77598793ef334b831f57db29a857ad5653eefd0e27da02768e0ad4e98515fc23f621c2c89922f2089b5e8bc52301c02ce436109d89bc1e6046f5e58190f6f554f084fd36151a01db1be7f4b794508a1c67e1f9d32dcb4cb2d3a60722c06b2fd940132a59e2157d8de8d7351daab1cc4c59ed8d2e73c3bffef62306e1f135b5842fe7416d4175e9c3f8372c4476f455e2c05cd436a210c3739fb95f7783bc884533c02d454e3fc98153877fc62026ba0ceba08bac665a08e7710f0ecdfdb3d11de45f3a44fc29999aa24a0d951ec267f69b90ad165918bbf2e576d9e95dfb1e82db4a9ab21ebf9cc93c8304dc2754a2383fdff5765450fe27fa75aa2236ee166fab09a3f65f14c54106c29bce2fb28ed3510b2520aa6aeb0edf0af0a5d919e6fd5983797e8cef2616559558c67e7fa2f3d331684c2dbea0501a521cc7973a0197fbebac9dafe110453d3549275713435acf71e35ddb85b145c796432258361e3d08e89c7eab57d9d9b3b0a44d7a9de566b7bbf00ab1e8244e25f3b565844fc9ff3e7a9184eb49c303723ce84c7253883b224a03238fe1c2e9b74dd1bd18b6559d49cb31490ca18c134664a8fa30ef0fab5b0affea5472c8b758f79cbe80f839597f6ba7234f6671433db2b54756816c7f7c561c3ab3d6bc864a81b543e6c9668c0feb527fd1853a641da372bffd9171e795e3d7d1ffedb25a5ba3e472a3d4f73243929e2aefb1d89e30caa89ca1530e11a3597aa3e71e00785f9ec91fbcb7be5af707d9b5171ab99a97716db9d58c23f28d078ed75190cce98b5bd9d718c73d3629385a93ea882944179ff356044af12b4d2dc8527d4f82f341663c5eea065fcf5bbbfc3a9bf8041001f6ee470b6e7c1567ca52aadaa362ed39faa9933c918bc8e6084d1abd1927c3c55684451f353f3a567ac708f0589608e9a1977332b40c228948cadd0e06bf4243db723de34b3a2af00d5f906886aa25cd980982bf99a9100c372596a6074ae62f3758a136e305123e74199f26914518891378909fbce682e7c4ddcf198b4265225bb297db9e5160806cb93befbab424ee5393ee7f9e945c7041432895dd3b64b9aaaa505da37c239d1d8abd0e2818ea9e8d235b86ec55e70a267ec36b051a8ccbc1dd74e95ff0b6d3f9432a99119f505a098aefb56842ee33b6bd8380091cf2cbc6bc956faddae3cef89a3a598a09cbfc2b256026509284165e077348a48f3fa432bc56b1e4204afe14263803566d297cce2e4ee20c3a14f941c50db64c6d4e987f1237f904c175c272b02795d22d479b521ebda6b85e974aa4b163e8abad7a553088e08cd4e0940f508cc08205a6995dc48e9ca5a13aa4ffe900cd204ad82542d70038834c8d5e3aad03f17b75fe3807cf
For a simple look, you can remove the surrounding border and horizontal padding to create flush toggles.
Simple flush toggles
View code 7b6b0dc37918cad68790efd3d840ed63264e619c51a7b2657df24f17951f9b27085cfe1b3bf58659a3110895b0634d197319bc69ae62b2ff62bb64458b016bb7252e24ceb9920e5d920888b170c9de6022dbd7a7ae3b91c588f61ff55defef23319d9c30b8198c94ee22bb9db7916fe6b1889b1cbe925bccf84fb354a6cc85dfc6ec2ead3495d4aa6c5aab96ecbcbf3f007e011bb0d45c08f50b6fd281f45a94dff405881979a594d78410191aed5b2769b90af903f01f9e6495abeab636174f88c000910c6226f8fad9c61e78322bf9a67884948066c1af6c922ead5fdfecedc3ab69fd6533ed580c74ebb33f5b120596da2b8ee35cfcad2b60e0c98288c1d1dc7c13c59bc6504c40c06dd825d18e1b2bd8152b16445ef8b22b6f049bfab7064384781924e9b0eb07ff0b23aeb27158f336dbf40d9092f9bcc97cad6e5670c1c4ce78155afc1359ae8d6c1476e479598fa01479c02ee1e527a783de9041b4ac55fcb1900a6f1935b6c55e2bd26ad8c553d7706cd6f145ce6e2b9f4381c86ab85c8dcf1f1b9a4d83fef56137b2e2ec6f91e117654467489a0fa63f8b092083fe53e1e89c8a905e0f5429443835b832894853f307a81adff0918bf7b9f6d1f46daeb28488958e3235ea1814bad25bf5a945b8d7174c0e4b2f6a772aa96bfc9b8173c019980ea870bfae86c8ca68b0ee4acdd679ff1b50fbca07a9bce8f93543e2f75b52f187dd620b77086282fa2bd86e27b706a7b6ac7064053afc498a7eca68c423d3df8064e9be5e947734b8cbd68ba08e70d4b20d68053533bb00da239ef8c4a9f88e32a2c7e473fb233702a847619ec6f77f504ae73aa6324ce06962822fa8ed0c8c2e4ca2b42ee0d028eb301869cfb94a7563e654c10fdb8745a401192a8fdd83c3d0ff3ac82116425ea8e8b60162648cd7ba4f8ce578d73f7b4e713a34cdc575d6ea073706fbdb8ead35c6e11c40f6606a7fd697154c28936f1224c22f73f4b62e0f638139d3e3c32c00898d5a5eb40960ccee663b2711da11c309dff58cf586f6428b0f66085e1fd59753e96b52ec1033069bc8dc384ae88c54151b369fe77d1c1fea49ff1da06ff1d4b2d9a25f89e63b184a905776f3b46599aa85ba1645a7b4dfb47322730889ab4bb6b1c862b0e046efafcd07c8d60cc5bbf12507871b7dd59f08789b6326943391022a1d8c6496b711f99e03befaef2a1f04976310bcd18c9d170be05ca54800d544681214fee191d281697b62a26751911c92c5609a9bb3874c2f7e675124dc7bb0d31b08380d133dfac135cc49fed8cc6823066b296d50cee970c77ec5e1256bcdfb0ebd7d9b03ab6a38ded012cbb490bd5e59aab29afd48cf41205e3ec1c52bb53125ed9317a2a0136fd2b5b741d56a75c34132bdade0987785f331ba2f45019fcb2747d7e143b6a0b639f0b22024f83337deee6ccf638faf7aab76eb53b48bef6823069639678509e6c3698ffde3a3555b2ff396f3ac67b7e3d4c8a185915a90bd14125e8c744c9b9d201cb4c0d488fbf28dd52cd759805ddb3fad75005b6809eadf4c5b298f640e908dab89210aa8803587dad4707850c45438be9c84d882833b8299784c45cb554611030f4d705afa683bbae6045089f570f0adef31de7c756f1445a5c69f8def4ad59a4cc807115c9e4db2366c1ffb60019d946583f9d3c9131e40767eb5e345f158368a0da54bf71968d1720c692cbb9518fb74337ce782c843a6f4d791579e9afbffe2ddafc6e8737c4a466962b74f88e55eff5f69ffb89a43981713e2ddaa00bc66ee3b0d208e2dedff6358da78f92b46f140dd7d01a9890901ce6685293ce6b0fbc14080f27bf0e5b7768f15b63b7e0b961492bb492314d7710a0a63305640dbd5126cad014bb3f05f7e0853aa811149a761f10445a3e7cd1416f06dccb2aedee101e8d604045f3eaffb04ae9e22bc72dd24038dd4e25734a3c8fe709d9d93a911c8c369b57cbdc4a85a58c799eb33b8217fef0f7cdc18dd92c0bf272250d32da290ec4e3ff41bbc09203be474b5d6e05de35fa059fc78df929f539647118458d91ffdc97bcb7a58feaf9f2d21731ff0b6738cebb6842813f5e1162b161ca6e6b7eab459b5130d5ef8d373a929636269abf2693e60d0460344fbc087b807673decc65ca9ecd9e215466f89619222b4a8acf7769555e38e9382af901839fa5894fc788f307d151a1ddab24ab7b253581318eec788fff103442635841324261d9715412be543026a298cf0ce60eb17a4c1aba155b12334e4603645b13512c1c599fcaa00ceca08bd116d67387b09acb03ab505c7ae2f9c68c0b8d55948366416cbc5c60487afce8ac8e35d225f680ba7ae0bb865b8baa6e9d00d2dfc7d0d21ac3de6286a2d53b299aad1bb7cff84ec3f30424e4628727846fc2957b2210348c1551a981dbb3b41fddaf8df8951fc292f75885fa7eb90495b624c161580ab37ca086a2719c4d58d97d940a540235f3603de4ee839ec59459a2c0745af63ac606d08db44b0af94ce49af4c836d2c2310320ef0529b91b7df78cda36b63a52a7363ea1a5e083317264207430394897b76cdb167168e49e8b5d3fc0cf5e3b84b98ca049be473ec281cff1b697c82568a52c8bd31c94ebfa1346d13f3407c1ece8fcf797ac89c8dcfeb51914b4eccd0393d16193031599cf4be1b0b1bb1c9b859728d2fc636caa53419bc66fa88eb8644630aba6bf6c86756a837f7ebbaeeb6db5b5cb6a8240d2e305c9e2694c6ea28fae35ee01022a09aa81587e08d3a36755e8b6196f04d3c87702d061e1f7eeac41cf23a859e10a84abd6191035fd1cdc1fa3a56b0b80ffe8a78fda88b4d3dc20175ef3738426844508bd94a16893f1e29b02d0b4d6f92d42aec3b51b8033d5ada8596d002f80ee9b5eff9cfb94b9f725ecce7e807f166320ef6e19a428477bf5114764e1a81a329737011ea05638cf618feb26983ca864442182754170ab4431d0e2fa73143b4e422eedc34fc43abba272a81c8b8813527d9e20bd99780fa5dc3ad800b9e5f5c5188b7991225a3b5a62a24787e136d5e7ce2470b7068
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.
