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 525cabfbdf7f9b23292ef98ecdc1258af890201973ba413fef31048ca5d98980c6f644b523e0f2d6b747f83c954e83d3a7073dd86a9afdef51bb217a0bbc118d405d048b20e1be708f59b825b333ea9041d7f7228571f57bde7b566cf5f729c7de4c897fee09e593d923b98970382471d27f5b83deaff2f5a4d81fbff0c0c78d81db73fbbf7424cc99ad80e4899fc09aceb3c33d83efbb0294696f936a6150011bb9eb9ec335ed13d0d8f83913285705b69d200e72849e2c67f0fa8ee5a8bf72da0c9d6e3b22dc32aac87084d39b36d0b0b5104ee9d43cd7a6ce355ead2c31d04c8d63439f3e96110bd139318dea4b5cb17069cc1b95f4160a43444c7227ec901d16a8f48ace30fbb4b85579843a747f820fc40532f321ad8b1201886e02e378e44e663ae14aaa3078ba3a8f9ed8252405f6ae7ea6bf7532433bb7ab4e6f78cbe25d8ab5d8fb3c6dfd0a5073bdc65ba3218a0b68722770fd184be9c7c35b45af1932de0c1ab8ac0a378600642adf9fe0cda206621582b8339bdbd359bed6691cc0fed301631ec133e1c7f054b7300ffc51c07a437676365564554c2ac6f30c32ab1452a8cf8ff65a0e0bf55e7b7c2e0668c792fd6b7f4fec32a314763e2dd097524632de17f3f360d31ae2bb590e2e76d7aef3b1d2b9633f7f2de8f91026a7ba3e3cec751ab815f29e90ab3247f2476bdab45d616c88f7982a6bdc891bbaa38ba9db2aa8bf7c6252812882b8779becd199b17dec9ef193fbedcc94a4601d43c7b0f1f0081b80a6b81d6b8468730981f02519efc0ae5e0e833a0f964191fa0732c5b15934abc46247bd9989ca9f769227e9fabd585c6972cf308b5de38a95af202ff4697cd09c36632a5bc8ddece841cbb90033dedc81f01bf78c6a31ca1beccf7e01af879b9822fca5f152260caf1b50c0c13df3af7c9d41a42ce4f51dc372de395848417c2037251d2760982c1a04c11f4d8c41c79ab3105d88186ada9b9f410732bb2556fff03cf221fbb328d69203efe96b846e1446d5c85f31c82acf128a7da4fedd76239bec9ac58ae5988306d490108d6b9d71830ed9083afad523ab14b205b902769d292fab525229f7c4398a4f048926630ab549b492e70ebae873ac15eeda04941d21c844461c26a7c9507bad3e50231da265e09ec7d99626db8ef84d3ea74e93ab1b0c5235a0c9f44046748135650b8e2039c69e4a0c1d37e39d941361e5b2db94e5dce014a4a219a42c29d3d60876a33f2cf86f41569d4075aeb930073bad6223beceadcc1859c32db5a1949f422817f2141ce431509b3fe3a7b5e13ee0f54f471ffa17a9524de5f0050e64fe2679197ff2f246b276356da486dcb5d2741d7f0bc1f30939c0169d2434fa30ba1ee2fd46fdc2b310c436c71ee1d003cbd596f91141662886b284fa6aa5f39ffcad246526773c1e2f0c047aee9f9bdc005e47f8c3a7a90482706205b6fb4614f53e9f9638fd9ba212558901544cb70d2fcc7f229e9b8f9e21e44564d3cd80d77593278e69eabbcd06708632965ebeb7fe5e56d28009fb41a7aadf09d59283efe847d9d64d724817314d8665da586cf08d58bf1de610ae80a5e169ab29e2c976f84881e77b0dbbb56a3ef3e846912ec52ea4b3d1dc622c988e9cb0fdff4059d129db349755f85277d0e893c40630c8b6412df2f5ccc64d99bffca47e696fe780669e33602ae8859b9d10268d55b5a6d847e963e35f282ef592dde2e69dc55ed2a5f08d9a72bc100ecb833b72eb98a14f6b580694f7d14060d6a032defdb9027c67b52f904a56afe1985b736f8e1c5c28bda4945c74938517ddd785b4bf4f95179910adcb5ec67a62bbc9d2cb997cf7f604906d5f55d4eab56351f6e6b35cb1363c1a4948f73d6a96962e5b9ef2ca2ff6b633dfc4186ac6a509ebfd2df430a116996c7e4e30f869cae3fea4dbcd0f8737e3f8d900c9319700b69c317683dbefba274c7ab569f0e9025400623d20c7b2e6dfbf75a1c96608a9bceeb8549894b13c890b12f912a6111c5c61f4b805cc9c7da6d53b31450dd4f89029652b40f3b47f7e031206acdbe6fbb39d89fc581782641c417c1d7fa35b61194ec149384b6ef585f3d84afcc57e768752e20752c94dedac2ec12273d48c70584bd0b933ef665bf339e2763b7f125e55ecd8823b964b1b4f3d7158688545ae7c8469d0f80e1caf0f208e01f6e2e6a87bc2169a5b934797a89ef9040e6294a260b31af6748443fa3fcefe6f2be55a5d50df3db46dd060
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 35274524e675f96018d30e78fe47b274f93cbee994bcc3e828ae2ac315b8091fa7f6cc67150f567a856b534b37b8c6914dcb446a4eddcb2b4868689299d7b5279446e0842f35142ef8eeaa4dafc3d84c691ed2082546fcc68dcaa567f5d4588ee503a42ebeb652848413ab8d5f08699ec1b8d7457206fcb152b2e03b02eb27b7316ad6b91208d7deeb24219297c6047e776b37f14555dfaec66032b75110bce2972631c08f046971c6cab5ca1195081c375e81555b22330ce19d774a462150c077594f36b90de9156b972a3b95861fba9186182266f07d2a4ef1ca96d5c82f51139582c4c8633f0636d5ba9fcfe75b77784d78c0499ac1a92a13eb577490c2a7c1978900c12954b27a6c63dd906461e4b8da920b8bdf171a3c4f2f2a04364aa2e0cc7776a41f25cc9c2cb756ab2b94b49b37ee0ea71cfd246f36b7f0b544429cd7481875cec3654b84792f0456a4498550d6d7333a2019d879891b4e274b8034112d1e0a63e87cdc237dc54de0df2733c1c168f8c7b8e6b881a0735e5148908660f620f018cf21995d7b886891229eb8677a40650202915959b47a6a980bff33b39f3513c9db35fe32842f9e1aea588d03b17c560da05033139fa1ba5d87c2835cadf95f53f70c1a96c2206d3cd3561afcf314c3ecaef82643921d385f559feae6b470a45a8e25b4bade5e5eb643b74d48257804dad2eeadef4c54b07a56eab390a793bb97c643b50a30697caf81c3e941371e90f0f909ab3aad3ad04e51e5b48793dbf9c9c36b39c96c59ffc9bc04284edcd6e5bf46f03d0a03873e63d63d1573b8e6677a7a10f08cd0c58b4fe229e06cef225c138e9d920f136c666d5b88d1580df6971259e1ed7692561b0f91373bc99193521958c9851713643f453709cccb7334ff04a56e92e1ab3f81afc6d8b3c91aa0ac818f6ebaa59729616bd49e40162b95453d2b2358cec2aa559a5c0bf26a75fe9311030d763bbb37bffe0f3cbdc1bd19706a49674c74062d6d4354f43439ffad3529864bad8148a3b6654fcbe02b22d54156531e083fb2ecf29864b9658c1b3fc9ea50741c3f78f9166c5afeef6cb4d332d1e6d294702a34afd265756e035ee8861d0a3603965590d6dc3087c5909bb77532641b9941b8226faa03c1c5fee09fcf85db0ea7e57d3989df628675552866af028ee5b497cffe88bb408e2d1f781acfeb5f2690dac1ab154f921312687f510615f32575d7be125cf689e12785b2dd82abe7dc6a9da250521c2fe54ae51a1a1ed9900f9eb913f1814e089cb7c2f03420a651c6f2422984b9ec6eb514bdf9f6a779d1c3a2fe940fd13da4b4dbc9a3927c965b980e3518c820287a06897e420c60921c0beff4b2d2594c88459b4b572e156892edf6535649deb811ef90eccd87b0e2237d3e445b9e4c18c7df4168feb7387b53ba805bbef54b6852cf94128e02ef62bd6dec785debab1a33ad556693786df687ab968c27443eb1070b5585e40b5fc2fd6f334e7d9390441bd68b07045328b706e1a3520b759111a1e4a851441400b190c6a6db0c6ff49714951c0a2c44c5eac9b521689f4a4c32f09c85b1ab4c0e042fef8918523826d3877d72d0e78f3037625b5575e8d55e68713ad7f265491e6ef5f93c1d7d9b05733c60cc8d3da221cfeec441027c9533d4f44be9a1819add483683f9ae31961715d4882668191b920ad0fa711f807302c06e6da5428181feaf250199bf9297b129df0ff330791e782e06684841b39d651fbd0abe48c0ccb3e681d053dd48a07d655cd8edf0bede0b9f24a32faa936fd24eb874b8a591e43193f5d5a66989931fb0574d165912169ce584e343f9e14289613321fe107d330c3649d5f063720990830c0fdec8a64250303c8e214fb2c7b1424ca4b00e669a6b706b6f3019a7151f7e0aabba9a47168a46441b6b27e510bab46759d1de66779f3cf1c87224f091054008157f487f63c2fb64eabd9f89fbd8eabafbe534db037e3f23fdda16b4f1e1ed5db79665eb503974b11d34a66cf5a58d48ec953248166f89fbcfd2f5091278174ae6a7a48ec3b70c69185403b024a6b38f1fb5fc4aafc2d04bb6ad91b66b2ea491e4d3b6cbc542c332e4c779034274b66c06154afc67c184aa0a131efb3ef16bc4cddd570815d89d22cb377edbc5b21341f95455db6c3096f588ca536b3fa51c13435d410b5817a11214a8c8fd86ae2c519fa9b77509485f911dae6978f75de26599c319b4228402362b40b36c539ee07eab00d5f8510977cfbc647461c08b0e94644b8187c8d821500a4d2b3ab932f46df563fe6123e19d44b15376eb6b43d707b2c449e163efc3398877fe43ce54cfd051eeff4e34f59a05d07c52b623a73a187ae3d9bb38b1df74188d5d0a766680669e0e55d01f6a5f70ea7049e02f1305c9cf45910db6193e2d97b54c06635e43619478c41a7e3990618abb13b79f4d0c41e520c0ba282e6653350cfbc3d9dc02f84390b42be48819b9f3546d5b95d2adc15d43823fe061613062ca2a0daee22634494023bfd614f4c8e1a80924ce38371cb4de59f0632be664aab727ca720e3fd2bfe5464f9b69f2bdcc8e075c4539f68934aa4a650161b48f687f0697ee94892d16d986006167f02eab2a8bc5c0c00fc65c6b1253ae59c88489485ff9229253e3c899a3d395fea9ee8bd85187ac0636e583e7cfea578edede37ac0a1f666e7f75351968d358c7eac23dc7511fd2179d6b820f0fe59d6f2705440b0e516f84ca8792fef9ecac98bf83ae9f55406d0a7b574fa90615902859af713be449630945ebc6cf1003999ca0b7404b8381821eead526226149e472c73c921a99ba44577e8c1e4dcec0affb635e356048ef3f7875157c8eccf22c201fce31420c93ba49aa5c104b7becf5ae80543ea7f99d6f4bedec7ebf98b2beefbb4b6016a1c0e79826716819a13b4c1cba21065940cfe750c46dedb37d114385def73331797460627bb84a67cf6445d20149d3693d0dea2253f3531f01a814e419c99827535bc65bc87252f725ff7ec35423afc84dc5fc04dd737f78dbf5352f92bce6660a39a356cb7e6cbcb2c7e4a2dbe27a71e095db1a6bcc4dfcfcae643b5c4e45b881e3e2bb17d8dcfb592efe7dd0b069f7f7ce17358112393dbb3edbb1313e693d02bfc7197da0aa23efe311053ac8fc2a8730f5a37173168d8943b88454b9b79e775ceabb080d942db62313411207066cb5a5ff76ed5afd49
Large toggles with background color on hover
View code 6ffd11c127f2778679dcff16f13d7b6c3ef3fe0611ed1f6ab2d9068c07201f0c1ea85c90c2d2e51a866020fac92421803fb4e41a5d340c924c47659cd90054481a92c201d6de75601a13c27f51f09968d87ff7676090339f614f96784d3a4454270ede9ddd3185750e5e721e1e9499523236114fa35224955a6b7316a769201539b66c8df08a0ff84f5a08b351d699404393827a1d754b2c1c43684949591b212ef7fe48eece6c4113c15a0de05f80172339d61cd158eafc0f6a130134aceaac1f7891121c3f88d8347ef9cb485fe2819aa0651f8467c27542ca25cffd51f2863435ace00007112c190c5ae8e11cc81734543db7af4874875c878aa9ad0bef9621dcd905f13d2a7d715b09d348d3c1a12376426a55bc8790bb7ee8652ca8357a9f73fb28b6725844cee8447b2e5a3c102e0a0b595b02070df412e8f3ec6f76d125a24052d5626e274ad619b3fe8719616caf1920705176f1120eac59867cf01135ddecc9c86e0cfd69b147a755e9a86e6e51c09d96f49eba1fbd41c6b442e6aed25c4a72836cef4e38dbc07abc767ece8dac2a26e8b9eb708815afda4493c56643c1ffd173a6844543a94e3e73ce2f417394b748420ecc524c7f5b0caaa5b4f001a620e907d23f5c2d0b6ba0d817cf15f3c9bfa6a53484e16369cbf54a75a4dca423e8bc3988480734b580290beb0335182be6000a728728031d724d63b4bc1390e76ad25d565ca5662728df0272b66604ea0b7b16e175e2da198ebd13c22940b169d714f5f3dd1551ac63a5f218707d0a95feecc29fbb279ac6dcb16670d383196df444c7662092bc2d165ece79e3dd86dd4284ed4d6b23966ae529ff9a709de789d20248a25bab319c7cea179c37d88fc6550fa0607a612d0840e2aed6d17870c4a20a8a74fe3dd23de6aeaee0cada867a89022af0009ab1510709f9564734381d623d210df05e0ab5f01d582490e8afed6879f64e15cbfd7bed2794f7ccecee895cff1cacfed22627cf785c710fd7eb3bd7a41da2da6d1e6da32ac0ec3b88c0edfc07b69111a647265c299cd1a94ac727d9ed4a4995d4b78f6273a4dff6072a100a7cb61849755ca4f6b8384e98d0dd95ecd4a98a7a6a59b17df294d53c58c79f007d54b70a402df94a284973e5d225c31fbf17e740b94c9ad4ac59e37d6f9e6a3b7ebb6844a8da5fa16879d1f83da3faecd70e5d39129fb3efd6cbfb37d383ec79410a6bd14acce1bf5447f0e32bb28b83c8d7853ec1a91ba5927ecffd3ebe4db6d9485da378775d643ea51f6fc3fad289e6bd943dc9f78d3cde2fd22b28f5217f8d03b48252a8ac57354d90a36cd1ab5023a196f15c617e9ccad2f34dea0949254bdd5a4eb370372005f876d17d0c34e6088439b8a5ed34912557570fe214bcd47b48425524a98c8e1bfab823dcb8a1c84b71eb43dc39af0f5e484119b2dbe8a37c3fd9cc72e5b38314d44fdd2182684ec91fb8be9f839475509b66865f90e2a7fe9e19f0b72858c85970eacdb875e98ccd641994e6713181f5c7c355e25dc5df16a459ff38f84642ec35dfa9b6f5abe3934d86a9870ceaa75ca4a4eb29e1008c7f9dff4790e9dbff0e7221f5181f0e95f1c6fd0f91dd9df3f9b1f236fb173cc73d560e4ce2753805c9f7f87723e2a546559d6f3329043a11cf997eaa148b9c1248893b603d775f44ed9b93e9c591d4a8657a264f0cd646c2a9142ffac97890e00f87b92c57b333546131a0e897eec766484ed73fb69d539c3991f52fb8e4f07efbbd72670798bd0912f7e8d0f36ccd13a44e0a7fa5d4c44684098b5e7970427647579325d11f22d3eede642a132607200afff965d035fca0803084cf1db6fba4c7eef46948e3bd16796b656634eb172a360b5faa11539ed9ee671125b0046cd0123f2df932c62a86390fd3a7b484b4f45a60d2da64816273790490f2f957c7e89346216ed480d3355cf8278f1b966ead78654f67b39ce75b3bfc2ca008109c3aa99c6e584adf05dc7dbcf78e8c50900a82140b7421a349d9e7f230aaf46e1c02d9a1fd3586a9b5abd7338ea102e4d5860f3a2c3c609d05188ada4616ca162f5995a99f7494e7f22256f641070285b4003b8db94bca6b4134b59806450a6737548c63f29fc523b48dbb4bfcb9d5835be3f30cf6113c12d063a273cbab12a8999ac51986dde60bd35de74e32f1bd376eec1230b6f297c6bda60c4d5c8f29c22aaf46d323ef8c2aa23ba9da6e011161bb8c39ed5103144686098058ecb45688c038fc4afb09958ab12c5ebe0bba6890680597b51e521698b30d23c20d0fe7deca5d2213fee1bc48360f28da661ee8b65bf0c535b73ba867cc7016677f7523d79c8f622dfb81b456ee107050392c71be33d60b8f2748af2359e65bc91a183648a2a3d2ea789d9501b6436ee1941cf9e59891cb0a361bca5421f3f4882deb6b
Large toggles with icons
View code 1f120697f0990e524a18e1a03d6d3a48217f3b211d93baff073e5de8c280cbf3db5a31df1514d017a0f067585a37ba6c4cfe856879ce7fd780655eb72df5c252c84f247c464163cc70d540f8cac12eaace71f6a391ab7bbf6b929b035991db93b52e5d3c79fbaf04ec35b7a8d00d6e30908d3fcb26b0870c0be67a62bc8697b2735df3249636acb0d281bf6484224d9b0131b16d81781907e2e1b0caec268e8df77c6861cffa1b39ccf48e2c32300324bbbdbdb1d55b95f4476325a596cc1568530dce274a0861deb03e55c59c5c735a56f82442ce8b546f1d1d7981238ad0b3a52084f8dd99a087ad49c81fece951beb3bd3596cd2ab3b201e318ea03ec8226dd93a3583dd75c8a46f03764d433840aa9c6c436e68d56cb9c2955a9ef5f501fe94c7e3d303e9ac068bec19ca2c350037d1c1c8cad6bb738a6b347fbb7a6c02cc3c3ee4d985ed193e81dd9046e6e3ab2af45f0c2738a410974981303bab618c26b892ff02d204fe7b25301480f744fc275f21ed7e1d930510e2bf9c7490b6fff73f9bebb2c9672db1c60cdce75e4d32dc8e33bc525ab0d401595c66bbc2af9c08b5b0bf6082a684ed9201a527053bc3131c4ddc0069c37f9f5082304ccf33a036312d9d27af5be41a8b29dd01f7dd41edf3373512739cdd2bd35d24d44922671b51496b6b3d015cbaefd85268cfab2430e7fda713767c3806fabe369925e27e526176010609da43dfeac5abcbcedebd14a17a9ebe6f7070ea01bc17bee3e1a6ba547c2ba2725ca2ad2fe3ce54cec0e64e0f9847f52e927a5fa972304d99adc80152221e6c8592c18676e87cf84fa52d557a1cc370c946559d46ae07c20aa8b3552a92475c6a882b86b8b742838d066d797034a859555f496acce5048e4e02f5dae37e2158fe81bed5e8ab5ddd6dc0edf76388852e30cd21c47c8a5cac2a6a5d21d4b7cb532f4c7e66f5e10e0913c2b9644acd8c910b56d08aa1d679a50b518dd17aee20ae2aa5641caaa080dccd1002b3089199364c4063b2e32dccbdd448aedae3823138e4a505e62dd37bfd5bc3bdbc2afc8d8a5c446e9da16278a783e62b3404d900f4e6606ddb935714c064feeabb18de9b108bc8d25016ff6360c11f1684af90ad0e082fdbe74ad9b1d69ff96ea92b63b2bf15586869649cd89ab39adb39e57ae7a79401238c5f83114beaac6d0e9e4cc3e16012ba7ee6a4bfd26297c5d23f47f0417c4de596df7a940d45af5e9ca6a276e0b8593a27c30fdc2e05e6b3f7d622e70f1bf3560ed85477e595dc959fb5834f20b5710cdff272c7f46a1e13190dc05b14c1462a63ddf92d073de464528cf18ac6e596ccad224d9a49dbb020bb229b5e321e8079282f57cd6f46e0909089c4ea5a26430eec788b1a16d3f6c362c0b6f3e572a7ca79f7906c65bdb3cc6a18bfee90976d45b11b7241da37f108b5e8bb19afe958508e2a12d9d98caf44f4d08806230982517e3cd727d6a94c688323ae35a06bfdefdb2a3e674750ccfa00e592f073f18bcda2f66750dc546ce2fd4ed959260fe77317e60bacd5e29581fed4686fcef9015cf7908830e56890dc1e237ffe52df097cc978a4f1517be595ae8ec094728c2dd1cac311632a55d32bb68b3b73daf10a24e6fcde46fad614fab280515152658c25a4ccc0fbd7af0683d76fec060b4c8f5b0db9aadc140fb0ea2c3e99867da367fac9ed35b588972edad10b02236d382f9b388aa3dffd6542228124cf6d2e5349796fedd54c595d97c3417a798229ffb4831006ff10989953f43d0bd2da6635611bbeb8be32d0a85b13a9cfc24f795951803082bd8d697440009d6ccd99e5ada2423a238e21022163cad2f3dcfa45ccb106665e97fe5e4e5cc576f370e2bfbff4e99fc516d07eb4b79d52fa9fc14d7fd18850ef5915f632c0a93f611c34804a189e0b504227fa03ceb59904948271d88772430838eb3703f6fcbe562eb6eeb7ef8f0ec71a1ec9501f8521e7c430961d7132e1de05bd36030c12719fb84d10987d926873753ebe652fdcba2f39de9e4d3cbb69a9ba7540a4fd37293c2de544b14afddbd80efb773d63a7f08f30653bf3ed929e384b0da6d530580127988a0abffe221a3e24b81e9979a89d1233589e833ca61f06134326866451093eb8f05baec0359ee4757cad2a6f821f776c96f6ad59a2982a94984f18205fd481678fbd1a3596e9282bf6b83b109aa3ed8c34fa3abcac619aa3b09c76bafccfdd8dfe0161d8cc773397d74f207513917bc5a6ba09f367ca2011469f912bc0ba0324031416f5ff154266bb76756e0b0d3e40f3dd8604fde2f71bdec4a03c71d41ce4b58487b01f385608f1693a8695a0164b1ae374be17abf2ef81fb86d81aef63f420612db83d444434604b125ae50778ebd46b3939a15493dbadbbf970840706555c203ee4a3df1dc46fb34978c3bf3177018fb586f407666ab12d2c56e24b6ed6f27a6b16b96a55a50de82bbd0ed01d80c587c8e4eb6ba094a551098133ceaf51372570c2ec50d490d7f25f34f0750193fe8a501ba5655dceae0e582103f3b49d1f3474ba5073023cecf3ca7dee5d3f54dd3b0ac59a73c17f7804d6be885b04095739db994bfb50144c0f358787b44a07169c4114d1b00444845954b14b7f08d692cda87fb8821ddb73ab6a0bc9d6721154472b0f2ca0bab750eabe6ece1c61aa42e649aa2e2ff87f5974a7ea796a475df83d12d5b4981ee6ca2a0cc954307ba9d0d59340185aea56c449e0a23db10db69a660f49ffb6b8da54a848c83b765c2175cc20aa5da6a63372bee4c26f09cfc10459263e1b099d219f92ad8452b84cb35573dd5fd6349066797ba241f2ed21373d824207e86d059fa817bc9511860d76571ae789ac2c8ca842837f3cfdd4f6fca1f4751a9a6ccdfe7223e495abb98e72c185a60470f15a62597a27bac26d760633fa84a7e67feeb90d1f0af0662da91f7b463132c97ce20edda2fce904aeef642af70d13ae25ccea14acf34b45c1f7a639901a6e70ffce6c2d5762036240dc91e1c001074d3225c68a01f82cc86da83ca2b5128a690222832cf45ae25142edbfacd1b7d13849e344b4a6a69257169d3729bb32f5c4755750eb0686f39618424d5c44a37ac18f8ebc62f5579fc0f7d69c7dba5fd05f2b4dc91032d80e8cb0226bd8d2c597991781f67904ec639b10bc56eb1719d0a3c13e82ee08a7875b45dfafaebe29e382feea6f1455c23a716cd1c81d0792d65e54297546fde99d6b1ff9cb2f8e1cf2a590c6950d1ada0967eae54c6018bd765dc48d66e1c606d77d9daf59cbc301070dc0cd0803e78894781ac4cc2035f7c0651521b62bea7328ab473761182b5b9d69ffe8194df122fefd26a60dcf3699485ced4bf05e3a1c3984783a45edd015a97b35ba44316c965cbf1ad4dd02a02ffc201d31d70e7948dedd24888f58008ec10494e66c615770e926dadc5b3ae0839545951c09e48e54ce5560b38661e1caf948437f86983aec5387216e149debbc56fc341e8dc81d63e6143eba1a127b760bb0e16ed668895a86241b27b6a3da5054d0f14ee892ea89346638ee2f65b16059a914dafc95933eaab354b836a24418334878702991e9e96a60fe19cddd3f202018a5d86d46b3dcf218c999a45258f698ca1efabc8e7d0ac6fb5ebb9c21bf73695ff5b87bed600453476e1997f5c653fa98ada9248d375d5f6c6bd04f7a094ed427e89bb35fa84db061d7d20b9d03b4d478597209009232724e185c5636e758fc3d04195fe7c75895fae45119b6aa91e3817c4784c0f8829dbc3f9d97b7ef92e0f4bb14841b464cbf223349c9463ef93934f43318f5e051b64cc13b9c61130952798bfe607e0967df40c46c8d0f37d26c5671ee40863e71580ec9e3de09eecfea6e3d86835c80d24fb2af4726c3a328f8d704e8a945e9756935e6335e2d31351ab967b501c8ac17a36c50cb9e8a8d856aff140a8b4a82fcc440472579abdcfaf0ea462cd3e2290ae560de7a02ffb80cfc9b26bae843e17bac94a3f60158261234f9d9873e23539a852f0152dab05c4c345e0c96d2b75f06bec426bb0b56fd11ca3d2436edda4a64ba2105d1439b84d9b1d0dd919045bb8396cce6ab0458b1aa7f43bf6621565248cb74be994865dc899cc946c23f2f0b2261e7eab81d6f6f8a10307d89c3b03a512d52db46c592a5faedc0c3faf7d65be53a37a648c20d0573637b433488cf3b24660dad5c8cc45acbecfd80dba865dcf32bb6bb5143d0eb10a4363d4d2941e127b2940e0ec8da65e3447dc8f2ac3c5957e779dbc070c7c941bfce9055ccd66b1fb7cbc41e439a0faa4fa5c70456aba32ab54795d820173d7e607146247915e1bab83d823418869c3a83641449832f74bf2b78420a3e0e923422f536b6b129fe5c62084f4d408360826d522aa06125d6e70e1071c509c9ce04e8954e214700c73c10bdc7c2fe13fdd9aca7f5ee29c36c9cf1987bf3a4a21dca0345c21570a9e8c377352cc628e73c6a26de6d467d91cb3a45a4fac51edcee427843f4434986d73b01f82d1eb6690a5f9163f3c17e91ca8273a8f9c777153386daf9a24ab87471759641d7d23ef3069fd79a28745570129ff957f5b603c6e028454dda4bc2b8064a0df739cc31208cf03a6bf8f4b63638eb9c678ebb90b67cfa1b3b21c84f746ff01c8d0ed62636a530f527c20604475ecce0ce20404d77286d70b3c9179534ebbb01428499869fb56020e2090db282f10ad27836c8420781ebaf912bc6f06dd808064ce4d4722c4cb5aae2e114e75b6c72785a9f8c720e358d0f1c2e68dfaafa7872650f9a520ec6c7fda311ed371301367961065096771ad0f699766aec773df23e87a0a1de7c5b7c063b9eb05dde11866343d398e0f3114c409e77eb6767ec87966ca5ff297067416818369061336a05ff18d7e753e6f7e2364484af07bb0d91abf52def2b751a65c832041b23df8eae5b3fb8b744db160aad380f578e88d49e83fb662efd722eb4998c478ee8c5744c8141cda8e29675805f6d6d336415b1bec183f252563f9e9108f34facbf02d3cb37329a795c31f2479da3e482c7b91d62cb3e498e7e171f75ec6a6b4b22e77b662825c03f36637b4ce4687a58cf128cf19addd59fe56cf3fea54efcee0e1315e956aef061845d3f0f3e67f8603dc94379c5aaad4048128e4628d2669b440bb665f8aaae5163ab8f07392f31fa6c9061cf39afa479d8b6676dfd00b7caa43ff98c41032df6550550b402a4ccb18be833fe6683a7827f8bdfd03b5842b24e5790d0b64adc0c481238faa2a78ce7621c5b85ffadfa375c219c28f6265c95cd8a851c788ed9f58bec23768fd7f69f6f734c6b395a09d608fa8d657273e357a2e71a1c525336635c1ad2ed35d637bc0b8833bea9e64cf03d891f3d6d5531accd2287f24486ad4e20b7bfb3465ccc98f70d72f6b39f7d5dbcf032867410634b7b82b4809885eb9eaf0c0d4d6a5e74aef71d39980cdbccc91de99bbec1fc30956685a64ca03bed4b15f29fc920259c696ea0129d7385ea91d7da88d20982d8e4e7d4227313972b8fa91467a2f2eafc970d9c823811c077d2ae7140b2019bac8f729b9319d090e87d0e4062372fe19d69f6152ea0259130d94256c9461c41451e74ead8c7182ca5d1dd2767e6a61cdc7b8eade68498a2bc18d27f895e7c2f07ba3b9a2d7be837237b3538dac36fca3242b54b4e5a20f4dd969120327409e67d53e75fd98ab4bcdd9a340dd6e5ff4d031eee746868e49b6794a83d950da782268aa3e25fe0368b0d1f5fb3f33202d9ceefbe0aac601feccafe5196b1bd9e4db8711931b3db433bfc587a1ffc4610956ceb9ad38ad3233bacdd8bb8071da826f0cf0c98b0815c27a9834f5d2d51b4039950c36bbf75ef5ebeb964b05b1403881eb1a92e9159bb42a49f32650c77bf53b9ee67272f8eafe1c1f020e06e472d9499d48d668e1dba7267c2f89b33b4d4ae9fa0e0d6b102cfd129e9de322e797a0fd7f02fe7818fd129796fc6f9089b28aa06e92eba31dd485a11fb259b4fc62a22c1facff5e1b0499641a34805ed003b0433469dcc9a1b700d71d021c2e5d7ebdce6325b5500b66833e643c736fa1539ea8ce4d41cb26528fe66dad90ee45b7bb8249460fd22919fa2f5d7a8a3682c80572ac90ab991cc4a18b45825538ce669962e98f47e7acda952369383527f90fb3f1e2bf872a13b7253a32cc87a3da6018ceaf805d154bf268d80ee691772242eae0780d04090bee3211e6855a91723f8e344a47a8da290b6c3573030af1dd839e9786118666613a8c404ae34c31315a7604cc0f28c45052d3afaa02e85e2a15cf65e4901a048ac63f1b284bc5027acb99a312347139b60d2aa1d32027f624fd243a2496a775189448ab3e82df1bbbb1bc6e784c84b3f6ab1dc7b81eec3be0307758981a700f2fa6b3d2de62b335d52220939dce6f4308f2046aef2c52d7fb222b58d2b7089542c4547e96e82e37ed298520c75249b0d378ad7eb76e39964bce063e020bc5f306451f83e2322a1f508b0be90778b0a99d66c6e4181119199e77e89ce2465f43416ba0f9dc0c43a239f2cb40aa0a15e8279fc1508142ce59710fa5935121e38c9dd6ce8e96a5200538c6139cd25c0e1c9dc348caff441d8a454bfd659defe200c6fea826c825d9f97312b864710775e72defa09b56e14311c72f620dc84eaabce73eac6ad10c71237e78db83bfff2d01ca8c8281710d59b4818be84a421cd33eac66591ce66200f06504ba4356863fe4822ac31edecbcc3cd4216efb2b6d32bc7109bfec914a39dd36bd05fb393382c16496ff0c91d7b64b881e5546441c3e9f2cac355e737784f838703d57b664bb522b6592a04d1f5de7759011348792a19719b3b27eb527909ab20f758d9b0a619fd5ef84ce1152ac9981c6544f0cbed995c3815e6742bbb5b85e021e3b87e3edcb19d4174db003e77c1dfdb109571064d61d65adc11880b5c4e497833df61394b16143816f4a64524ae70e3349b7a3ccc6f4330aa39c699deb19eedd222de7d1ff0a951addee39ad5fb755fbbdca1a19c6304e89dc9e7a6f1fb025089234c983037db81e9cbb777b790f0d43698784607031b2fa8805a5e7bc1426e994d46d5c546c9ff3c935f315a2653f9ef9b64fdb6ad64eb06fb4f45835d751595db2807e9c5145acc0ae0a16a8c3a6b24ee93cf41ed30fc172deb76bbe0be7282e1cfae2f6d3518b5de5bff8f69db023b2e5c03ccc57c40805232e3c2b09cf2d0f5f86432c77799484b67e3b3c1edaf352508796b5fd39f9fec94fd8332adcef0afc906bcd6afd0ee191444fb3d4b0bc71213ff27b1334701fce952a36b82475a946d7ad135c4a965be63aa162d2b87441a96258b9ddacd784432e0540b94cce559a4902fb10ff3524f0879a2723e416df1acba51c3fdfeab36f43e1b00f2edd35833c4afbc0d80fcf045faadef92d10731f04c7e39a4daedfdd4f83c56cb9c1c8467f3bb69a305d0b8711e24d83ba5258a2194c9545ddf176fc79be3172479a49b318fc957897473868911cee52868160720ec7e2766d7aa9f92b5e6e0ff7ec22e73b670f5aff759de1d8d29f19fa5b417505bb0bc52642cb772e36b827319fafb6911aff5c5ac40b4f549d7db91feafc5d745c97a1f9b9a9736b323b5abe8e81439d0dcd2c7e05b9b2c44ac2c3c8c4900d86bafc3ef34e3300411d08fa972ea9396e94eaded0bb16dd93c7b82431ef0d191c1d3fb13c3784e3ebf82f4c273c6688f6a764cab42f3c228bbf16e6a7f920272de2acb1ac5940e9ca93b3f01598fdbb33fa2ffa500f03c1d6c37ada9f331ac82e1c69da618d5b852ac109f76ff6ca17f4974e8bdec0c66be8f310d04132682179dfd7a7def099d4396667a9fe8a58e9f4189b61b2b2960fba96c6cd7d9f7e44b3238b6ace6c2f2f70920b34f4583e0fa981af6c73f0d284298fe4e95c1ea97469231e586de70f68efa63a6005584ce8ab5e724d1407dba1b535f862da8c9afeab77e1ec248ca6db1698ac1cc3832a62b75cbb48fc320dd0974a54169550581b0aecdc52a5cc2d50fa9489b89a67523e3a3b455973c0ed827b35c24c53bdb9621f6f714b1836f8190046eb74040733cfd1bd3e5aa75d2bc13b2c3c7be12040c326ca19b0463ffef6b3b7155ec38dbc9d565bf77e0e34c6665f5b8b63ee46cb48d5284953712c43778b0564c33cca7bbfe282d8f8c6b0fccbe6dee647d08ee01c14289970d2207c32c19460290f3ceb3b6da99e7db1556e662e6df38b623d640268397207cefc7966b57f1b05450b981a18619b717a04311a27735cc4ff76c77d32f68556d85793f2736ba7bf60837ff033c45338db126414d585f518b4787e50e9139b8f8bd7b79b2d88806ee464abb5799e742336307ffeceab4bcc498a0324665f4d3b6a97646ada3ee0e0e42bf5e4f9aa902b5a7ea3828fd2c4294322ec5b10fb2b4bba7eee516eb3042346240d3f02be696ad0cbc61da2a7d51dc8cfc84b269c7aaa620d04b1ecd31954553714d1dfbabc06a21355a138f14f8e473dde57d61ba738c78f09c5675571d9cb04c414dfa20aca61656c1b75d5939675549184a469b86551bf3b431304b4d8237bda1ac8dd2e9fede48d62ec6385befdf590fd8d1381553d1e554bc4b41d54d9d2d02c15887ab255a44f6f3e9bb9e519a7d669a18a77a693fcd1efb8f15b518129d31d7442a1e4897355559a20d6fef964d834a4b1427840774c3f45603f2b285be7aa79777d76a269459a6afad77781cb17bf52bf6cf5dc8c1f3cd759ed971ff053ec4140cdf3afad73eab492dfc03a7564a9718dbf046b5bde608cac83ba14a2cb2946f65dd155747700e7000346e1ff1dce743e39ca8ab10e23d08f86c3027649a49ebe3e8e583e60711365ca612b4b8f889cf0810abd75408b50933e4ada86af99c949fee62a437351541968c628b060877a4bf3301372bb74acaa89aef5cbffe44892443d369d1c4689b62bb9c11a887cff5498477b6c51fa29875e783bce0b5cfb64dd05138230c9be36ba524d61762a6f3ef4248b3fda67b59d4ba9079b6c57fd79138f1b19edbfe79738e05a517bfbfcf100452d4922ede256317cf7484ee8f6bef53ee769932ff2c2b9e5ed270e5b7d6b2a6f6de76ce21682fa37522f3e54c29c8941eb7fc220791e5d48faaf39b069fb43409552d5f7edff785e0531d83b0f5c0aaea9d5a5b60adf19927dcb3300ad9507071dcb8933ca0035b0d8d37497b1416367f203aa8e24a17a1ba5bfc34be82404e4cb21ef3fe00a970beaabc5a3bb29e3d3e77fbba02583ed0ffa81f77e550fc011649fd11f20fb558c686b50abe309b40ca4da007e955e1929dd23b20eb891216ecfa5b94397484e79601e7148adf45df2aee8ca2d00f4a3b1778563c16867cf721324914eee7c28140ae90c814b2338f98c2ffe5667e6e9fbdfaa91b80f4ec522310b3d88c76ce884dcc04a9bea1fc2b1cfadca6d015feb7709e21fac51c3f8beeb8b3a545e5f6839949a294259a6de59f8393b6d7d444f94fc5336097a89c5c5a680eab5038abc7149f6c4755c2fe496824505048f902f2cae63072b2ce07cc5fe3934646df382b9ee14b4e5353ea3ed3d535dad1d6c5e26047cc8c6ca9b0624b81dce615debbcdf579fdfd272f575296ffd133b6596426f8326bec7ae1ed49e2cfd86aa0da5fcc9bc4ca70e2b48aeff797557b5f50fe9eedf37ecc4ccc93bd3c27df2f501e497b0add0fb7b9fb1f851cebfc70b751a998b696ac555e4a24f1694dc9c06463dbde5c30e4980c5c1efe85581e515177a14d90c3348d0952cbf0f5b5308569d924ebfb1becfda57fa822a68b6e9c6f45e7eb6ebc7a6fe517bbe8822a2b23784a23fd87a22026c5a9b395d952e7dd3c9d412f7d3313dc387e6bd902fbc9be5df4ef09fb83a8da5914d4a7ab15d457f123c9e7b74409c5761dd6f8d9fabbc8e002940c4fbf102616351b0ea491df43fca32489ec581c0c3e6cedb0eec86403e41a406e3bd5925d737878ebde681e2feb53dd95495e2196ce4202cefd0b485c34681bb4bbba6009f5c6791dc4be096ab93361dca57ee99c21c795b247b1c46f834b935b51fcf54d438e54e41bbade7ef1edfb98da80f8ff3ef2fa8f33a8aeb8f07468bda3ab26f8ca92791323689bf86f3e196053bb2c2d13c0925c15f91871cb29904eaf582c41afb711045288ca18764199b6c43aa6e13c7e227766261f7ef43ffd3134a12b1c26ddbad486e97ffd855e75c7df103cd7e3a0d3c1c7c5b09bee33b5738c82b992c5cf09a4d1040e91b54a6e40f138b31b9935f96cd9ab8757c3121674ded93cfa09a816c1a230129d2ff463af9df6c86c11b222e938ea421e6e1f23add52a8f339502ff702572fda896813c2eaafde86d325e4a66ed9e4a4d7f712f4cdf954fa56d12e2fd1c8d3987a08353332c06335b3d743812fff026f9cb4c582ba85c52d8c6707a7f01a63bb4b83eab892077be780e2e619402366dc1c80b182a9e6b9fcc7453e9e915c44f9d796be2353d871e58d2db131b03da4bf0978b1ad8cdf4f1a854acddad75a9d1f
For a simple look, you can remove the surrounding border and horizontal padding to create flush toggles.
Simple flush toggles
View code 27b385dd3a9b4eed6735a49072fdb66aef32916a2be9736720cf3c6fa003f0334c26ec9260f1b71833b82820b9f2253001222582a795bbe9ed7cb66d12a1861e33670c8a1cf3e1f5d09f526f852a87fdf653215720d31408395089ac5779cafaa1abb825213a4292919fc2986647a5e06009a6923bca8465a6424d0d4339a1e213b455ae2628f093ee274b0c0c39e7a5ea06117ee28917a5dfa67b120aa6fbbde334d3adf4b032726a93065d64e171b43f14c6deb34106a6af99e1aaf020d12455af3a46bd21a55b88163de7ec1e843d2c3786437461febe45b8109b9bf429cff011704eb3cc58112cae29341ded5cc7d19354a49e1a756172030a127184ef24184c6724a90fbd4be971cc3135a2de17e651efebe8a6c46b1fef165ce4df5159571d3ac410021e4560a2568c82da26b834c3745218349d2d877759cfdc90a42af5a070d8680219bfe6f716d8d8ad0bcd5841f8e1c9a975c26bff7d0b5acbda250cbec589c8c31cf6faaac981c12e6790125ee5f0618c0dcdcece3872b9014540de98b0cf8111e998ffa35ccf423d29ef46c59d662cef08463a1ad5b675f692813c0582710101802cc0e0df9f00ff05040509a342efe7494ff043c72148008ecd90964dbf5c6eb5546eb9ae844f39c7769e6a6ebb77ad1f26e34e2417ec6921cecd279cdfcf03f3551c3a6080816c18202827cbc010e365ac9db7174cd9fcf358eb977aafc4f8896cd8503a1a80b3661b4666eefb2c17f1ea104713f40469e8d6ef5f1f031df38e27cda78c813075018f21ff83bae418a5450523972606997ce3f1b5b7a4bcc405f0fa09fdec85f53d53e8a989a206d3d2c5781faaa5900370fbf02b78337cbd1f43ee99dd1274e171b9187c9e9bc69ae04c87903fcf6dc5bd15ad59efd566dfe08f13a4776c74642c22ebfaf36a1ebeb27d1a55316caf0a028c3a76af672aea1fb3506c04065de9c4b10cc6a9929f71d88a7802f1ee6ec328ea8e930a7613f673f6a95beb7118476fdba73931132b6e126c9b57623402d295d754f4c79bd9c57f137214831762b1f58e85b83741e4610af2955c048075919f37ebf32c4a8345ddac3d38cac3107325207e15540492b27e124fd5d3ece051c0f3eca43c6f5eee9b8613c0773a7f01159072b6154002991452f7f7ace80bf653b9ae134226c6f5d76e4c45c2e508df19642ba3fd03f7e80678729248eac8cd1199a2341cc7d8de300dcef1c54be936b5c0ffa262cc4459432865a935df09401248fc56ee619fae91f304ba77ebca0d9e2c3adc9b7c6f73f082c6533b8a221d8a342b95da01f25b4050cbac47dbfda557755fad2648d9111d94bb3912140e8002094cf2c00310817963da8a0befb08c5c1cacac6b96995163d602e011e750b1145625f6b43931563d58632155a01cf53a79ccb8b5653ce6ad477c97eb177368b3cb576acaf74c5b13332b89836f4d2c3593b837d89f64a75f7db9a167d26da1a40eb0e72e5adbb238f78be74d4bc86edc8af6b6e05d1b22e7da3922cf9a41d2aec971b4dd6bd641891f14f80d3c4933c976dc3dae8385e528449151c9c294fe588b83d3bbfdf450ae434a4b1e8b969cf608924cbf7a20d09659ac83a755ee162a604016f54ca0a18ba63a9185ec166f119b7c4c379c9c11dec372cc07ca6bbf9943d4901daf656125bf49c5d8f8f21ac9e8909855b86fdf0d724f5e27794a36725c6ac68a66e1362e307875777f25964d21dec71a83da6b3eeabc9a065361f684dcc10373d41fc877ade50ee5752e7c89cdbf26a72f1c3c423e82cc812aeff9555bd32c04e9ac2649cf3b4ef6a2732eb047402c6d1e213c3676af48a7e8419b39e27b0df6679c890bd720b3aa8808eb3fdb1aa11a4d1be933e91acfdf900ce1dcf2fbda5b8e655e91e71aefb79dda734beee55d44b371032a68f4ae100e2348c0683060157a493d53dc579a360b48c6164f274fcd27173826dabc2e976f381e448b46fbd3b0e4f129e69e70e96d4c17a59f6f414f942514f8ee95819bb5358041c5e5ab47b2675c947b06070790cadd578a6c1058ba2c71bd5dd7e3fbf7acca473276b18f5e4dc35668c7b71243785e262b4ca050872918d1062988ee5b1e6e1ed3bad824b26a98ffda1fb877b39a9741b6e6147d69dcdb43eeddea0a91eccd412fb28f8ca9dcd8f7e59928892ba1ed9eb1858c5c2de7e1198de14e59a7d5d2e727ccdbdd36615dc75eee2dc75a47754fbed55ec2763489266f1c962ba11d2e5eb6826710bb56999e80d62731bc3a39cd90314eb1a67944814bc7543629b7d82e5cfd63f5175daaa7cf1519ab535232c2a4f6f04376de61e5050debf32fa45510a5124bff639b284a2ea6ccf86285b02e0df11d4c969aff875502491c28586ee18d6c97166dc497bb093a380331a3120a2d5961da29475b1ddf607d9a5495f893940cbc2a83bfe72b3773f9ce398ff9388b0dc1117c7fad754c0b3d419ac1a9d657d74c042acebc387760f09ad705da368bc05e173d86596242ca0f874c956ed028ac5fd4be9f0f35c036043f3971068636f1bc5eb6a3c38e57cf79a08668ff85f1323d1b8f372f18bddb19699b498814a235df648f2fa61056fecb7962f287e2bd7388092025999b3865eea183ef72b3514aff2ee7815638f278730aa1bb8dc41cd167a32b48e5e38b9cba44caac4048dc42f4068d4241ad40579da09203d70ef3838e288fab5d1687f5bdcc94443fd4c5d3af25c20cfb5a8d7f82af3750c7e1863bcc609d9f198498de2d1e84d3379828c2bf470ea03c4fcb832e78d98d33153dd425cfdf11b3aa55c7ca9784c9559f85613c797d4aff8a4e36aa7238093c0befd0f9a0cd6fa5bc5f952be37b2f83656cdb557c23308d99ce9a5527b818e3f9e1e4bd068e9362084bb7261fa21b5f4699de875db03e7ef0c44afdaed9502df9ade1b705dfeb10b753538968ab2ca454e8a2df529cb25f784c7bdfc1b9b9b1696ff15c6b6f2d19e57b2ce3ebc7e8a92540880cf19adbaca1e8fa43352decc96872a13447d418539013c39142cc2f7f9e1757b6cf31e9701333a2dc336e4f601842
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.
