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 3c4ecd31a8ea6943473ae567b1a4418a5dfbfd90fe5bc0bd75c3783253ce4601bbede253c37aee614926a72259c65ffb0af77ae9564c1a59bc7e02b41f307357541183b48670bdf1996bbf12c04105bcad6330e6bf12e02256da0b97e2150c847b86662f87f1f74d684ef24551e71187b7f32e9f37e8d4fbd94d3519c7050722ced2ddaed8b7a7c4fb4078ba1da937d29ba074619e9029f67b54dc820aac0da567c239f5b0d50450f60caf3de6ead282ba7d0cf4138f7b2ca4ca99295aaa92024434e064bf1754bf581640f11394ee30b0f344ce3e1f1e09232bd073fdd2c8ed5842c2d23ee07a4941209d1664432dcc98724462e304f1409e38d6716ca34149eea48b87603e4146036f7e6d40e8aead3fb92c31b4ecec37ecfbb478c4f3fe4eb3982561be977380bdc65ef7a917da56eafc304724aa1a40be05797dcea6bc4888510f12e29ce97a0a1a5415d875bf8231f8984f48d834960d07ee8a7e3612788c1ea15b947630eb6eaa61cb59746ffd621be93e9b03fe6db9123c115902963c5dc948b4bce3f078512996c62357bf1575b3907d920294ab32f9b58a6166a4a83e138ecc8dddba1807b78593efbc8f616fd01beaef89147238114ca1c6d4fbdea32a89966719f2c0bdf0121d04ee76fb7951bcdcb7d25ef908be419c5e462384d5416ef350106b0c758b18bf36a433fe5ce50459eaac8f8934b61af7e7d50270bac68e28bc1cc5f69789cc8d69cb643774b2699156fdb0c32f64c854a868872a271a100de4e921b2180d87c55b193f58a2d3d765fcdf8f42cb449a30cf2c632a1bdeb41bf8e8b12e20e89d9f40d6c48521cf28208bbaf312a6dd0f788cf9aaaa1e4f88470b17e4bab2dd308ad25e6f9207536379952110e4609f7236ed7e5f324729cc3f364387b29e5051e3af7809df3d20a77c27da850a371614219308941baa82c6d868615dbe1177f398ac198d97b34334da2961461a25756fe133db7a5b92a524b77d217489501879517bd6c267eaf4c4aa1c781b9b80665520fe927aa922e5c910e0832542c74447f9894bd79ff535020f32e038c1b22ed5daf1ddfa88165516b22e5ab778f06edd210ae3f8f2773fc582b40e4138cdeaf74bc58b2955283e55a4f400c7f246e570654767159d980a08fed2efe70be06ee4ba55be6a130f676233ff77e0b8371a97be04386a5beef065fdee0fad17029f97a1adeef0e98b44dd31d0aac113cd6907b8f467350164f5c6b6a1fe014fa0ee1cfe1a4ec66c75fdb4a03a5fa10f74b702cd8104719eb9e2b82f73ff31e6deff906220c6a8e3bb9539e62951c404d58d2c5c7b619193ee3e42044224134700b9d33a5e413f1e1bf9278cd44be2844a7035d0ef2276d9bd53c587c321db434e68c178eb649433414dccff0a53fbd554b2a1400a464fd2b38c6df1db5d85fc8f78467bacbc2dd3bd2ed81f4fe16303651e9ede068cba90a5629c077fe2984ba35ad5e238482dedab71903caf5354eccc62dd1922211e11b568a57637d3358d48b5b12d127e97ef9dbe683dd45dc2d11eeb261029ece7d8b69e947841a3c080868ceab0254880a68d5946f80a660d331545b1f38baee0232bcf77910752399d105b00a7645190cf8d5780c858dfb16ce1195736982cf39f98246fbfba41c436ee22cb7c9ab02cf05bee7b6ffc5c68ddd4dacabaac344b0e2592c310b99b95d637e644fdd0782bb10f9ef1da9f59e6782d925c989a6cb6403d3f22a6bd4c6e0a167f03d5c3e08c20cf6d7c882b76b3f49e6dec75a3fb676f1b7e2360a06cb61e16850ef06c1e61151a0eafe8c5218256a2e01f9d7d2ff6f86ba38a6c9c8762eaf84a7288b34a85200aa97c8b09921a99d4da806bbe66b3a947b4b40e4435689c1f8ae35756f7b69594ff7d73896f7b69b2cf3ad9a9d7f7c8018a848a219a9e139d81f7b2a4569937cd74c0138e1a2c25c904bde8b76ea52840fd6030602fbb60f9c567e10d35051262a512ae7baf5569c63f80be1a04e0a99015b9606e64cfa2bf7f18603676aac57a1ec987db9194562bd955ee71ab5ae1f7d12c66eaa232ed62d299932aa7d6607c401c0e0330bec5c61517f9535ddbf77ef825b77f3bb7c35213e676655569f52132265dc840c35aa21929bf59f8452409b537e8a99f85a03a6e4258fada4cb2b44e39a76df20dcd7e772099bd03b706eec96d2de3bc0cbac6edd39c7866327fb1a56e405ccc7726ff6b85e88cca798e126f43fd5e81d6628713702ff5ec8fc1
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 7b7270716613905ad91130a390a3920607bde515035bf92ee7caea8d2a1d43e0d2504f853ac53e1b3c2667ad10db1fca286d134e3ca6b0e51a3f0d70de731026a840331e025f5840092c9a7b85d260237dd4c8dfe39f193b963da145bce6e1e4e52779939e860d1052b5ed11c302b84e76a8c5316c933dcd3c723db18c6726699a480bb86725d26ab28022622e555ea1a587f93600d5c77c968578b9483d23924cf479b7e23b34ddef90f21e891f0e2911f40e1fd68e4683e310f8ed915a897ed36e226200e71ddb9af04b2f92abbfdcf72e943011681f5c37ea8aeb7040c2aed435346e8bb344b4469e28b3ac5bcba5bd19de078fa08cffd1a7724d2398e9c55a6574cd28c4c18b400db1d7bf4f53a8169c73076864ce053387f9bee120df491a56bd288ea9ba30fbe4b082c0c8cadbdef319ae3385780f0f32e56280890d9a7404cd33558c10d783d963c299c3c4be84d234ec838c5600474049c512140cdb72309e4c025f6489d5445a4e15ea1d9a6ba39aa0c33e3fc3d8b4fbb3bdc09792b53b6beac9b690df828076a5d40c190263f1d066dbd0f10d416223d2fc9f40243a94e3dedf229641ea030abb558c8f7b6a1a8d05272b13146c571c9f483ac403a419482822761ed42b54b113f735a75e2a908100990e8970a38a9d80f273f12888e974eaf71fa33962e134db6b53acd4e8243347bdc031b5af65956f9129945a18ea98ffb174b78c40364773e48c11cceec51b864aff7e6b1509d1f3fab91673a51e888d36daff02e7a66db06503c21538db0ba5c34e92578eac0e5d7df2ec536e1f3f7caf642e8d131636e68f01978489977c043e34579dd1fcbef8b8c18d0820b79147125377785b83f7a0f802e098ff4debc4ffd81701f00a15449b9fc639fa8cedd8ec37c8924c24fe09d1156a479a1b3e996bb5fc5479c1695bc2c9f9063ed2be440afe3dfe321b0c5ec6e92dee34be84ec73daec5f63e5bb96f498d4b9e0e7ddf7c82a16095e9a97a175c18b81244ca395fbced7815ee708277e28e5b40815da1ba6c39654f0e42157591e6a8373b9c0f7762bf20d4283b1e3d609d1ca7eb0e41fbb9b36acf05bbb1fefffe07c7fba848eebba4cc8df551e5ab4ce8f4fcb40e13204c5bf16f3d52a9b6ab9df9d966a712bb9389fe07fbfbd5fc77188f75da422eed63b5070ae873a65617bf43dbdf641f3fc39c0e2852c3782e633dafc8aaac28734971cf5dbdf98f75bf432f98e95fc7324726531ca4b98981bf3694df3c10b32f0a4524d9ab4ec599913624ca2012d5439f609ad772f8ce8885de0d7600aa49513a2940fbb109267dde63f93415d107e465fa59bec3ca332cffe4b4b51ea1511b8a0f28f11e9f579daab31976c234ea4c25ef876ad226a151d822e65a1584657bdad316abffe6239c407a77f5b4d95837900653fa9ab716ea44bf14d438f8def3b138cb743499168f9a72acfe0d852a6536412f522ee1e4e486cbe8c343ab146be6d166a9ead95f75cefc45378653c6c0404b7ae8ae532defe7d93ee7ea13e5d79a827353183eaade701dd2a32aff135c826b2cebfaf9d7fce66f1babf7aa20f26aaadeddbe9d1689de49c0305fd3cd709f3d96e37fdd354d1c8d68fd2fb9aa11468eb7e288777ea1ce3c7b78170632ce87e39391b9f78f9f94491e3df432e688f367b3f40126446d7a12f79785e85b2527679bdf21b735846d9ca3e00a24cb7853c0b607cad3ebf4c87a6f276321fe69d6cbaa177c83bcc81c5a2288b54f26020416fc7b7361a5f57433f3ed6516bf0ac7ae225e30d3f977cc77c8fe1c7168a5bb2875d251bfc5c4cb9610afaa798818f1e6e8aa556824e8c63fda76d2bd1447af4c7d0194326071a85e9deb674a689de8fc75456c2cf5cd07cc0bf34481777773d7dceb7db489a8373f062ad9db20b78c8e9268bda67208707e0612ba61fc9788cc7575d9a320639fb4e478cc43ea86272db1e191410e634b9932bebe015c8c3fce3a08893cc307987e57f13b6a00abb304f8f51351d655d15744ce46c7c178f0bc10596a1c365a8f37acae7e49fd5a294f8edf544ab9adcd8edbf1444f278ceceec7c201b622b75efc7ea4f2f3dd62e23b668094fc40d4d6ba37d3fb1d8302c3c014333dcefa6af2d22ca4c61c3f1fbbdbf0baeb94afa2c6a08f25a69e45ae16c6a860ab992f97054722cd859cec294bae2bbeaf68d8345bd7b8ea69a668ccf6d8b43ab7c672398d0aa437d4158ecd465cc70f25dcd12ae233b1092b5145695b7ea62a5fc29f0fc788d2788116be38991cbfbb990c1640e43a750fad63aeb0c5033f01715366163077af9a7ba1df348efb0a02266511de2075ac4c7a816a9b378ba393f38fed05fc8171e416fb2706e96b2c2c95652e615346d30c85091e81285616647b7f0ad5d2ecdcde17e0e71971f5c48df239b8bcd556fb11326e7f3f4b9464c65cc2e38115375e81b059653e92b373fffc8dceb25d05bbdbfd7e3c3b1b5aa54dd77e20c49be6c5828b1d0c49ad11b2ce7c1232c1d37bb772e8542eb7d82296533c966b923796f9db52f08b4c619437bd684b01c9502c88de3366ad98661d918f6e87822e33b297578f3d69454c8e33928712452944a73115859473871800c0c672cc9d7c0b7ef077d954b2ab40a0330206a30e935fd43741928d6dbe54b92223a58d6e4b334217bf4a644a7346c71e8227e06adc2b83c1a9ab657dd0ee861fa2ca8518df80c3fc25c810b43fadc6b2985d032d6de20ee12885591856e4d80443ad9d371be0895dc16c966db2222e89f231d0749c349e5d6f7b16eb8b39125723ef0a9c4424866532391e2f25f22c12f5a3ffbc7da832638aa2c513361310795d468670e9387af8f1537612d253065199220dd86c47fc02f32c11ba9102d4adbd5e9b9b778c77b2e182802694b8d6a4c1d7f0a236049f8503016f36ecfba6e31a8bf34cd5259ccdd0180a12396b2cc1c406e405935d679c455eba8ba06c634bad03ed5a44af957cf077ac8a38d4b004651f83659c0b5db3cf7857ddc935da9560ac7e97b5c09a73c9e8a2936350c3bd1e20dd1ad2601a3aadf6c12117e7f1dc0ee699c0e5d667ece6fe620b1ddf4871004daffa746c8fa86edcce3630e7b59b80afc1677d8e5213783a79cda6c96be817ef13e875cfa728de7038d5c076fd911bea5864452c778cb0be8e52717c14f5464235093959fc54dd46271bb6c567e5acc68f70ab07c24d1
Large toggles with background color on hover
View code c14bcd96733f33cb93cb8845f730ee5325609bfe71085d6759b963674d36eb8477783632f3da017fceffc792092ccb089dc260fb2b4436fe11c53edab3cfa6e8ace92ccaee22d422a715c62512a2a30c740e2366f9ebbc4234aafc2ec11dffbd332f26a47dd3a345362aa1dcd5923fa03c9c57eb3163783b37c147f456ccdab41e440886cd9f1024c9640fac16d194dbc50586d0562766631eaac623e5fd1e650b9c8b1f724537c70ebcb39d8a828065992908ff302e1c9cbf7db00605b8046f626225cbe1974978e32fac6fada55ab9de31be8124faf8fb97f6c8389c247e355dea157b9aa1c757dc30d026285d655dd3ffc7ae5aeb4f909117ad9ff526b5128a20a6e17d67149b56cb4e8dc7c75cbbbde4800e88995e57623c1d1d26f8e6181b81dd61577170302096d266f4a04c09eabb1eb3fc096f96898e1f03d8bae4d3bb1b36ac05ac79552656eb7e99894c988c53ea8af3f0028b5c06c60003b15613fc0280fff3019a30c12fc3d4245bac8403f26b4bbcabb52924ff3053d449136b24444cdb25b6a4ea201525fa5601d66c710a78f9ed85a9c36ea2e94dcd7cfbfc706eae3df28aa434f8fd2f8888fd770a99a39bf136b97161eae6620d90724e355572cb86e7749c79ee2189e624c1913642ca5a1740f75aa296ddc2b5d6480a20e6b44564a4aece7cdfc4a8586fa3dd641d48803bd195392a40be98975b049ea385497606cb671164b26c4fb6aca3735b1cf95ffe9a32d09dbb0671ec2717da9766d2e2bf32855e293753418d288c5a0d1132281a70864a705a0ec0939b4b54d0f8e94e8bde4c6f0f5c8ed8d9e3cfd5aa4fbbc6cdabb77856244892aefc1625e46f8b5296bc1f1dc35bc3c659354a3961a0ff2fe44a36eefd15809deb9cf984c199b3346503dcd63af595e0ba8bf6c9959854f14a945751e8f93d31ee9990fa8e44d025f9f659c6f84cd3bef645f7367bd597bf8b04fe42ef09e9054808350eafa3148e82a0fa4ebb547038e6f651dfa32c9f6660907206f6f9de23cf3da090497005f236c5e4d83bab17a3334748d845ac41f552e01ae166e36dee404dbfb8d433ba2bb28e1f565e6cbec3959d05ac3e89a4b64cb29529869b1d106128125a69722390162bc1adc0e97a93f9f569f476e28e61e79fefb092fd44c859db45435658de4a3a986ee659f07513f9534d0f0bbfd8021596bbab9f8ebb2405a2dc5086180db76868e3d97d16a4fbaed1eeeea1356287fd1619b8d92a32c94fbbea140def7fe78b74256169549f298094b7e94afff317d116bcb01ab436e156538c3f28347decc0afa4a88728784a16bc586a2daaff0ff84cd94dac0028b773b5efbb801666ae6bedcc5212f01d8486a3c705a4c30f061d0b3f400fb394a71da19ba77f2b2f28d28267178965f39055a6a29cd5416f01185fc3ad337e1e10f8de10feaea5b12051257fc9200a78c68645eb77c1f8a007176712cfe2950faf1c253a9b895fee9680574ee66ad7eab9df8e2dfbf4fd3d43ee0f29266cb3e555ca590a7e751d905a3418aa55d8b86d05b717a54cc7d8520e40f903e8b1531bdbdf972d3023bf2d19f89628262d1b72b9b01111c947d215b6b39b5affb804f63edd188275330ba4449cf94eec66aebd14178afe0f787d47e7d5b0375d09c32ea25ab64ac70ad559e178d12780db3e8e63d4f12c5e4032c4f98ac073b9d7381fa3a2bfde641b2a102b16e0f95222413fe422077eeb2bed8b98a4eba91b04c92632f0c03b52cdf410b64d0bf91505968d35d65d07be0ac5cb73287c56db5c8f5cdd810f320a8f27bea3397edbea158f30a14fa64105e73970cf7f395f2bb2f1e692c9fa098cc6443ab897857f588289bd9687f8ac5741ca7f4a4b5ddee45167c55e7cb7d4e540dd131291a2f243205e321ebd47b526a6dff254af69607a795b823f76e41a3d012c992062473ea6cb432197b9aef5aa53a342009425bc0bdff3fbf80fd6f1b914259258a2ad6e74902db1914974e64cda1517a3bb517531b2a2cf89331edcd951656bd40c9a3d0ad72da1527eafab66cf0f982a403af259b6c9d5105fb75b81b57ee16425be78acf12d94a202d8b29be24c63b8812c40b1d3bb11f22104a8075a91bea0b5a6904213b9ce6c20a8d83e239da8bf60bb22afbeb8fda67cf52976f7fe8dfa733700c73f8939dc49a2008b14db28a8d8d5a766554c5260ab3704e28fc25b08ff42c618d230c19a5d68c652e9d543760b6044843ec7f2d6466ff57ca10f4a9a05fc36bc7ae88eeb9b1dfb05b8451d222d79b762124257997aba4e83b0a499214029a76ae040f2f7baa0c981360362d3f8b36fb92424e7ee1246f00ba9a4bbf3ae53ddf70b15999c86cefa2e72184736bbe2ff508278425ebabbe8dbfe496fc19c424959f3fff7e2d115d2b7ab8dcb2cba6e62ecb84cfe4c54172f3674
Large toggles with icons
View code 63cbf5a30e8978e134c3c07805dd0bf25b869bfcf68407788ebd8381cd94e45a893412961791835bbd9c3bd406708b0df9c0c30e0eb9ba57470169cef43fe9ee372ed539f32aa08bd3ea888d63cff29d974595182db2f84b661d0ceabc1e444479923bbcee1237d485612541b3247824022d0545d58b3d8cb7384389508f0d8478356a030851f00907c91e6de3b1df59ffc4829c60bd44654af858fc3aa9f2847e8ae5b64dc83e0f17d3b7e9bb358d0b889ad759a8cea4354ded2074375d760465a23b9f44bfa89e189e1054f17d2d8a4fbb4035270ccd4f0420bafb991bbf7912d5b0e96f0c67487255a8efb8d441facb692da1e7618cf19398cedbdf2fe77116d15efcaf700bdcf66d428180ff1454fd634aa7e9870c014e8f1416322d3d9139e20ba37539ff477b0992154d65558dda3ffaaef673fea078f015fcb34d6332b6ac6584d18d4831ad5ec02c2583a1a912668cc8c116feb7d66499a4e03fd48d00413b0e86fe37434c242f375cfc7aed63685482d1b4debbc38d7172638fc04e00fba9d0e352abc66bff30333ad00eb896b1cd1bb2b82ac3cba79ebce6e53547b0192b058629fed99920288015f9dfedf03886bb2952df3035d4cd15db1ef7a5aec4b48e629d77fe1c2b3ad45a14f74ee2501d4e14adbe1e57de602e1289173fe001a23967c5fe9efc7c06842899a3b36458a416bebd0d16c8f9021709802c02953cf62f66cdcdcd689d0ceeaf125a4bb02837a77803047bab10e22c7584ca4818735ed95d9615073084992976fce630c13ee89cf11e8afe81ee3b90dd91a8b7d8f5695f063621f6f302d1a1a892d78f5368ae8ebd493ca039586f44828b1acdffb9e76510de08a611f6629fa20e793765f5500e3a79603d7a185677825e15d98593f3d95cb40be1a47eb790e05079d0d82c05889fd67d192c3d3d77efc2350725ab8d10c820469adf12ff28fefe4ed74884956d84976de15a4d361bd40b9350c1d178006e694549c844e64561069ee25a04acd22e0d524b9583daff29f77aa58442ee9f79bde80b5edee4da2900de9f10ef30058e61aa16e9225b20e7606036336e49f60b93cf88d4067f840953f6ee6b7234d5466a1b24c6d290eb054a0a30dcaee4da28e050985586f1cc8610697b79119509452350125acba24e97cd4db5f6656296fb2209bb5ea877d5d431c648473cbe4aa00067c6b846de0184ada366596aafb0f954ae75ceb5c6e5f8fde6140e828581c9f4a70cd817f5c2ed8d6cfb9aed3e1a69dd92985949d7cd1fb16c72dae0acd96e8ca50c129f80d4dff0c9a8620bf1a0a28a612ebc5ec6c0d7376160125fb1168fce9eabffb8cdd75caf2ac730f0c2ee996b58d11916b0ef6a75e4c4f02b8fdc7d40b3b476074f2ba0fe51f617fd1f0863c9374161cc7e75ba4ec7ee3c9ea7c143942475cc247e83e5bf6b489ab167a045d2d4c65181be416f0e68a207ae9315641abc1f5fd5b0b705473de1fa51d7495b5472e88bc04fc640f292a08cdcf85878b1927845ce8518fedf8e73af5bb6ff3af0b97ad14800d3703d23cb8fe44ec8977ac5934dcafa7cf81145cc9fe3ff2088c71c4747286ace4f05d25df77e16b1aff66fbb1b1a6c92feaaf715de5c379dbd1fc8b5f766550621439fa269d03195ea2d239834e8b237bb31983fb3ea4aba0365a87421d21632470131d9b5bd382aea8cef8feb26db0ecc30340c4e914be2a061ea0de012c95288e63fe6e8c00cfbb7fa7ae560525f5f8db1b8b8dd8cf674fa703d6a6648857f701f7e2224e549f70278da5da2a9e55fba416f8614b6c2384fd84cba07755497bedf7941094f1893a43ecaa086a13a8af81979764cf3f5cd55cfd1619cd671233dda964cc6d947e2346fa48dbec93c51f208ccb26b5883746b093ec9f3cdf5fb4746636de54bee6fdb6fad0aed8655a60445e1f876fb349a86ebd71a20ff5d6d2b9e6caff9b94cfbc809bf6a4c1de0a811c76d9593680b874fb0c5645963f3c3058674a1d762609d5b93d8db3d2d2fbc41c5c7a26857b478a75690fa96a9d1297adec9dec6f2c6d447ae66e298362a5b1eb9a1a4dce7d6a445aef75bbec98299a03804c7a7e1c034f560ffca98cf870c1d2f7c9aaa76620119b1cb6a324413e1071dbd3ebcb543333de48752ae6ef21758fcc8b32ee339ba221c621ab36ceb30f16127f834d2dbc3060feb0e39ffc2e9bf211d65c4688ee22df798a46f444d3f83c577ee478b94156a6663ed067c98f414480c9ffebb1b8e11c829e16b58ca5bbe50e2fa642c587a18db161b9eb09590f9457c5471c34b1a2b230d26b28ac7c24d1db22e0e195003cce5dd26125821f7bb5d2ba51c898659d4e62d86ce435cb17c62e93f12c26995bd751a435faadde3ec7024fabcb02f2dc61d92d219d5a7c852181e762298072e0f02be547a153a8f827021184fefba48d94e66798e6b5559df3b181893d98fa4edae81658639504200a56f2a18d370bea7fa782e436e208e3b170bfe572ebe8990412a9f47d1097837cdd7cd783a76714eceadb43183bad46564950bf3be0652f995c0525f7d4100629d448c148b6788701f0957719a0678e77a1b7c6bcbc40ce18fefeaa819fa5ec0fb8ff3d8c13459f7b4eae6fe58e2a9b82c08ac708a8ffc2554991da91747151a16fd96392e97dd55e130d94212dca317237f319ea1d3112db565478e361c0a3b659264ba022c233a429d2e9d9601f21b53e894978512197b489e2d7cfee29a0470c9f45c533b2292253ffca612a13f75608802700bbc6d3620c1e02851cb45fd162464733c17ddada1899fede6a35b4a08b5644945057cafd6a48b5206748313a15d8d220d32dd08121b22dc299e63b0fdeacab53ad93226fc78b1af2414e599a9cc90002ed842bfc69da6426ec0b0c3d37d106626f99bdb477c72937d9a9b13679359e8bec5168a6f90d1b18683bd48944060f2c229a0b6df04940203c926a2b27607a4e3f49de3e1123a61f38c653e93f4eebb2600f68f35cd6c6dc7168814ea6b9211f4e69954ce3ac192398edaeddc61f9239541013f847308a6738b96f02c3eb76adac1f038b92297b76ee3eed393cc118dfecbf5295e5c0b9ef2dec1a6d141467ad81d3ab13842c89fcfcd817d8676ab2e070e846dab17683318414a80f736685cddee35b7b9737c371c1e7dd8f77f445dd209a116a3b4230d884bfde487ccd29df9982d9ec459599e07f089e8062418bda64247c125c146483c3af9e321f8d9768bf94fa28c90adbe9058db34e3ad7cc495218b0791022ba6df1910cd457549e23675a921f5b84b1edf13fdafaddc9dd393a3b17d6440a653eff8a1b5fe2d0b309e629f84f2ad5c30114d0461067c87dd7b02de677485474ee4246e60883c101b87593902536bda0c92bd7b92ed93d41ccb586e6db45b4b383d98210272f8b264e7cf156bc3f54d44acef90fa8349b4d1478ef2d7dc35c14c1ca6c664d3a81060dfa6661ab46389abd1fbcc0712b4f58716d1b2d541de66ed5b0998251870709b08a8b27f6cff34f7c1776aec327a52b5ca28efe3a773019ada40f3056b7fd1f4ca69e277acc4a81b866c2dda93583ccb8a2a1a3026d47655d303774374760df856e3f31644c84bf716f169779605793be26af15c7a03de4dcec5ad3576bce61865590e30b82ca203fd0bf7c1b3b7b98c1a5881f92b367f91ab1bb967cf34a262dab58614f128fe2f1dbb6f3ee82a4f466e4a39160403a05e0d9d0c80a3cfc24768e99f81d04a728b999043dbd0b2e1577a6bb9c253ed1a17ee07f16f9d15599549350da1be8eb78257e85f2f55a245d7ad80d8161adca6aa67b5e480eaa45ddee262c07b5ceb4c662398bb422c17ad7457bd5f06884486a5cb7cd2795e2e28fbca923a6af49fa1a4dc541931fa888c880cff4c53f6bf9e001510b1e56be52f6b97b7b77833b3af2368513a7d281557ce8b57e2e84b371f965abcfe9059233aa97362b705c0e9a71ad02cbcc3a6169fe1ba4fb9bdd0f24cd81da4f1e2b3957556996077f44cd7c4a8c18dee10f4725f2c7f605a20ac759adb132e721fd2f4bdc6dd2e2d19e505fd125a4d47b6f8dce126b0c37f343b793ea75a5d675045d295159a193009cf8246b3d38c7250f267e384c82f3b306a1e62fd61600dfd602a75270adbff91213ca8fc818bcb78f33e820e50c8c240d76367ccde47fee47d635271aa19e7764b40c0dafbb908cb4d9c308d5c621166ad8e94d8dcd4329a4ebc371e04b8dfe6fd15ff5aae5b56a352dc7448aed5f4b0bd01f4646878c1c84bbec52754fd980e77b8a2ea7a962e7708185a57243b77a73f2e8760711f956f778bc69eae973a3cc038c22d5db878be6cf3e1c1687fd3d71b31a87fe067e21a13b0761e4586f6f5ae29ce1971d556ba02205dd1d13f9df1cbbe1745c38211711e4fe7ce0d5194d6303602cb3c88c4144b98a24a018b683115c8bf93640e78622527f61d678e03021c3f882321aa50632db06fb234e0fbcd5cac1f81ecccb5ffdfc325ff93db98425694358624857e0dd14ea6901224d9223be9b44211f559757852339bca538a2f0e1ba583bc3ff4b28d28b3b0e7e5be37dc995cf1a085c660f3c17b060c3fecd159f02f985e7bd9ceecb54e386ae1ba519e8c4f2faaabe95359ac017d63f0ae7d61ff2f3f65b8e6b6d9ad2aca0ec5e2c4b6d9d791a738e4aa8a843ab070d24387eb599bc7ffb867f483efc5eaf52b8aa78ac17580a72db4baa5bc3e4d2093c42ec5b9b83f98af3e4e34e23fb3e8b96834f949feef1dcf5975288f48f36ad024325e9a54470b9de3162961d299fc33dd4c7211c61e225ff64544c7dc86cdc54a1ed6fc73e836b3aa77e3b57f7e1dfe9eff8b7fc7784c454c25076e8126e5dfc2f94a16dd9c134cc3d501e65117ba58ba081a08e0375af649ce7cd0b5e92b20400fda98c207f99772222614206144208a202614d0f421048194fcacb7c45d01ef44b3f73a25cd510d235b48fd2cfa212bc58e4ff25f6fa3692752347d3cf454e1762a781a29995afb681c6640fe66bb53bc0faeb2a192f6f1d9ab22f0832b852c4ad7706e89d0967ff0a8427ed6f5fe62c4ba0ba3e6e57fc3fe4bb79bdacc11cdc9d2bb6525805c9524dc9b435b0c62bb20430b5633d93b4906a9b9eac3749b17541efec47e48e1b6ab5b72ab0cef494d142db750075431e54562abd1a1376dcd4b392a83e1e601c5b10795f4779ad4e182e8df7c51d6c0f6f1ca9087bdcbc57fd717f8d074356828dad31335f9e3551c8fba849ebab6c3e04b0d676f1256ca2a269d479ff1bc4f16e9c1dfd2882abd94a7aaffd5ace154b5e36fecfcb9b2618d65fa00f513bf07ed7bc9fd01feff30bfb4efb1e59efa3b9f6bcb13310bdefb6129eabed9f7767a8625b03b4a627f12e728ba598043ea7f977d8b48d8e880047508000208268e2aa242ba8a6eef9563a68d796b071bc5c0c2cecd375ecd1bd67b19fe7fe02e41e500d235e9a01dca32c38ecc537ceaf6473343e9aa60d92d19b5781a2a4fa0fdee52f3bb8c83d19778af346d0716bf39e963864036508a2bc0621cbc82ef4dc98f10d6ee5049e7f0f22581c6cd1ec244b6879fb8291ebc9ffda4cf5c4b2d41a0b154b3cbc5ba6763b58e6257bb47917b72ec38321b7478cfd116a9b7c610b9c8b19e6e803a1e557977b4c002614fdae4b38d0a1e5c5cc25f27da9933ed6627c9c248d3fe1407dd2a1118fce786bbb1f9648ad43d1eecb1b94a97349373b8c70246e778ecdc5b4115fc1afa69ebd57c7725ab16e44ac2d49988736d139e3b8aaa428fad35dd09ea938cb6b2f119861ecdf80f604b57ffc4f663311ac124f641966931f21bfd05e854b4a923947f0b77bc94c630f6c388f109daebb664d7ca7a52d8598adc2ac3df33045dd0496dee1226413947ebfb779c5a437512a7c103734997bfd9a53b9c09d6ebb386249e0a3d4f0aad1b5024e6a21f580368dca54084ad0b76d129351949da004a77a3932c8058edd1895f76a38923a535792fd34dd2993ae94eb9e954c5cb2ad0da95c998816fdf47a77ef29d44eb6f9e00aa820e2dc588d3a949e6fa50a21f9fab35478e01c9cd5024b5be0b2b6ac115157fa6e430aeb35873d8d873809685c66ac041e5a74174ff3fd1cf005e758d16d4bf6c660097b2481839fef6dbab74b976978d84ebad4308c86a0e84527255b79fd493b6ec4dc9bfc27e90268788ab264130c661e27d11619e23af793f852349fc983f87fe9f50ce920780519131ac537a480e573e2c11d8d02199d946aa178beb0cd7d2d04d41200ac8dbb1a221a189c27dd6214ac0c36c83bc6cbfffa4984cafb0277c0e47be5935aa4a217bae39353ec5c9484abe262a01d11b596887fed84ac449c8a20a18244fc43699e079891b9afb460d152d532ceb8d2406e13c3e2d7605379826a21e6d716434f8b9a1140bfe990371122b4f9961f4800cf45f22ebab27d40db48c1612d207aba785c47c12ac9f2ed9e06155f2ac3547925a260ca0bbb749c07fcfb0555a103f8e74dda4bfd865e89eb8e8482bf388acfedf535607c6edd1e3fcecd427726d83522f40b272d9bdf8fc10dcd2dd369e6a4cf8171cdbea1d17be89dd54e587f275cc6eddc847cde1e64acd7d1bdca7f1bbfe720e543770a1c2ed6b5c216727b73d4a449bcf03c9cadeca11fb9a51d0283f7e8de7833f1272d6a00f54233dff7fa36441c13ed5099fa8ef7347b5ec16ccae0cd7bdc87e4df3ca0bc9d3d8ed19eeb8a9fbfb3024296339c68d24da41e9a03cd754c9125e7054b5c47f2860469006a795b7fad7d50b0d73aec6d7a69d18f2a58ff7523289c16db3bf5c2a8f1b488637c362b3ccbed51547685b97a4ca5267c06b1aff85dbfcd863804521c808d204b88d9ce0977352a1d58883a222255abb4a2063053761e382e18d73dd49c1df56e663edbd914c453d29a0eaebedd71c73dc6b7fbb5229cbcb4617ffb46efb9c70950f2d2bc7bc81351397ff57c129d0ae32fd0ac4467b1fe3d8cbcb85d310f3ade02413e0676b180b077b1fc48d5decbf573911f611585244dabbc57ca71f6fcb09ecd53f7a7d3f4f580f3ace0a5876a5861c3765da8395039c9711795a295b1117e1edfe24723ba87ae1b9160635d404a95ee4b23897a519a6616e65ea2b937856798661bba6954b4b42216d5dc8ebeb00a45d10c51376f3b18606f5f254ca682ce3e42ab705378b5e1f1074fb56aec90a4d8a8a67f0a5a2104dd2d897ef038e415517b414c546fb976084d32d29cc82673dfe5d5355d08bc70c2cab768f4b23b79341fbf7c97f28101c915b2c153815ac507635688df3c4d79d022480cdd5f6564659c5179dcc6b5876b6e3106bf0c4f58b188b5907b627847c0b5f5a17979a80c273c3261ce421c72f07b1d059b3a43f4b89898ac01cc2337b69d247949a6b521da9c9549ec109617b86a367ab653fa48c575e1485de9926207aeb96f831a4b6aec9db6b16a58be15b9a8ba30fed1268d4210d0f6b057615737fd1e188290406786c987cffaf9d84c79bdf6c6cd61b24901b118851c365aa37d04c0f406e85110d0a3bcb554f23cbc680f1b34c47910fb3862e89bf36ffa8b18cf8694d5c43054f208493f0b4e6dfdc2bbf2860a85d4bae449f78939ef15c08802628b9410b9832537254f4f07bca3d1ad21dfdbbbdc460a9ca6ff6188ede6b4b0ff605ff073a1c483cd5760f3a22159d237b6f6c4a49964be77f978d32770ed3163f9dd9c44d1e5bb03ce8a5826c541732fe2e43e779ea5dd901160b9965e684dea04600fe57b4d52a31f3711ef612fa4a826a050ef5e3543e0519617d389ffa5383c79652e17facf89b6be74a8027f8329ee41d766fea230f14c1fe005cccc3fd55b77381d87673b954349d20746e23399c4c4f49f5dcddecf091b76b87a3ea055a43130923473c6761d34d8f6d3013407bcffd59bc7a90dbc19e31164bcfdae78a1d0f0001a85d0c001a8647dd5c755785c962e738cfbbc545f72923400bcbe92e96b69b1070708f386fcdcc521a7f66780209f42c31144c30ccd082eda125b04f4591b1005d58ca0ce08777685d233dd0c44cb7f63b29af082d26453c212acc84082e854f0cc914b6a000910d8b6e27eb14990d9a921701adbf60714b8285fe05349fa92d3710c0fd6adb1d5bef1544fec6a1bd78c2f1ffb7b8bd2adf5dc9d73184c1c7db274cdc87130be7af39ec6fa0533df17f3b21e0b2e13f4d325f68ead47f61f4849e1f5d8291fc35666cfb2090a9408156c3532a5b76643b33fb8840b0740bd6e4399390317579ad9dc5d078593f7aaa31c0291777cf9df46ba5ace5af66e0aad3d9d5ad30dd5d230d926b2bb3db805ccf813bb8d89c44d48c2aa65bb861ea26a9d253337b3f2084bae39630d4503887eee16c6af8c7679b6be3a4c476d8afd480aacd41274d76fae32ab52fe09679f6f4753c040349c0339c70958e18499ab3126157d03b84a68a873cc211e61f2fed598da2f615861a3c4b48dab3da4b7d716357caa58497851468dd32d711fe69e1f32ff254ae713265b4de7bc83f61668610dc4eec56039cf0298f70324a0eda7d9b1bfa90816f120273d419086daa51c4aec1514f49db85a151eeb3deb67f4b0ebbabbb7e0126faf89d353e9e61410dae5404a6bb346bbf8b8b7688e83fc4b4d7c32f6c84de1f80ad04d751a687225c5665ee5c90c1b4efc623a409e6191c23c2fd7273d7849dfb3371a1fcb997fe33e031bc848269aaa19e90f7ae0e32f662058a2062ef1abe782636538c1b9bab471f166f4caef93fe67c501164a7af4c6bd6ea63818abb4495da6df3737ef10a58c4ed8a30af2974233966ab9bbe686e5c3879be39dc042cc6afc22fa02ae0e3e5064ccd8ede4af16a25867c863bb7e0e39e83c9e2e125a98da6e0bd9d9bddcf0fc90c6a80b8a9073d7961e3c2aa7020d88b6e6ed31a84acb6d95a91548b1975028b7570f240f49526fa22bf6a83014f2f423bb00396f71856e9121c4503e46fa6a7870727797c6bda6ac79708e956c63248c5b64d9737696aa20b7919742fadb74ac669806eafbc7b5ae93ed057e006dfcbc86970e20563097be6625353d33fd3e5cfd9931861f3e4165dbc9145573835d1825bdef4648eb85320973350bcf3933ca275083dada240cdae8d9b7d0d74d7827bb4f87ce36618ff9d65df304040063c28718e72a72ecdfdc9bb80546e0b7673507c1e3f6e112525b2fb5e112207e64a8c2f7ab12b853bff8bd660b17dbfc7abb6e661dc23907a18dca216f09c77ed4c29e68d4dc4c022cfccdd32f400afbcdbc23967e6ab141adb4d2b608e206a9a5ccfae3d3766de505bd941fbcfb10b2ec764c2e91db72df61b996acc654836655c21c3fc19e2867358cd7d3cbf3e0ab02fefa7892b0bf5fa64704abd6fffc37d7ef4e271a46e7ee4b8d1f45c96f427f9337270f17be79de6890f59ee096f8354894d19959c7cae817c420100c7449db3606c2710758102f9fb0c6c63201f2a184d6884a052c1ec38c75ccda0e1188334fa5f9410c9f1c15794a44eef9a41c2fd09756596ea000765b8f65e5463e5896a48b8804340f57ba0a9e5dc4d7210951cb701dd174d4aa5a843adfc87e688d672495755dc13dccbe52dd3deb50d8587bd416a2610b909a301c8d2f07a3755886cf906222cdf85a1b52b5b6d8bc8e608ecf7489d37cd81a0330c217f2b73c61f5432fe6181a50a0fc41a04be4aa0a97d41f04a5d77f73745eff1e56696e0f25cc2019dd9155da53840ace230e825b64c1f8d729e3aef0aa2af28a7e96347b8c10ae6b49a4c04cf511e76b30b961d130f3a3657cdcf47cff2e51365a6f83692097c81861c6885432d8f60be8932a2f3cb7d9c4d01cde9706aaf2f8e81259fe4c85ca1099be734be700322ea3ed74ebc402d6f22f8f81ff4a1735750d6e3e666ecb3658500f39a382755fc71d6771db22cb711202e0a3891c09e13c6456ad42695ec6cbced1cd8dedab3b2dbea10d2c66ebf981773f0e51099a769f313d88d782b2182c3aa6f5054757876c7d495eb0ceea59412a063308046a2336a67236ff39b7a644f945c48cf2e2dedc19e7796f9eda89912b8f2cd3536ad609ae2d3cebeebc954189432238c1a49ecf89a3658ecdd3aa94d2d84996c974b8557ef3d04ccef87bcb4776cae695e8907d331421eecc27b1d146983668542aa306325559e5b827e956270ebdbc0acea4ab17b78652d54d1c920ba58f4d99e589823f58153b9479d7bce0925405d4144e842119d35f1a49edef000a29de04e752d7d4116c5a041ef0a2837205ab065825719c04fc36dcc4dab04d64b071c305dfc8d7fd5d7f8cfb09d5f48b5c7c375418d57a9420966356745c8db7142a9e59ede7d93a7f31dd71b53b95f7303adb3ad4820dcf1e467b1874042dffdddb70313ebf52083ff66c385e712f60b4797c5b28df69d3a6438e284ee6d0c67164e82097dc039353947db3b5d64d239dc7eda688dcd2e4aae4ae92aabe47d2ec39c77bab8a2380b8b12ec1953223367a10b51a5c1d855f90ba2aa82b6717406a55178b5b44372c20b2bdaab1aa017
For a simple look, you can remove the surrounding border and horizontal padding to create flush toggles.
Simple flush toggles
View code 0aa709de4b0fbd642acf1f8c7d163a5eb963699182ae9755866b28893fe011f4cb86b0f394b5d0053eb6aeb3a1668b921a61758c4b6799d92cf5454f307d40e60ba3d1cf7663e129fd84a867a169b62f99b064c4f90829cc08cea5599940c3165016bda9ad9780cfbcb98c666a376c6b5aa7e34a20bbf0852fdaa023560eb88c0a91b5166b6093813694bcc63a578604590b8ae443c9140ad0a3e85500bdd163ace05a1f5e3d4d0c4cf83ad14359b9ff3bdf384a63703c58229658c8551247c494a0979897dcd29c35d2e243ecf7e1e4c73a0a1b9b89bbcd5e7fb671cc403b8ad1bcece570ca2643a88efaba73eb5bc28dfb5b9bf998ec143e083c61adad1c393cf66ef952ed2747192427959cdb6c540e1f17b749e12b6cf4020fde947586e1ceefe8bed6fd1a172a4c422fe75143d68d87a397270fbedf16b63513bf854185d330a3c3290df64846340b8b3027b7d07e7b1230683d0513d5e61cc13b1178d41ca30468d2e22c0709ded2fe746c7b469dc0fbc2f64dabb18cf9f58d39b40efd4735eb3771e485eaa9cc3d2678f673ef511fea271725b8e016a59e677fa8568a203ed775cb6d9556b6344e2af45f9bf852f8d6e615c3782acbac6a1d605b6c16939a29116fce46a472df76c9f163bbddb78116e0afed7e3341a89fd766a505519cc62b00609f1b4599ece870ee9ebdd500550afab60a34c2a2664d9b3653c81e4c530e3c148aa36e9bf16fcead5f111b757986eabc80415ee4539c8c8e809643a8f8f2db2344725a7dbb0a548aad64d7d5aa9064da11bcaf761a34315ff990100db08eaf4f72b5382ce73a7476ecad76b2ca8832fc9679c420c7534e1a316b3c23142a87693f2c98c1485a297d0a81b2a95fd58b913554ae332351bf91e262592c7850eaf810c3f7ea7c5d89d9b693ae66cd6d50de16f2718ba929525078a5ceb9fd78ebb66c5cf740fb807ba757943a621206d23681d81fd272cb195d10bae0cee905c50d5cad3e83cac99494ec9d5d16e5636dfe03478829c052a4bb16efd0173a1e2ebdb180dab1b93646e8d59879af57b5f1bc9eea607726420c5b55cf034c74572f5eb920030bef30ca2ad42a68d61a097b89ad2824df7424b0885c96108b238bca1d7005445e6f0f93d1ae49db7c84234177501107df9deb2d60ae62658a0d7eb89b2eb50a9efc1ce9dcfb78b157eae55276d5756832a5a37a27343fe8786359ab49b1b40a68f5262d6c8a6787b28d74cf864937613654ca477220e693b8a854edddb133b23ff5b5e8e71d7bc72824389cc526903b5a0bcb86dc3ad91517a2326ce675f5806fe059a6d11da2ec614ad35602ca723e7c64b29642f2b07fc4ba8ac07cd1de9bd5ebe32cf9ac5edf9fd148ace3ac35bb3a14f3b3c06c895395869fdd475fa52b09fd2d11c9f24808d87e03ee659baf9df6c3d8e6be940179dcee8b2083feb95d2e213ca9b9533b0b1f35c92920a6321180ba6b7bda78c42558264c0726bbdca3286941cde81e28ca75f4edd3d55d8cfa02dfce017cf52a43cafc22ca8f53eb29a93c7ca3e4fb8ee2893c683fbfd67e1b5c654666f9f0821afcbb5a707d6460033d45417af6098a1147fac79e88f630498ccbeabbd34e6d390feb2fc2babc402ed13256526cab92262a2eff4384310ab6895515385911e54bc094062dee903d74ff9b6ccf2ad35be0ae00cf66021939fe1580f43333aa236bdc6dba1638a52af5e3f58d2fb8af45bba860391f094aa313ee57bf6072e2be4ddada4eccfdbacbe0ffc27c6dea6db17b6f79c73c5275caa6460e8e00c33ec8376a9ad169222bb254859e2cfad7deaafd5e81f558dc22fab6ffc857af294b455419d57c5a2a8c26dbfb5ba578ef02dff6bd3e63166d9bf6d67c5c2b23edb42577af9c282cd1e5e13a060928c5c5c6a42e81e5cd2cc623483634055a2cb3a9ac2276e589dcacde88d84f06ff899a8ce8eff84ddc457ce2cdd3497f683bce6ad1f872ee225cfac304ab35659ae85865f16e1650eb30a4de64b9e199ca1627e9ecb2f80e6861edca7c9fc1d75fd16eea3679d768a8b03d49c8072ae54f741a120af83e4741c0acf320bb4e5aa1187b4e9e353230fc8e5883d3fd2d57d8e281720f25dc789db55a115a04faed68d75ec1ec023c00eda42d7792eeb589f468fec4f8e8760abb41696e60dd8c40b3784fb1b30b6208df3db24b47d23bc6349e331e00c4e3a55eeea651fc8becc752ecac69faca8802dd072a428db36fce73e13b47fad464860794402d39a6d64cbec875eca0d1b087fb30e639840161c7c0c27c4bc991f2fd473e0a83bc191c905f290233f4a76fb7a5c5459a65b74141f64fdbcaf45b6ac2f1576f40b99759ea146645fc3c33079a0bcf20eb426f8bc024cf87742a860ba781e01c8f5db82d88404606e26c3711cb5d103d3527255961acce62fa8631583ca33ec92fc960d06c7942c17dd63accfa94c0f9eeec58505a8d0efe78a2a5fa3f2c60068cc98c629b13948f905c6115c1ba72436d4491414ac93ce8875210dc40a978cfda4a96be6500fe50c7eb0854e2a43c0125a9c000fc5baa9547031d04b411acd1acab854a7ccfa6d7d1591ad7ba9e2b165e8e7901f60344175face525eceebb60bc51551ec52bf2b446094f72b9dbf0ad1e7dc088fa4cd4087ef90aea25b3ac33cf4c1121d107bbf3118edb0f8cf456212828621239be78a9c6cb1db1eb34611008c8b869cf8f55d9cb3a02d4f4c35bc465d2354c146a9b860380f2aeb68935cfbb4a3992613091e5c9b28810d33196f98526a5dce4192598b35bde4b592eff6b1c76753156777f52dfd57e1f651c824cd97e440c6977ce722e5c012a4693419cad2a1b7c9882fbb5218f1749c34045e97bc132a110f00e83b84527773a9edc34a70ae1824e3e3910a51e7122306dafcd10bc099051865e434979341ae8df0abdd972d1ad76ef1ff8b446fe02035c8c770fb44e3147672b4f40aa10832835bba0ab1161d4b830303afff3c301c9fe4ddbc05831cee9bfa7de1a240f7e20e81cbc6b2766740cd64e43f22ed51b963e9763899a8b62f77274e4db8bbe
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.
