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 b45f7c395e38e08677caa6280aadff2cc316162df25bf7abbff8f8a204e235d0437209591ff1e44a8847d777a487ad51b3ed3575132f9f082a4442ac0d2c7792ed445d4fad8ad3f9804a5b0bb99243092f079ae282f8c73407cd7515386e792da047ebc07e0d99b2795d1ba21e9bb03dc89d5bb1c1f662ee0924a81a46c0ac7e6ce3f6582ef9070a39475ff969a07db58a0bbe8f95cb6d1cf3e3fde4005e3091164470eefd6afe6f0708deaa140a0d82943a069f4ed1bfa5ba8665e46bf9a3152339333c4d4a6ffb7147ec93e7634df8297d1cd360127306d0ae13a9fd7c1fdcaba5cd4370836500a55f66212b11d3d7dc89744218b36c700ec23f995167c9faaf25e91833b038fc20f22a16d854d8515d6c2db23156dae265d8cea3dc4766a216bcd62991c30ab98182b96d247824510a29bef803bd8b6b612c0707b20534f3a7b723e854730977c2e905340ebe5dd35990fd0118c12a7372a7609ac2e7caee30d5ce689a3f17abf5b179871a4ee3f44e5a6fa9a98dd8280b46e7401af97750f1a1da4f257446c0b16f5c590a6ed2f99f60346539d776c99b3980facc2773adb4c6ae333914e027f1c51b23f5bbe4a785dd0bdd9145844a20e3c8b2610a270fefbb6e286db72e273e665c8f816ead7a22e3f19712f7144386a59c56ed52150256809766a3950db63b6dc25f08a3c3b9c701049e00d5dee37259cff75b73f7e0adedb9fdaa1b650ac0563845e8a60b2ae25f9a8e3129870ba8c7d859052e65c54c623cf655c806a0551bf852e90637b4083c58752d4b873598903934f4c32a1510f00805b7a230755e3ea27d8d37f1bd480bfbc2341e9292da88b5b7490bf0b322cc8b1c8b0d17d1f57b85fc5468fe20cefbba7ec12ee23ffe21cc5f5de3ec3dec1ebf4eba35840b4f56b1f1f912742806aebe978ef5295a8b0271207bd30087a7b7738f67210a2e7631aa4c89fdd2787f5ffc5e2d28ef9db4e31dea98ee5c35b96074f75cbba950be255a7816a673ab4144e693d6491f0c0f1e9b258f925c85e7f67adb56ef059791358993149fb9f4153b2d1230fd4ffca6c4cbeea16adca3cc4a5a2506502dae42003fd9c934375ab476a01f83b5c31dccbe34d8e2f73e150b591a4f85d34e52f6172e00c5f26d8bdb1ee23e445bfb54142db631d336b2d534e086f8bf37c274b6193c44c068dda915aade6a8cee830d606d62d1d351d8fca678c537ed6c94c49cda320831363b6ebcb0d8552d824d9cdd3e99431d04f8f2b6c0e9d54e20f87ef89692bb686a7c4b447a9e4261b5ba6b207302d735c027463db53bed910a57ff118f653fb2928212a94bc7624962f9e0e050906be195c6968c5a2eb9ee8e8b1a463edbf7610ced4525be3e6b2e319470a53d22d82b5b8a6b35582307a18bba6581cd698242cc693c5fbe4706bd071f2d9d55c9af9fdca49cea81897c7e577306fc1800d7043bec49a4b9eb8d79da6a9b701017ff33ada7382c73136bcaaa540efc5d95e34683646fb773d71d4613c995091764303b9e744ef18ce17ebf46cb1d9ddb53e1c6ce237da787b5090116dde2cfd8d292b7a28c0b5226c1e778400445d8c1201cc6ca727c935fbc796534097fe1915f5a02fd18b77adcd42494b37676f6f745dd35c28c91752ac4021eca02b37b5b156f408122ae0b3cec41873c10772b96f309d5422378a1e7c9dc6e5f775cdca3c9d1900aaa5ce17506f68fd4858b5128dc4ac408e2829cd1e39860cc91fe747016a6d4e14683ace56220fac751cb774b431f02a7e5a73256588fbdbe41d08cbbff7cae82ca278a13081998c0a15c37049cf6b5debf5742240b39ec32f5ad1896d2ee126eb5a5e072e9f6d6c8d78166e39e786c6c9b6f41f55659b488a6025d9617ac472ea571380d76ab55050fd642ea76e13dbe59261f5279eb02223a2dbec13d221f205e4011140bf277f2efbb8e0e4aa5add30b8677129121715f1103b53cf436276d1294d436b13eb92fd1d420db63a16b29b659f91e30726546645d4f77cf73aed8e003c7910ca84ef6269999fb6a0aead766c52fd11aef6a28b7d89027691be53ff96fecd7abb8b2f11759989274da00f2ca0119b352b0306bdae9bf8607a2348512f1c1ca6846bf74a57c4cc72f1f38db2d9bdf711cdb2fda76499d69e1107697c73a7531121f67341683c4f3aaeec4f0691b8fa11c9a45bf5e4ecbdfd98fb80129a0f027a6f621cd3f838d47a9428e63a042ba4223430505d5707395f62736971e75
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 063ac32a92ce1b0467092e59a5250934ef67f05c98524636851627295431e8fa0f29c93edf39dad19ac32b8a55cc0b17d9ad4037d13142191e197d349cf650326bc4b1b31062e754f5ccb565a7f27716f537e1b230e1d3ecb1311efa925d08d880b06ffa1e2c602b3978cd5171f01a8e344c6db701c4247de6724e231c0b412d23166f087085901391ceade151b5b0faa713c42ee2a359ddf05919699dd2256a877347c0cb2ff757016ba8845e62a2bea9e8ed8dfd725ef3c57a08b0f7b0a8f48f151d17ff9ebf86d576e4a538d70b9266b506f983b1a32d0735c499ed36c8276cda70890f8c507f932e804f1056cd3018288a0efb61d9cc355f66580b56026f2bab36fa3a49117d2aa37b8e298168658dfd8cb88133d5f272d9f78a16cc9b88cd20a0835e2b1325f2916cc72db6a2a400f7808b3ec7f9e540d3e679df79562cf56585bb6f51322dd247263eb99decd42d31e65c16caec9a78ae43bee61431b0ae5e71c1d690f8237bbdfce186d884a6d6caace35e1ef394cff4dd811d91a47b922f67e061e0e15c61ee9173ffbe74a10db2aab61de147245f4f36e05fe9c745c5d65f87c9737733e1e6680c94d80d84fa3c95c8921036419f1336d36be956a3500588eea0e842be34fae0ae9529e6add574615f7464bd8531f2573416c87854a99ef264d27830e299fdb69a1a82ec158d2c9bbb4a2e4c1dc008481fdc624141e36c18b1bc9b54bed13252329c229c38cec954b4ef163b3f4a4e7f074816893403dd8aa7223689b57176a05d6fa23eb55bf5d5e8abb569b2be3f7b4d316fdad57a27afb73214657525b01655ee7e74911a7310b63313a837c872bd1a0806c491516952f084036bfcb048a2e697aba601251c958eaf65cd811af1668a551deff0dbc157454b0fc05674ad34b4a42c76c7c3c135e0c84499ba5b7f2be13a38d9f7a082f9e37a9104aba2ff5946a12461cb616bafc403df0589d2a8117d97b21b70958fd102e785c57a005184799d2285e63aba77562321c108c627e4f14fe0fdcd8ade53d47177c3a9524e1afdade167e34932b1735a85222dbac896453c0f82b77b0545d708773a7da9cdbde468a26419a4b20e56f3b9ae2ab9a31050329b592f25fc8b16b53adbf5d21b7643d67c5cdf39abd0b091153a92b7bb3f24079ff6c07e785fc4a2a57b761cec86793cfe35e83b060962f08ae58c509a083d043857e7b00e45f52c1888eecab862b31a00a52b480c1d761e76c546b63214154787e6590ce56b62eb5d6d152d767bf87ce312cbb39af50f6016073c1d9c72f0562e0a0e27f43d70bb4395ce1edd40ef2980dfbf4998bd2d3445e19b1d8ec19ec1a347b1d6a36e5fb529aa23264711419d7e304f88fbcbb367652cc24843c8b5b7ffe8b39659144626fb2cc633f3081e4689eb0773b7a63c6d18f48f716a549b70e3c165bbb63488c0da8ec453e1b18377ed708cd598680f6e4ad8ea47527c0f0739b4ec5efb7d4e3f2f626a1581d7621f45b2d2d56903d1e012ad405d9fed35500b51fa9a957f056306c493391794065d91876f03704177d29e538d083e505e858a8c05f56ef52257a5683c7a615995415b53bf1abbe4deda8d32b06f70d0e8ce03e71ce476e4425b88831ec300b34e84ff29214d604be560ac7cb7c42bc383221606ffc7c793db41e6431cf9925ef1a19513e2e4b12f65c2bb1a5d5f1cfaeadad32c5ce61ff35a02c72abdd86b29759eeffe1ded60f8e4b3a363aae44c3a4db6180b059c1ec5eda56d7c1d8922b5e1a8634f4125146c2274682864b83462901605be1f2505303fdc8e833242fe39d16bdfd42145b108f9090835b52c33ab5a0a37f6f258d9908e11e9b630e44d4496ea8c2961ac54e9fe8185b6ccdd0a0e81b54ced5d9708840e64299c271e38c5027780d5d8529c32b771c0f9bc6e6670376bf342b26e0530871bbc08a3a765e9718d3c231e12e2ae7254f2fd23333de2105dff52245a67cc5ca6060ac5c8579eff694254807b67b352c4c3ed4d81d164edcaf20e8c991fd867a4ad58c32ada72f3a887ee29ba9c51d1d7e0249d246ed7c960bb89f98dd1e58a7d870994cfd0704e676f1c737360eb37e4478a2dcd0baf397af75feb3cdf3f825d4c997e00a6d42f3fd7692a106bc2f3f6b9d5b31d102a84f376d42bf04e2034b745cf268f72a569351d8216f8938e5a8d93fcc53750cd2a9f0d0ce932dc10b662eea08d8f40c17bc6b958ceebdc237a21cab5dc688cdade4190c42fee5e1d19d0e2acff4595fff949913baafe59c2978cf892573341f508be50f40b5ddb1e4aadb407da9f32a3439d84fa63312be33f14c2c1df269ec52ec4f5b3c4a41aadfa8971fe5cd17f5346ea7c285cc0ffd3079498af89513b88e658438a1b2e57fb71dbdd1dcaa13ca742b1d75e95c07fe8a22c0a6faae83a84cf14cf71a4f6e8940ea261a387862112319aaae28286b11d5476f06995ef4c2606a61b41e8d0b49623b96362cfc05588c18efeabecd7f60a866cd93a1e309ed4f1c6293accdc15be85febc2bfd8bb8b9157c94fa4d2cb9ca0622639aa34276bdfccc822578465dda11a469b31a088e9b98389a0d612c4fa1086fa04c4058410d55f2c8fd78f7c80d354467609ca8763a628d1058f76c73ae39abce01901c60d94f1af233bc60dcc922f18c2d1debae425113092158694fc3b6d4fc1d1f5e65b8f768fbe3b7f0c5590c96ee86dbe82521b9a74ee13b8c5c36997c6972ee7cbf48b45d189b91021d1487f9d64a9781256ca8c8127f516b3b1e1dcbdd5137e596ec340cb8f1606593a79fd75d3e36f2f9d9cfbfff139536fd19cb497764418e3a8ba423e03da4c64625ce3db49a8459b2d286619a051f02d409b1d4f33abb090899537750cbd0a0177d2c0c091a813980bcfaf72dd39f2ccc8368178ce227620c7424278a3e20d0800a7812353a103fbe6e928f0054137636b91bf1ac12095d0688a0cd9d3fbf69c209dd3693eaea7f2c66993392b32769497b3939467e44993e14457f02daf106770097ef73ad57a13d818ecd042f0544a1dec763f3babf0987ac41caf6a66d3bbad4542bc5938d1d7add3c37f5adbecbba42ed8ac42251df701824631eab7ad30c2cfea66bdc078c570d820538ab4ee47a677ad3ef7950b1bf4460cb0febdc700d3a463a27441f13447a234f24c9791f2740e254fad66916c95c1416ae9fa4
Large toggles with background color on hover
View code 1880b784c1b4e0dc147790c25fcbcc4ab6bc66fceffea9cd00d9e5cde63dac0932136394c9cfa76d9a91ca539e8bcf82c6fd40ee044ba5ff9fee4aa1968672770f4c95238f092ce24684b1beb44009aa310049da664ec733ab4e31c40fd219ae49ac0043a6bbc047d5e214abd01a4d4ccc00dc538a9b6b68170640780d6f303fd662d52935570de7593f86df5aefbd244d0a10aca59457cf0eda19d87a0209ba0ea388aed8ef28a99c4ff44399d4e6127c1b4e0a7979cb31f66adc603e57d3817a51ee0fee41c54122254fdb4be5b12528982aad3a6a0f9f5008b52ff0e6ed09997399493c115a3e790f2bf45720670522019abc092d1d9f910d7531037a918f7e8da3ff692f4d62df6e8c32c0e819e6d26e0171b11a6f4892003feb584b968b269acbbb4fec7d91de5bf5d005c14fe5e5d94739a54567bffd305855d645ef718933c37406531f35f444e0becb7f36d903e3aaa110e18001c2d123a3a5755e1c3290b8c608c54c4a10682c92554a0a5e2e77280b07a6f83132d313f54c3052691cb120938427bfb3bdbef035acc32d45e21561000ba3d84d8004fded1c3a3b1b08be114c6ed04a316b5e72377a146a99282e8bf065d34af7034fcec608ea6dceca458bb4ee91f123802a8f3b75c50afc8b4b532482d524c0830c334dbf7a5618a1817b2d65254408ea6dbbea0840de5aa5c26a0ca750ac7b59a527b14f4897d4ecb5c0d17b0afe3f205d16b2a070eeb333d504441a1d151ba7eab5d779ef49699f5855d645e70409ce89d31887a211d774a3862ef7601328cbd67c478b657dd142651cfd145d90300a80ccda50d44ba8327a4f3df4dc483760d689f6b3f7e36ca482fb790d0b28db6c1fc03ded4bdd9debee2e720ab5f72e876ea0cad23fccb68573b68c8c529dfa05728c9b434f139b47f6bd3277fa4771b3d5c0f353436a783f0fa577eea3f88450abb4b9260d26138a63b3ca16158ef59e7bd1e06c0f71c6b1cac1b9b37d26dea46c9c58ddc7351be49a7e6d2ac08328f8345d3b7a4e1200d618843ff194affb8d8420892ac48c48b2fcd6e21ed74c34365b5b36513907d0d864897f6e648000ef858e779b74eb9b4f16b2b37bf465a55ccab4f5adb337f91872df3f123f7f43ee673b7019c99ad7efc86012da3865892f5ce31da9df73d7fa1aeb4e6eb64a22b2b607ac0f586230678afef37e6a7c681044e72d49aaf2e7d7011040405ebf8f8d43d2728ebf7fccbaa2fe0e7bb8edb6a7fbdcdd7896a6b4a4f92de3721ecfd11e6955ba3f838755005cd3f8e340b57caa334af1b839526efe262a31d573c6a4c6f4095f5f1d71201592f86b5e500f2b13830f36f7ed2cd2c71de49ea1f5abfab5e1a6d2a3150a0dd3bfb8e9a07cd20a2e9082d04cc3ffa250051bdcdcbc8b1f1a57d78d44908545a6625c5e500520fe86ff41c8415aa0d1ef8f3f7a3691c802781819d12ca3d3bf057719c86bdbbdbb9d7fa5430803f84d2d767765806ae7622a2b92eada64c5ecc565d98a0a97003cc30f6347902a8020e055d74fbc19dd71731bb7e7f7dd16c9d690cb27860b2e1f583fe9a6d56a4624627988cf608ec21469847724f722307061f0759b2eef8c72efa505fa2ad86a26420f092c3c2728dcd5296e05426ce391d9aefd4732c0817d33becce3bd11b8f1140f9314efdf5283919473348bb5c8c0463fcd4e2cae96b8b150a93e6d39e351a7ddb063b6fce7c493d5ce8a23b1cd9ea4747407cd360c9bdbbc41da51ce26aa36bf4151ff419364cef32347eb67431f59cd1d3121e00773e30f70c666201eb212bdd47d6ca2981ff4d68eb7d5f5ec6784c9c24bf101627a0421a37ec549cba2035c274e26d84d33024df058c8ed9b5b3a9cc8df8ffa31a4f1df65b959e88d1a0e5bfb765f3a10ccba5961a5e13e4784e36498eee627755aed4cf80c6d436c25c9f351647f5d6a6203e861a1a466d3a167718216f01a5f25407f0e25460ed660c2371f9baea28f2025d7b2473ed252f05e4fa2df9f0fc2ffd4253e620329fd3b4d9ed9600b6f97eefa24a6086523292a24b9314ba8df238b001adc3d1dbec09c8cb339bcabc69c492147bbf62e0d15da71125b8727a59ca6588f58a5941101af1106caf39ebf6b69243b7869f1fc93b72a4534acfb2fdb922119179779746247a08bc2a92cf17775816fd6309e9166469e040a6e0c73cb3a7b0c47fa5ef0b35fc8625ccce887b12d9afc004d9e65827254b37d1e3a68f9d893c04478a6be52679ac7b520b10f8ac22e8bdbf426aff7ad9a147ce649a4bbbd39bd261e4aef054363cb3e80a57844b8e8bad416a40a4a9caa8b8cf1244fddfd87ccc3b853a8d8494fa0b7224aac26b816fe1bfd69b561cd752766e2d1842bc29a8135e1b244ecf604656be1e6713f33b497e20d18894264
Large toggles with icons
View code 13277ab7b458bcfda29d324de2995ec1566b92d3bc35a5cf787f7cc94d93e433220ffd77903a6f924fd140741cc09e67179fbc3ca6c87803243338c259d4049b125f2c48ef03fcad21bee2f80851464eb231494fded9bc216ad9c83bb7ef87d1687a3f5a14e7a7530b7c21255d91ceaa88993df34a2205ff818f486290d4d9840429726145d7f6a03031a3cc46a1e0d72c5f3d1054bb7be88243062821cd135b21dbccdc5539f04fceb0c4ba8243b5d4e222c3cf6459c46bc4e49a3abf00ab2e44355587eb671fc0d45268863bb5402141db9aac5358af2152ddd0ed979fa01fdbd0f905e3c0158f443f16dc439bfb534cac3418e53eb90fc9c1be24b4f8e8d6362a3957118dc860aae4c72771919239fd4039d9cef8c934aa9ffdb25c54541a6f98c642d695a9b8f037befcca1514e0382c4335e3bf9627bdc2dab11bfb62d125c271f5455b64210ffd6e36a1e2d80c75540fedcb28fda060dc22caa5239eec91971e53f9ab726f10408e74a597fefc011677594854b42d36420a044ae51b2e62a3dc8541284d3e15c6dd066351db0fef121e15ee8b0a37d2349ac6fb39ed208a6d7e6b861aaaa8406c29c2aebe6924affaa31a2458118be48d8adda97403e427637e598b7f5541309e8ba1cf59efb1cdad1a88c0b9f25fd6feeabcd77c78fe9ba4151c87b3a2408f3c81086f7a6b93053ba4a350a911c94f090c2e67d835aa997bc2da897696dc5d97091735a941b29f2727815153923b5e53a4df328e926f7cd10f6ef4ee01c796158ea5773e94789fa9ec519b30d6af69b22c965282dd74c76c6be47d282cad18e09d83271b18c3dfd8ac8a5a89767fa2b13069b8690bb80de10152ebfb58f08ccca9b44462d9d9a79d9180e4644db558df34ed5417f4fb22071ee57bb14a650842f03371648cdf39fa8059a06372ac1a614d2ae49eb9f5f214c33d1e818e359c9cd30a1377a77b819d4006e06679c54f76ff1f4f6717af99cea159466008f737746951960dd3551de5a28b0ad5d66a18ff887da0d42e07cf6a0523ce9a82fa852893afed049835e7f2377f8f954a05f84b7ce706ec3d9990bc0d768a9abdfc13f81e343208008dec8ff3556ec3cb0c1310a609dbee2ea473a1e1a0575585ada68c95fa8eaa5a9d8d7e22476d815a8bfd8559303acaa17433f34a090730ca8b97a49866524f30e35a8004675189c0a9dd78741f540c6fd858c5cf32a9d0ea7a9b5691c58456bef0caee76c3977a8c178cd1c1987713bfa7360b91a9e1e3e4dbb313453d25e2b689eee46da4cdb5203fcfe5f641bec2a9e48d058b10261f4d42e1d6ddf6eaaa1ba146cd5cc2f6b2ac4daa92c8f7a70a1a9638be6f5c9f69d3008c8d0a9433f6d9d9c7bdf82c6c8475cf17acab2cbe98d59c0053a0bdbfcf8bd87725877e8453dc8c60e9417065b63cbc6aac9802b17d75f26accb6ac0c841ded85a0c4c578e71181dd80e1504a2dd5a909de812e845109c141416d54c6c869115777013075d6cc0122ebdef5db9d33b93b328f5dd4ea2170789a394870fffa2fae19066f149137d108e6719b9d3cf8e9b17dbba701ea5e14aec5ab70bad10ede6c315853a6dd1d79d592731633715568dc339943aaa2733b5d57135986285cc6fb3c2ce6789146bafd8ba32d09a300c79a9c3f8243454361b29ecb8832e2d9793477cc8fd597e02b9e2f0ce9785d5ba90ec268d46b5d582e93924cc7932d4855f6864d8b592d313f831ea8467501ade4681147cb824f5599b40748808434644c151672aedcdabeef2750a27c87723ca09059b7cee82bd532d7bc795061ff8f2633435b370b7b599597973eb0fd3fbbf22234fb334fcd5a42d44b3ea1c27e26112ad27d8e96ec7f8cce2c30d4b5ecac14007e0bbf3b6344d3aa5050240c556aaa065cbb999c2ccb71fbef597401586863036f84d6c3c396964e7a4ecfd2ba00901bf56754cd769cce19f8bb32345e0666f37eaefb620d63d5eb419ad05612600440fc135219f3bc8ab47d57f3d4d65a1fae83f0845e72d63f3b6a76bac7181958787566b6fba560f6ec035e2f4ed6266f55ca30bbcbb81a0342ea0b6bc7cf3e98c7a750f63713f03122b5601339463b2426657dbe02c71a201b55beda1a007521e112fd7413b762e7c65ec976746e1a91d60802d58bc23a5ad78fe5accc5fb705e9b9b03298efe5b0388d0fea9790a96d28c5d4f90fc472dc0725f10f7e8b4296c1a13542b8d6c18dcaa86a123ff99d753afa1105b560f0c3a1ebcaa31b38d7b504f0c0e86c331712dbb90123f911af59ddfc8000216adf8c60a827ab8af49ccb0d537341a700f348accd5bb5e19baf158672283954ee56428796762a9090116a28fd017c895462fa634fc3c08eb2a32a646c3d25b0b927dde302ffe3cdce4c8706db2e28a422b7c520bac38c5a514f4e680685c690765f15bf129d65aa2ab562d186426f1a62a61d1c61c08585402c5514e5db04b508c0b4dfb3669505f643c81e7d3a6640c3d432f959a9eb5fe6129bd70a5bfdcd3fc91c0e47350d28ef94ac2a46a7e08a029d5a3fdd6eca87a3bddb0766e3daa492a85d3e6304956d17bf5bec32acfc0870a9909dfc271b7bc4478d9b20076e204957115bfc949222900c0dcebfd46fd1405fac8ca08aae34c74fc990e7304eca5a3eabb4a7f36df76ee138376841a2b1a39e1f0060066847ddd37dac39758dda0f34323e2463f0655e7f6d9100424f4281ea3553187e8bad98d938b0cf17d0c30c96d039037da27210802541cb341f7ae7455a1bc56ffa1e1b21d20ae48339bafc47188a4ef3a8ccaa58a03ddfdc124cebcd5e81607d4936c397ea4bfc0ee64cda1cfe660667cf984ab05f73b85cda19bc593f1c8f8cb2969c85cc1b563b2b55f07eaabab9f436b9c2caa675fdfb0c838a80187ec19c35697e0b7f9984248cc23ccbf0641b6c5fbc66b8326cd5a32bdc0f87c2ead3c2c3a015195aa23ebf6bbc53319afad7d54f7ee2cf06789ba5ddb3763ac5a6166c39ebe576188301000c96f56c5cbb8c7c63711a514f24d8d0efc1842451ff126fabdd8c3537e41ddec9d0a44de40279625ecded3a0199b988faf8fc777636752e9e045b883bb604fd762f6bcb7b078d3e12dd9d2a44ea2788dba5dc298ec4ce5cfb6c83fc5b0bcd12dd2e18bf894911c24462a0dd43653a2f446f0d51c617cdb1cfd8df8a83f96ecb1e9cad056473c4eb2b43ba94010550cbe7a15b74b844cad202dcde2f81ec14dd1deb848b1ff8a042ebb52675733e9da8802b911c956a93bbe2645149a895f3a15101747c95216819510ac4b37f9d302be2ebb15c27b802377084f5bb28b71bbfd59cf779ddc15de5e2b5c8665158880113e629fd051aa7adb8b671187eed76a839182cacae5f41c2585615ba4e3c2306cf5606fc2f076ba6a2893d7ee8a821530af64739bc292979155945a103f9f61df4f908215ec7b13592db02fd7eec73ae9601a2c4b6021d75af576bba2030b1f222c6bdbe1c3101f8862a065f7e030592ac5001e7e20b030c9c0b72efed7ce1f0daaf5424ed5ceba1cfb358947e603e89e4bb1d2b84572fc488da6181af4c24af4fa12fad2ce22d9681dbec4c538b5d4c88674bb033cc7eca186a5a6e0749989758a0deff4ea3e5b43fe13fc9ba4936409a855a1994eeab2533921c43db72e1de98967065ffc2d9b90501fd5227663269a6cdfedc23bc22b48e4807a11cb29f8c3bb4cdbcd41df5d8aecce6e0528b63d45e1a0702264930a8561c1694d387ba4cbf343e89810806d05a9d733be50f93f44982b8f1c5b9bfe13e00dc9931e0380ece5d9cccd9779ed66c414b5a598bdc83270adce99583c5c45cbb142fd3d12fcb083d245b606a6212b6ef73b0618292faa30840b24cd021fac9ae103707a735db3998a53f5473588ad640487740c11e09707c4a21ac7adb84be4ace6ff7682beb223d67066d0f0f2a5b16dc4a8e00db9a4987db3975f85531fc573906fb38c6f5966cda6e8dde3b103157c39ab013614e743ff3289d9e52e0bb2759a6f18f844f9707c46e266f559e73cae44bfd270eb06ca40a1b4ff2ae3771fcdc808edb5a1446055f3485dba9c17bde6cdc8bb6469ff1533951274dd82f9419f6dccb112bc89832b3419e4c3868081583f576b89710a2d4da6ac6c3ecb53eef57c927e80896c3a1379bca983a5ec15d40a75954ba8d4fc95706a567111a82ee976b61f56bd62637d4c73fc3b27e6f63582199a26de3eae6fa0a2a8511667f043c5fdfde9cb68b1b8192563529a790aba25c6eaaa45d84c1e371d35fbe1a86103bf44ef360e79cf31c85afd7dd59b98bd3ccfae89f5d9fe79602c25c33049053b6379e84329d294a925f26dd65aa81e6743a2279e99219f7f6aa4d5c22f5f7fc510b1e88571ff84b45321bf52f7064828c3a44e7b727ba359e21638fd74948a459ebc3d5322a60b0b82d57e0403c63dd05b2dbd69f32f0c84833333c6ed7326d3d184e68796ec4d1d1769787d52714869cba2fd606f0927ebfa34235022659ef50e965db42c9d9c4783b555e295f1bf5daba897f2be6f8ffe63a6cae97e0ca1a775b020635cad07ac9cb492257a7578e6af56791bb621691e5e4c7954005832e4fc7c1ab3f3ba32767e821f07306f7929affc9d413ffa20de315dd6616069d8d1c3e04916e6467cfef88291364926a136a7a1ebfeb31ea0ec04369bcf750d5f5aac1a1899d0c9d3ac00443ba761c628aad0bdabbeee4cfdd6b1eb31d7f93bbcc8e61ef568e600b62ad21f9632b5dfd88244d79dbffb6ff24a571e158d778c2a3386ee9ce8ed753ce0a0c7741a3a3ba77e0d0ab235ccb8267b0e2652b1f52bea9f4e75dc306211a6c31789e8f550f3b25ec7cc5da29c472a1202ade91f3e6be691055437a2442b104156ec68f46266bba9585f0572467a065a157e7476d5e260746463310d762d9366df1a8a829fd81f21513f9310e8a8a71a615345204441247f2834c133c4af70cf666885d87c85323f9cbad9652af955f5a117f2cacf40930136181b6a866077ce275f2daa977795b46e0ae4e1b9b349c02511dde01ac3f9db268bd98f1775761b3a5897b3c07eaf6459e97d729e81ebef1b4f8810969236409d533f9bc993e05140d6160d6f45ca9e9badafdf5bf8306b6e457fbdf89d18f8845cc382ea0e2f9815bd8478d4e87a3371da7734a3f2fcc4118e7f1960b3ff959d5221f0e4172e90298355ab2b64bc9c981f797ee211b61fcefac34efe1e593822522c447aa2f61d2c6d69b55dae54a7b7f4d14e8572d1a413851d98828b9209eef2b0c3bad5b21f22dd07cfde1dcb057ab5c03733a67e7bd6bfbc79a450219570ac70fd17e93e79b0307a91da21780dcfafa753c72206c6458841ae75709777cc6477dbb361f9fd81ed0e7b7759f0cf55d47fd5220b254db90c34449857dd6936a6370b7ecee13561e8c6f6a51a5d2a50d0bbee2380816cdc29bcda1b7010ac3ac4ce7be33879807a038d5511d9f3ce75a6ff46fefed21dc0c9bca217852ccd68f4ca4f21d46bfbfc40be6c255b58f46ebe1d87cd2feba5ba345088629ffa5e1330db289889d1ed5aa172f5a610159d2d9fdb9410efc8295e6d622b3cc6c902a0259b4a5c4450c60aec2836b3cf24ee23a1e4e9ffb9cd4c326ed61ed41d9babc5b01e856a6c8f70d6abfcd12d74c974121b960adc0cc81b31764974245f3cdf7d3dd14f1a414e3da3f0aa91fe1de784d0464a8133e004c25202889a9e94df6218dbb53fd3ad32e9a4060fe2c00bbfdfed4fb2a99696e62c18f1955040831c346fb33b7d1d3aed1af43ed4cada1d4512a8f107e859b2faa1c5e7571f80c65935d4cddd23fbdb1204adbf57f45959afee0934318676b252f1d2695ef3b49fef555aabd5bc3a4c9adf38b2435eff2eb2b544b4c4e935d19604c3ddcc4c1c4c4c20044c74c5dba380d2c1cfa9ec04ac09da2c0fb4ef2acd2e606fc7d064a99fd3e71bef76bbb67cca4ff2d4a8498882abef9346d438222a913b3d051d5345ff713216afcb8ee5bc0df407dd1ac61fa5cf59ef09eafe1dfe8fd7f5f8d3ce5f88232f148a1ea8b0de57cf77eee5c790af850c9ef9ad4f54eb495f1d7c48190cbcdcdba9a826b031022a738486733255d28b8660f192ecd7abb349931f96f851d9ee86317e4755f3fa1fa000d7b54bb2f25f621172825f34b13530fdf4277505d977915db5a9d88644f25f7bfa13c71cfa92bd22483d7863caf2bbb635c4921754fa3322ed7571a25bf3dbae4ffbe811041ab07a9f1a849340044fed5eae302fa0d33a6b393423f126f5da4c4618e94b13b1a51b2e2cfd98347981259e3725913ec5ab401c1868a97ab9adcdcb99523a65eba358cfc9d0f0ebc2f73384f7d52278af6921815c80114bb1d34e421b083801cea5811346ed593f8296509d8ab66d87ee1af9ac0338d18618cf9b62f658764046ae3d270358c77a1adcde44bfcf8e05e67298e744cbbc3afeda7289a9c3dd41d9c6af2f5138d56088f56d44bb0b0a3cb6f193fd9d7fc9188eb4112ed2d509e67cbb4bcd831d225c2416828f99f8ad9403c6e0cc902277dec750962d1c0663a7b44bcffd3451700e6463d16ca49c5b59f61a528da83efc93ea52aeb4b8fd69b8ba75ed521168c9a70b61f3f65f76160c250287ff76e47d3e529badff9973bfad63ff169eb7fb65faaa9bd30f0df9a6bacd733e8dfa5ae749c03b94b984cd56584374dfd51fb3710a084351e5347a43b9e592e1a41f0d891b3fded0ac38dddf14e9dfee4dda3c8bfde066718536d93a4f51f6f05ca7e3a28733444d8c00602fd083af7e16f480c39a2aad75a7dd80dd821a2b11e316db1a9eaec2de2402d7e33ca5589da7f34a7e2981362464d9055cd1a9f662661c0df628e652595d28da50b8dcd793e2f3926c164b691b78c07d0e5651c8222ef22a2755db403b5efb38f38bb0979413706b9751072243f844c6bfa9d5cd63535df5a4fe09afbca6cc2234803023a9327b3e6cee6328e10e000d07c6743d7e9ef2a479eccb113ded9351c4cc847ff45447fc4fda0a7bec682b9c29dca1068add6b66dfbd31078df673d3b249754027e5ab10f70202a720e41b7af3331002f78897a07620d199f08477fe4004ae0da4ddfaf0f7ef4636f3365f762fe727809e200b4846bf715f8c6e074271f705239ea0ad5adbd491f0834b8bd3afb3b0237915a1ccbd0a796992095c19f45240e45789c8d802b33b55d0f1afefaea026b7242c29fe5cf11d17c6c615093debf3b2f84c6a12ad9e0b5ecf832da2ea0312282feca7626b6b51d54e745c9addd74ec446aed22f5909391b342ce60e74a0521c907b4dc4c92541a71cd688011af224be2346471e47c341e56450b7feb42f1f050feb310d689364fc2a40c71f5f7634e39e6d8e71110ab0e78b6b3bdcd80faa60063833a93e35484a3621f9f57c7c1ce014bb68d997f1adcb88eb478e641570aceae94f4da19fa4294a146d7110e19f1a104467cff0176feb015f19474716195545a975127122196d115cc4f0213b8473527af40c05d63eca8de95632a2209347c7ce36d93fea3a56c6042b0c13d69a9b9d0d37c4cc6b646cc59303a19c15aa16ea937c0b6cd6299c2404ad6d24df2daf2bf5e2aabd52d1ca6b3ce933ab888c7fe0b94395adb798a1738861fcb152dab922526c823bf0a1cf14b0f104844ce10852d07706cc4db84ea9e378773a96ec6e1bf5aa4dbb82df827dad612e59e474b32d55f081808ed769ac94e63ac777a01dbef6d645d4ec0f743274ad8384ec34c8f387504417018db0d09a3ed8289c67e21005719dfb4c752e072360f0a8c297d4b85de270ada837a46bd2fe3ff32471d26736ca0aa10bc34d0cc7fc91f5e45765ea73ee27c10cbbc1a60def17fd00823c1213ca20d20b30b85d4097e2850bbfa18b8940ea2b017461fdcdbf802c251eb01852dac3d6a4857ed1ced98de75d4488d313b786d220ed1288b0bd3afa80e8142d86afb9d75602d188a51de06fe259cfb8b2a583493b259c25f533d3bfe8fe11ae7214ebfc13d012c7225e9fee7136fb5be84091b99cda952a7cfb85ab7a2405acd49addf37ad67547e9b336ae9f9a22772d69dd33d63a2047dee6594fa9fa5ebe2206e10afe98594589e9a43230c3a453ac80ba289db763d0d119765116846a89545e37efb1d4ff4972d53c2b002c6c9a94924485cbb713e4f914aa37961808d605c8e6794db2a2572f89e46515a13b0273406da98ed50acc5687438294cfd15a2b32712a337f4dbfd6731292dbdc5cdb7960e29eac318bcffe0c0df0becec65326e12edffb1c564cf4acfd2ff65af0b0db3b2beae410a1c50370cfbae92ccd62d6e1980b3747a2e36a33ebfd6463288c1a8f1237c8cd51348066b0966252701be45688ec248bfb5ccbb432c5f81489d628042613a5628ac5580ee0ae4342652b2daf74813aa4f19d1758c15ad11c8bce3bbbe86bdd24dcc2244849f42a65a8fbac5b0725387b6eeb455af8442bb868b1b7e28c4cd1c7a041ddee7e6259a416468cab152b9001d014da6018beab5cd27c87713cff7e90d9e0dd8b3477aab5c6f874238afc2519fd50282f80e17fbbfca16430a8c08386a4876c0c0010d17b12fbce4cb97045489022af939f2193da7ad47b0ebe0162fba42e3b6c1f037aacb3b974365c6a283e30e5d45840f56c6a903e05fa5687b7db16e2704a22c89f1ff13c469716a36af27c756fd3fe109d8a5731cf1aa75ef727e05d84da3cd12767858cd2c4c36c4ff561b9415d83aafee7f1f15bf64fce822d0a97b074212938df55e162b70b8390e81988d01a73106c2cab263ff284977809e85e29f3f25d1ba45c417967a12442ef75f5aff86120a6b354c3932a3c6663f0d3b519a9c22ba566e33d035c06a64370138df6e9d340399377f68625b3ffff1ad948fdc5277e74c9a1a1f9f043c73949f148bde37ed7ec01896534246bd74b25b18ba45e7f4d8d3ae0067c0a721690f0f2b80ce6154643dfe4cb68dbf0ae86c605a403c6043d7def626052f2367c0ea6b0bfadcacecdc12906b97bd30b60015e45991c2fcd4b0be09f921af369e36c76988ad3c5326d90f6256a852d70d4c3c1b1fdeea4ef87dd285a9bb6268c8411e6ca62cd49a2a15c6b3aec068c51062bacdfb009bea7407f5ac5ac97b473aa0dde61bf7e4c702ff7b989cc9e26bdacc4106e25553c9978c714b6feb17d208a8c83f6bfbbbca5f8b1e95068ce4149b253def65798480874ba3078cf43854406b441bcfd48fd243ab56d2aa1deff22447fbd49d605be3f2fb60a7b84b2e7b9c7602f84f913d6f34d6cb9b858a1c139638a391b7a47c026cc8ff6d39b9c7d4381bacc763620cdbd21d226ef67bf9f887009fa67d29819e576a7ad208dd8b421442f80859d602e45f15dc891edcf456ee008e650ec2bd5c3cfcd83467bd0bcb40effd15999f5edf2e30a9faca7f4af72106bf23241460be5d3f9e0c0616d22f7a7c9c45ca9565bec13b32b15d1350886239a119c582f18326f735d0093ca2f7e17e362202a8d1ecddf39cba3313e5b26aa4827742cbedc55c9e598023465c252e912e9ba5215c2c75ad8572640a19d615108fcc8ce972ffa1e3daef98eecfced9f95f94abad7ada9f500e98045db5dd08c2d55ad4c972bd9235357571dc561d6d9119674e01442eeb3448cfae329efcd25100d6e31696474289f03f20577ab2cc8a01196b8280371d44e1b2b6b413d4d5cb608c825d484327c71930c9caff0a672a5691aecec987f3285d9dd72e41558a40359ce166940305a0cefbc9fb9570edfb1499680fa4fdf0cd166f0719ebe431d37924ef5ed31198038ffc13e70975b6cdf688cf50898757621a2dd2ceeb58b06dee58420254b7863134a8b1d06dd50987448eddf4048ad18151f260591f851928dbcdc25a0c65ff95d2e58d909d5ca34ed9820bd96525caa7be3af120bb89d3f5ef5293d683d8ec2bbd492cbb8eca5f99c6020096a74232c1a96a1f8250648ad0cb295b01d89eb01639dd54510b4f78d77e68e5521e2334be8ea579f79cae4690c2714fb97f62563a00ac685b27dd9c4d88ab7bace0dcee2e522984ea75c2ef04af93014e4c698291d1fb9250bcd07d2cd3747bf9935acf814fef118c358ef95221647f9e2ff9d038b7a60cf8c224cac6e31e5baa5cc7699a32c231a0b6d3e2f961816f42172babeb4b5e919f5054688c07d706bf3622dff8d7087b55e6f2809a412bb197f31583786649cc556587be3c600624fa6f9798aab62e619b5a2ff2bb18e2649798669a6093121cd57e011a11bf40447b60fb247e0befb7efa08a6c2928dc152536878cce3a495dec813be00c4fd74fe4873be70742e6566911056872f134ed828426b903b240d63d4d3f8cd49109770a347a5a27376d942ec001f24bbd29e0e975d8aae97b9adcaf03d20a7dbdb0ef6382d019a2eb4c7dd653f31bb96f0e6b8f23b0e9bd2d744fe7606c48ec37e92fd262701949c20e297e0f72808b6511e7efbbcb9a940432d9892401d26ef85bb58c4d77c1d307016b91a9c372b10933a606123e3bd8464fdd72bf6a73d4adc70c616d
For a simple look, you can remove the surrounding border and horizontal padding to create flush toggles.
Simple flush toggles
View code 8e75a87edc94fddce1393aabbfcf2cc8ba7e56da66fc5d36b1d03aec244a707db1aa57425e7d9d3941d16d47dd9fcd45cf5b9bc203c99547746e8d6e2e342f43ccfe0af95819021afa0bc488d4c36b9da6288c216fd9dcd2c23723605a5a93da21bb387a157753d32a3a1bac8e56fa406e7cc0555f2bb7410e7d8b0c73b5dd24214502513c46c78dc60c8b390482a7e4f2c8b21e766b2a725099bebd0850edb242183cf50869d8bd553595d23f1631d4520354acf027e7299ed8a3ccfbe50ed5979cb63a8548261cd8d13d342f7c29619b47d907ed6802b4038a2d7f6f489ca41feb33c2c1061929aa5e8053f242a43e293421dbdbd3d92e05446dc8b2528a61afe6abd494f29f162507dca6039de276ed166796a108c7332952c8c7d35fc202788351b102842e6481b49ee3ac4c90efa5d0a806d7245c0d28be9d19bfba3ddda6a1bf3586f6ffd78039dd3c8aee753a0c99fd072f0175ed63b1078728780b7c1ffb080cfec764ee5169f7bfae8db7e1396e1bc6c45e628df8aefb69b47444a445df3e026b13fcddd3b730ae7330484ad1f0b485fc538ccece4e9aa9060bd280d9aed015ff5582e3b781b0ebaa43ec1a3a3d82c8cfdb596f8fa7b15a6af63e8379e1b5d585dc567fce28a826e1ec40d2504e0132e38cbd07661282c0ed8b2fc955d9d9a8268ebc0ac14148085cdeea79e063f433fe923f550cd815b69913f852d3ce43ff061e7e579984511148465da9523b623933e07426d32ba7c09b81739a0300a805109a3cde6cb2df483f1e38574b6cada8e032d0e5f8a10c5ec9683411002f31d85451937d62e74709c893cf4ad449bc816b2dbd8440f536995866e812354f6cdac6beaa982b44b65132901637bdb861dc1030c0cd4715a4d4eabc78310e31f83fc8d21969a8d2182bbbfd05fb465efd5a89c7b7f9a93763e5de3c5182276219fa1c95feb75dcaf32ad7588648a5c02dad48b0f8b863e97af3c038eac51e6c31ccd9754091f2979a31d35119967554882e0b9cdb21c9e377365a435d1bcc75a60bdb20d43bbfdd818d071b78d11b88bacfe88cf1c1d5611a9882f70a56e589cff14e9cdc6ff5bbbe572a25402cddfcbffbff51fa5aad16bacaaec789f160e3c20a9c7836bda368058312d0adcb62d1b5b751ff59db317cacd1641fde2451ac79f035289ae40bb3a43655c6dc0641cc13b0893e2341ccc4db96cd0064a65af32563f4c8cd11d79cc0555247813dd0f78f02486fd21490fb8436c0d6a28b41ec351feca98d3b4fb71cf98eb2b6240754c73b3f76ceb92e789f2fd5ab18afcf3442e8f750853e1e4b90e830fcc26cf3d44187a0ad87babded4353bed68a56bfbf91093eaba12631c26f188674d98efe278deed6acac98efc3445cfd4b03d2881f89cd54a12f1eec223da49b924985b4355a9c1444bb753f797196dc857cfd2b32b0925c6216920d08d7ab0110679bb6b114812b002ead2a803a26a1ca43c53b583ea6ee58a866ce5c3648b45efd34a24809e1b61f286bd9744b691f55c2dd3f3cf83eccd10c7f92ac083f4e562e1084cd792eea7243a5df66586c1453fc7f762b94e0972b6414142b9a3fb3e11af54d9a1782bbc23a93f853918931b4b74d4c3831223c8638c52f96b7502e78a4f62f1ff2ac51397a4103f741ca4292c101e7642a0903601c37a5a40d7502ccb6d7864590da3c0326b33f1a5242103b01fed1cf710ccc67123042fb7beca95b13769c774aba8e0f088f1422ba82fad297c59a091bbf61902076553e0f22c189aef9af0b196c5991422366048f4e3f30fe5d9bac13e5b9164d19e246b8b69f0fcc64bd80a955fd9e6d6985decaf49059b0164736d853c870fe2b11df1c90060e616af1fdd29b605ee09f799855c9e14e8ec8821c8b78bd15752686a4e92cb0dadb105cfb953866cb71db5b00600278b886155eecab08e3a1e98bb723cb7312b5bbf28ce89f38c775ff0b1a14d401277cef3a20c0f4ac27d389c716a2d4938159810e24fabe0883e7dbab664f8279ceca82235c6438042ccd8eead3ca8a6bef216047aa5c9f25b0668560903522668432da3cc3f19f2f42f996885c58103e762218b1bf07ae82f968cb48fc0d81fdd40b5ec2917b64ce6f37c9e49d827d35555243f467c658525576276848a25c551db9522685687db6e6950657cdb30bb1b7e04855b6962ed5665141ad5bd498a7126c592c3aecaa7e121f164d0d80d3e7cf9671356cd9ac2c3650dea7f5b3272025013a0d26e3d4606fe91f6dd93f32168783bcb4adb8d36d563160fd088466ee38e39536ee66eedeb9c5176fabce7a9c7c910dd49b82f231aa2befbb26d7364e858a0be57d1b9ab774ebedd9c7e6ba63f56131a353729147e50bb89d44ed26c158d0a30d88af11bae4eb3419e8b9d9ed09dab7b386449ce49d8e7a4ba99fe8ee68b8c24f0601b6dd69318254278ace5dce7cea25a65c2e8d41b0e8f17e5db87d0c7eb2738b829ba2e96c1090087d4619fb964d8cfcc88832ee7e09e76d3297431db612e6eb326a8860d135cff64be88f5394da437e7813be82d47cbd4a72d46f12323521cbec082a41bf6156a02af3838c24b3bab63997e06484fa3be57180edd8d49cfa3b8218d3687f171866ffbb5bbb808fac2efbc4f9d6831eb291cf8aa02cb45696fef55c799fa40aed0b85ad1099d5f50205fa34665d5fa50becd2cc7dad19ef1ab3aa4e4d4c56834e3e64e6f7916fb5c6b6f22fc1616cd18443e91b896bc9bc6dbe9ad236cf7f373d1e37a3efeea3fd518171d08853e264dc44e77a385658ee1f9fe95c764b7a675aa4a2281f7943dbf7af44dc2429331cb227f182ef0557ae1b60b2c6db1db6eea54ae72e3e61b4761a837afe983795f8d819b8a33bd78d40cc7bf8dadbe125d6d5453b525b9e147b577fe51779b5c0085522df4dad219d3171bb48c123de4a936e98082440e98e386b181ef4014ef33acfacd54f21cb42c27e32f814d63b1612b451c4a3f143a65b8d98ced44a601d73bacf7f3d5c4e75003391fbab28f3f2e363f16d220fe28f82c8ea7dda2cbced55d29b47560d9e13d684
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.
