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 016f2db1ef4e64e47ead96f493b782c016fd76ecd3ae0d65bfc58454bcda4b4bfc13e5a2c78eea3cf5133e6d0d54217277d5e74f169541c1621210acae07254b83327f5ceeca7ea7b349d5449df3911373a92065bd523b5471cb11f326372d563ede727875df941b7d0c8515c98c475ff161dace750b4fc8045cbcbc59dbe8576b13540445933af46cfca9932988ec225d96fb677019212fe39f4431eb74b5d73de1545922116282966672538a5459ad2fa549cc7f4ae2aca1535742552616e1d36dfe45910e500d6031fcf9ed3a59b0771bf2f6b68cb1b982a5970ac33e33c9ddbd890273e0a66693f7d867263afca2cb4ffff0d2dab2c5578c1bace021bffb92ef8e15392503c3c17861c946e4b1051843e11dd14796c2df519f4a94023a94db48add0663de172eb58881f6ed3496464350c28c507e91ec1f83175db00bf626806e265b8a0c0a6870bdb67e930b032260b9caae120d5616e3b97b8cb12f0f1b6d61c60c8f6afb03fccea35257f225bb217e5c6045c96a1427dba9d0f8f0ee348e2822aa72cf743e4eba7000f54004b5914490c804e6e6f45af0ac0a2063fe8a23ce286279f63ec853db69dd4237feb0b2d4cfa44e98efe89b21667a794997e0a8921a7a4487a213b657741f41448b4fbbe32633c7c19824ba11d350fe7271d61f4333cfdee52c3a24f8ef6cd84067d555bc3cd2f0c03a5c1216122caf33136f62f1e2bd1cbd48ef0945fbb5649451e17247b79aaebaf3313230eecd5d90d77bf482fd90935e54a2817eb9cf00c01f99563f85f809b657489dde297a5cc2687e655e4b5246c8b04524fff1a638bd0cdad232c810831979c8d9c3a21723a15cae1e41d9fe2b0880525e78510993584124b8d888ae4e1d86ee843c33583fbd3a3e6bee7b8afe6c7b4e2a59f69b7cb8f94fbbdf159e54df9d86ee33a926b683f9ceb6c4cbfc0dad976f847963cac99463c81beaf70b3c870a5a8277eb1f1329622f95052882b9cd0dd64b5b9e29b1bfe3140dd0968deb8eeeffc42820d7655684e4b86ff9e32f21874a583393af564fab56cbd6dcbb35eff7aeeceb73687f815e48618cd6c590d02ca111dece0e27059be9e717499ff60b7849fecf51eb1222f8221fc1469f384d0cea80ef050ef6b1a3321dccbf4addebfd9d40150d146abf067f6c1bb8d95658a814c0a6faa640961cfe8c61c83b79e11932bb14a9a50ca200416a4a19d648f376ad32c243cb450cd9bd92be8d1d6f93902a780977458d7537cff6756a49d234555c8c85e03d3fc37c001ea2c8f5721b26784f97cf4b6d7c6a4900198854dee881d43d6431fa292bc5acea74b905984776c2fd3036a2c19441b7dbf171c791b82b10daae5e5a025c61e31c5a381184cb3f31502fc3329d6c7c97a3df2061a98c7b114b2a5cbe4039c94e8a95fe03701c8ace3dfb78b3e01f1d2af53739f49f3d0e398a386beb856873c7010b29c14eeac8d642b1a7b15e4b654276c1386fac23152de1d583a5e76748e728f17c3a72abab4c3fa2a50497e91fa02ba034c959b5937de8c58580dc2971b3ca6d4d4c941188949ea5c96983a30545a94a07831a3de11a4c2f648c52a33d4142d93075222c6ef536c4286ac31f52a84440b0bcdef54367cdbc480f9e6bb74472d9cbb2be479e4a7535bb641f34c4c3298f34b194161058b563c70d63f6cb0e8284e9ad1af0bb07e1489f6cbaba01a95977e1fa9783d7ff8ed39f58c607176936ff927efba2881c6d44e06985f309b8ce59a0036dec3b4d846edafdc2501067740f4ae8cd5800d9848f5cb0a2ce0a097334ce0ace50ea558627960725f9b8634e9234a38f984d5941612fd86343a4d7e09b66ac47c362afe0ea8d4c92d2fada5fd35fb10c18591d00ac6c2953cba230f43987a1daad1fdc8ffe8776a63aee6975419b9390936310bad23b3939b1f057c9996a78e6441f52facd6c100da4fa0787df83822d463ddae53b985da56258d25adfdf45907992281dbfa8144bbcd6202e1f22cd2b64e1ed34ac895a823f1307546e1c6eea97ee32f95fe81341409ae74b2dee5398f94c71049852c168f03c6dbbbda3ee899ac9c5d524d4d460b0ce997fd8c886c4dec6d7940c857859d4c1ea22acf299e441ea259c093dbf0913adeb32853ae2bbdd206f221e1c05efb09e1d19a29a5ad77dde45ff40510d289fbf77d38353b7ebe6cf08cccdad72081403bf662cea90364f7d0b8c660ce32823949a7d323ecf889a8cbbd4d4489d96a37d5
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 dfc526966043a5dce5d4498daef2e89bb24406e93763e89f7e77009766f1d8b17254d46e2b7851102fc3b777e66ed7906f91349b6ba844946c3ba3ebaac93d5bc0535f25484eccb04a158b479d2b61435c28b42b1e87b9c48f01c485a1d952f4a85dbd4ebd4f67928eea34484a5ae9f073b92b3778783bd6773ce557fbeaeda54e4df304cc6de2d65831f10a65aa0c9307d40feb26909ad25dc9efb72bafc0247127b2c783d0c844df924af1f5112e76369da9e44789bde39bb1f915965ff2cac915f07b0882c770f094f447935049a3659dfb0642ce664294e924cb5bec47a6f007c99000de3de855497246e4764a85a6cd7324d638b4c6e81db8891c26a6657ad95f91a6dd992f0d0220bf852c412f45731bf8fb5339f80d7fe72361e939c8751545079a91d0bbf98c070e32d7e7331f3149277f48c679cb0e6eda497225c97a2c1e4bad67e3e2caea2bdeedb1e12a7f40f206a807ce8341c8fd5a38d587c8010d44f8d673dc8d12011739876c815d0059fcb8d5bb7048a794625bf96aa72238f669415c7bf6bbb92f9dd92aac56912e588b0c727410360f90bc33d122837934aa6c8bcae0a698564ba80ca94697ffa95cbdd28d5d6937c17a3238e359e2b9fcf767a245d4e3f18cbebef5ddd29727ec3edeeea488ee956f0addce88461084babcd2b9f912a372cf2dd95f98f9bae6d603b7278565fa7bafa0724f14434db9eb26e76a12832cd4c25abfd2e0d20b6e6eb066604937d41ebddbdbc18a31fc43152a1f374bbf6013e3ee69a1fb7ad2a24157a3df8a81cc7f1abebe2db823441bdaf2df5eee73494a99dde756683fea856508083dac573349e8b8ea8380186fd10d0a1e0acef6bcad0e9da6349de3cd68ae262f26b7253b38301c583cb6df1c6e7eb2d420a6a8daafd2ce92edd8edf9080708aadbe3635ff45a4172191c00dd362dbb6b2fa96c04223ad7993f68f84bc17bb2b72e326dfd8e7af132df0c85c0399e059820559439dd2f28c8fabdb38daf88096503fe3da6d8a85006d7d42a14aa677c534cec7b5429cce056166e566843190f1ffa8fd0af0fe75b6a107282d8033b8ba76c1d07e7b96bd90d687bfada998d01319089555242d91504aa33e656de08c8bf1bec2bd55cddea72fac5542823d9ef732abdacac88f5a06bf7b27acbaeb116dd010771d5dbd842aa62603b8d3c911e66c4f1db716c7434a2c5b0e00aad76cff82962f1577e735255c2b8b7b08cceb244ae6ceff2985897a16d1bedbc8cd78c79eaf359043dd73f9d607398955da34a99bcf51819e878c933318839c499f8815e74013f3e16af28319b100cc0042f5c5023c9e5f3bb34faf662d139387bcab561d4ae9c01811cbddfc0169eb350099385cc170a0cbb02d0369e0dda2634795cda2c4bb7be9cd85710b43a3ad97bb31ff63b3f7e7069af9dbf61e8c194ec9a01f0b11381baa9de09e4fcda9e2b22ba266693af1cc60e81515e241567a5a59e82510f7cd56e74a131fce0a18510a53ca175fbe0e03db26dd9b59ceef092b6d114ddf0e1a0784e8f49e3787a43828c6043d229b5eb160b21d35931855bd5a772530ab89d28986e295c91d392bef7e03aa75266534f7c81e3245846182724d824d3423db898e5670fde8b18cda8a114b554dd9535f2b7d1421b604af55bd3f37d124f0f3770cbd2abe51b43452ac03fd2ac3dd9a6a24f18750a08cd3ee4052d9aa15777c97f7e004296d211365af244803389e1d5488e7cd07869d56ad39073ebcf4ceffd5f79968155066f84f78d4e97a05bfe148e24007338e480251788a01427262759eb831c50b52173f4d5ae2bdce3139e9d51dbfb1c03d16cc2afbe47f3336ed2ab90201d2b40ddfe45048ab05337722f7c43ea9ebe720df5e4d80338391dec51739b31ae34af60012bcecb44f46d3fb496473c4c87441b9719e1feec4cdf2fa9a935bc7e374165ae9cc0d30f837c694425bd1e037397e1d6dac1105d7f3e1683c89dd96d3ac480dec027782b629088ffa87ff6c75f67ee1a0bab4c7e94c180076ccff6023189b66ac8e1115bec8b016fdfb7f16f249d6c634b469741bb9e9a2c94214d605caf1dc151696332eaa168d30ea67116cef4fa4223c72232237209d45070b5c7a09ef408fff4468f3467a01a0f9ccf2b6783d0b75b1a840adab57845a7e52cbc5a83887cc1092974eb5d3848fdcce1ca6a1bfcd6b9cd7c0220bfa92ecd949718b6af9ec1ada696008dbe27505e2d804b7ed3d4c5f9416f8f349fd1e538034d29272b0d0e7977e48273017b4c52010c1f3de128bd1c7a8764000b96823843a5e77dcad6130dc40244bef7138982864e1fba92409e8aa51af94c5d659e3e8ffd7a6c668f9800ebba45b431adc6928944ee0d7a628439236df52b127850ea1bd47533d2ff5c55690e0641b3249a74251a723887fb921d6d65ccd851a494283ef3232b458eae40da88ea3055a7d833cdac83d5aabb4cd91d2781f40553a39fb33084aa843022ebe4d6a682e619caa0e46c9729a01e8f7648c4cf971fa06869b2842ed89407bf5dbeb079a69a5982eaaadf2244b8e5d84de8a0bb7dae5bc10209e070ab584a133d0a7d9ed01c6d2761a71866383a250e816ba5fb609a9396678110e5d7a34805a910b444f7aed79fe70ca19cb208a14b6535f83c921941e8a6dd24b1a585bff373d729c7fee32091fd756ee03ca73ca4d1193d9f86dd06f6b10934dad4098c331eaa9d8edc7a4b1f8f979d230a91dfdd16e53f52802e062c28b936f7d4d1de565ba21cc689b9fe69f853ea9a70050a550b6c5e849f36bb5bb1ed30fbf7d529b0fad8c9e60e0a18a15705ecd70da5bed54d4b1063d1b663ae3faf13bfd47588da0120f7b74a90bc81db41890590a934cc359d057cf30f3d3085ca1aaef5c89c3c94f9fb6f0199e23fa9104e81a52ab4eb40636050d3de25500011523a03c7bc5930973ebe2cd6e1b6447c6c873b35930ab33c615fd48fc1874e5201411b1c08646b19138d26c889760dc856d3713700d080ab00cd0fdbf816d58684424ca8f061459f6b9a6a4442e61971232a3cc42cf4b94bba3f62cb6678fb65f7feeb149b1d0d63d761d28636618be4b25fbad8097bd06ccdb04f652e48a2cf10e0160a78a88bbc79ec9140dbcee03759a67d1818da4fbb1227d6d416003d291c0a0500d02657a83fdd45b08dcbc926d72025ced48a701a18e9be6d705ffdcc80179cfd38a15cdca655
Large toggles with background color on hover
View code 43939f198a3c68edc39411871b99cfa6d41c36ff510bc7a9e5dc44e73611b328acdefccc10772b1414d3830f0f1fc4f809240f22cffa8c00a14fd5db888dcd3f9c1986b9472f6df5c1a7c5b36a0e6b803e130694932b6bfc57abd2ea91c28a63800dcfcd5cd372a6b7db7942e8f868529780932ffbcb103804904e96bb4d012310cba71eb22d49629d548a66b1a7d9ecbc676ef25fe4b257731cab88f35bc2f7c5bd6da4143b16da6f504fb1dfb9ea62cb5da4072fd4a73efec44f6841abf8be59d59fb53ef3e454cbff72af92b4ada832aba4e8341d9c3a8ba971224615efac6173cc35908e1202c9276fd869e9ff03e5abbb8d9ee106e57ab634637f24e171997ab612d05e8b84d5c9db836616c87724e733ff80b5a21fcb24250a2ab59ba919abf1186cf6dc33690322f6d0deaa9f9a520292a90fa622374b853b7c704f6b235d9ade0eb3e00841228776b643e411ba996532be07f51cee4e7f82342162f06285a4b534ff280bb4860e80d695b3497eb20ef04e5739bb8d794bddc3fdce112072d6df13f71d4efc4031fa75edd9bffb2c0e463996478c10eeb176026f432e4c45d4032c5fd69352c0831eb683a2fd86887eaac80d7dde67d0cc0df5035f28f9e4a59e517c7986b426cb4f272954fbc701f09689029f15c8f6cffe8e3de93db265fb64913915f2c4d1ba7f2a60df60fc344a6f402ddf54f660d15f3e88caf01b7b5cb62e2dba2b20f071d99a41ba303643f42b5261d17be1abf1b9c944089e7a63c08daf6c423d63e789783cf22fe4c56345a1f810153272cf78d08fa86055ec1cde125035afc477df648e9eae2a7a17d429472ac31effdaffa49b10ba630bf4d9f17ed4b4c3a36dd51473115127914d3f314d31a06e4e20ff8e242115b651b3b79ccb6684c83f932b246c3a7b9cd5a99b143a5bd769220c8ca9b877f6a8639076eacd4882edbcb71bbb594249044b8e61084d5d50977b49bc3c6e9396e919ffdcc90205739becfc7f5d34175b98d146a06c63f2b2fe28a8271085d734e4fe7499892e9d809cd86d9d461f80b9f9b5b891c062975de99cb454021e223447a1640c70d8084e3c8e7ded0c2a10c899f8c1c705cbb08fd3ec5cea1b6da25fe6351608a5c928fbbe43e82388bb389cf2e174d91f80c1938c5473e05b8eeee6a212da0c1d5286db56c9ec44f792961cd0b9637f314b810f304eb2bee07686b10a377aaf3e183b708070d5ddcb8fe78e23cda1889a531b2659a360427886dda2aec40c3d544e1e1842bc56f2a14fdabb8f30287b6b318000360cd60ce5a7f8063743ee04820ecb4026281599529776bc8428acaa1eeb9f62b99ce1b01f830ce3b52849d624ab7643787cb10c666938632b32bdbd40f0d13e0cf258f72ce1d536c9e18eda1001c060b577232a3db8eb378f76f9a26f89fd3fa2cf9da686ab1e2f2d553eb23f8809f050547dde1fcad68fd1a41c5f6548ed74f0129cee80fbecb62dff9d475b24974004f0dff75356105fb4b6f3854c70be4541c5b75b6f29ec70cea7033b91c898123f2a179a0bf71ee4c9d12e3c96814d04392fc3c8c8a879d38cf253951cdc071141c11bd279892a754f2904e5127ef42b0c305f1c181252dc7386081e82786d4384def8b325270eb006804c1a55c592b7eea8a143fd105fe4b2c7dbfee9140d6b67a4832b6cfd43b5aadc49b1b84d001e525fb9070f2f757f6b996ed2dd46b15e65973f1a753f2775fed3ac2b70f31430f64a92d863cc2dda7d43d2994ecac2817d409a0fdaeec05a4ff2fd9dc2c10b7d0a6138c4dec2d9b0a2cb0e5d4609e1fde237d529bc7e889b127ef72c9192523b69fba46e26c0737efc78f49f1b97fa3df238fd2a2f5dc8871051745e406e801126624dd6536d8b0fdeb3bc55ddfe0f31185904a1cc007a7c9df330250d7dc0a134e7f2b18eee5c1e242652748bbdea68925b20f134fbfc1284d85347ab92c30cb20234895350dfd548dce6f3b4435e4031cec7b9abc4b2b40285d3d22941992b9356eed3550ca42e876de6f2fa0e2fb3cf9ee084e5e5483537f8567b7cb569d62f076c407e776a8c486b5cc4ad5d902ddab85448d992c79a25f1d6c4c8597d9481a577f37d113d7d7c9114eafe24b61ad9fa2ce00d5b064e160dbcb6646aafae590a9961fcef9181bab901244ba3f13f5198b40f29cf0764e5d8785bcecaa2fad54c71e4c36105c2f3de47677829074ddbaa6b7fe0f7fc417888cf32722279f5da19009ddabb3523bba9058b236fc8c27d58b1cac3ccc67ca464597ecd7adc1757ebc9fe94eb8558242822f112865738df294c3471f44fb26fb74ffb57ad58aec018fc18a3e187d5ea15b2511228fdf7c89ac526c23b7a09ee56599d8466c61f594eb187af3234b0cba8ef337373abb33f4510f6e09f2e71ec66d2f24fd44500bca9d812656144b4d583
Large toggles with icons
View code ace61645af56bfc98ca93f2c57d707d99025045e23daa431f6e54a78e81f8716bcde521b12fa646881f657c84c2e307327932e94d0c371e821919f12da60b9e9b05205cf976311506aa65ee6975d17edad55dc9303abe9928fa062db142a916f81d69bc10b7e06f28e827ec20783f802dfa6735286caec930f946444d4725357a3c523bf929ac3a6e4f8887a465033354c3067d14fd29c31a2f180b454d62b7eb8682f1ea580930b0a98731e2e59d3cc7fd2493e31978f74c59d1a23f9192b7af0ace1fb6c13143959004a0ed3f4b290451823d0988cb50702ccc0a18c468ec5fac537f68d5ef5beb9c799f9ae52f65dfef17c3effbfa7b6e717efe7c247a1bc0398f1839c6e4c8ec882ea34c84cf2ae0d2e83a1bf1180a5dfb8e3ceeac67b7ec97198902f5b493407eab3c0bdec44aa7f757ab549df02342368ab4e5d5857a46236ebfef4bb5f2aa316252f965d749cfdfd7272b7ddf22369838bb6f5d2929dc1a76630a2fae896c1875d896165165046787001725c6b91ed061f4e47a58840d7f89a1fca65e7f3f617709e92f1821dd36cb889186dd3fcce197aeaf9b9ff2edd260c40083e457714908efd9f1b7a950ff4552c7cf8fb9aadc957dfffd2b15b0800dfb3c62b129b07b19a4654597a54101143792644f02fcde808d8c78f7174d364938c9fc4479c2c1b0e46eaa37a572e9fd21cb81b78758fa77f582b61539b94391269a80eb0cd94a4a2451d8b8ad20c9fc132dfc899e4248b629fff037f86effd7e36f81d547a70dfbc0a5a90b88020f5777c979b5f80f11c4a11e9331cdcc2c40e643541deb6dc35e49ef42e46e0aed59d147c98ce2b211e0c7b39c804404a9dbd58585ac0e9744f1ffa68eee6a904785682fc5f3dfd95fc4106e2705f80100041cd8b9e0129e4448cd7525d8e087ff09902b2d8afe7c5912e6b59cc33c0ce646836be1ab06854d26b25852c0fe1bcacb9385fd5e5111f48858ecfaaa0667ebdb86175105ed30d0c06a99aafdfcb639b239924f606b2a3c18699ae775d924c25c9eb9d1a5d3236038bafdc3685ab1bd97cbce5273efe1afd56bb26aa071a733cba8c39255545b45b288a68918106328cd76c6ccb72dc6203cc6f91b98f724ed6a5bddf417ca59e73d724ea21460f1f72a462e80240e22e2515924048da964b5c931d673c49fb240ca074496d149b838380aab8d88c97073fda4cec74caee144cc61b3d248a1f458c7ee92928e6d1521d88f6d09a8110907f4f41b964459339a0e1924799784cade2f6190d02023522592c95d3695c21c77859539a4af1307d82299f5b3d64ad87cd63170ae7a6e4db1a63df090263a5984d5901fd009505e84475d66887a1d2f3a2b07d200d5c230cef88b164478d60b7465889ba98cc8ee2472c3da3a454ee4c08339452436b21c64925419cea8efc437c4c8a28bd988b76b4ef4aa78bae9e4c3e0e85cce25660b0d09cdfdbf23bbebdb746627e44b61daa6933acb06ad6e7a31892fbaa7873dd3942c89286a3d82d29abb41f69b9f3ccd85d7e2cbcd12f53dc7df7cc2b7452a18ff295d0ff554e227e9faec16dfc59e8248f3bc2c48cc27ed1343d4c9a48fbbec060170464544a0547dc7266ac73eb65c5e31880f4ea776c74fe3640d53a5001aa949a1206406f1aea6b0d8efd212d3161b8d98513e2feae9203a58404be907d4a6bbf8f6a71861c4761c61b4d744b3e85016429cbb189f14e4c73b60ed66ff488af67c4b3434ad49704f39360e909e51d0c8419fe53a49f224877463794b0f339b8b47e6f58f2fb0241214a1852beb39483c999f8c2115eb4f2e4c49597febe857d7563a78f3b98829547691e6c0c35529110ff83b308e1bc712a0f77512bd1975f59cd412d8b1790f59600a93a29c4f2ef636788ebe53d75a154ed58e73b5cecf0660250cf8f3da162b0053d2c35ffb5bb65c73a634232958a8d7a29f280228dcb9131653820d63e9943b08e5c01403fd28483e92839de3e17a34f62537325582fadefd1e005e8dd322219e1e7a916077bdd728ad4087c20186e95077a047ae340dff22da8f56f5f24838de445a369939a5ee8024aa8cd6cd8c13630e341e5e3d512b6085701d6a690b02b28e884a874135802d48e3f287286b82c4e4342ab437ac9ed6bc675b04b86af75b90e3567287010ddaa0873c75dac47955d44dbd904454538096bd082b6795532250ca9f0a1fc8319103f92ab75aad2826fdaf539d787ddfc8452186bdd2062ba6f2b9b7b45269f0cb7228e364c124a1a3c56763a1dc36c081bd261446235b4cd858ed748efe39376f03b863e582092980909c7b2f06d329ac8800e962b6830fc1c4222d9e8efb59acc37faf360da223614fd183af60eb64dd3b680606cab3a80cb8dee1382d72db40d1837183b7a824fcc0df99bea7c23087126435e42551a33c2527cec28fd77614ce921b317e7eb8221b8aeb3e7fcfb35b6532bbe0eb7d562f317b30bb887b58b296fa7a1a3bbb0628703b64defe498965237708fb7033a1bfbe18b2dd929cc78836b3bfb7a099871844660838ed4700b2ad6ea807d8362a4f88d37ba7847b1590874a7bcf8247b8d765802ed8b15dc63266782704771294d8519305cda2511a7d61b87f69c3ff7a95dd58a32c5b3af02e9f8e5938d29cbc808b87c05fd18b9101acf3b4b40ab28cf1b60f1267aab8d5777708e738e6861d579233bc751fab15af2b9d5a4e3e8bbb323ec76d607db59991fde51f0e771b729a7931003fa8629d0cad660e761008d868336da12552d2c948138bfbc50d9ec708cccc563b2349bee5fb6af7133e9ea67cfd6e26eecae459b4030e052e3d6a708b7d02b66dc6a8449e05250b70d54fcb91f2e932e5b72f1e810d7ddc323e0ea8198a2a514954ed52c77234747de1711807e96eb5fbe4f79c33af6aa5799d58a07c4fe995af613f3e3f525874533b3ba6acd8c96399a6fb5956b254e3661572654eb3e86abeeb29f1a32a3d3b7ca7cce2fdd05af6c7442dc455078d4b88a2125a09db6a55c7b599f4029ccecddc83f43b912e8800d2019d83b614323bac16d527ebc6258c48ae4fd05ca39f5f2bbcab1e312d5c455cba136a2842af807c793ab3de36c9c4cc1b599c99caa304378cbe9e137442f56d062f5de9c51c655593d7cd446d5d825a13742fd218e4a2a2db601d683cbebdfcaa7b968c3bd453bf04d6787d8f029214f7cc2636a0a136a11418cbf1ab8d92d2952813f9c3c174a433e5b2039ede90918c6e8ba53e78ac1168e343bfc65952c282b7cfea13ed65b2e8623e28c2a033585af949266567047ad7ae7bd3fac2352408561082694b0d9d119d09ed7d633aeeafb5bdfdae893444ff639c24ac17ef4413b1268208a0bbe25623fbd74a8ac4cc5c26ef40247a90da4ef803e849f369aebe997d2087403daac02a9657f14d2215b45f1da840038635d1c55510a56902373d1577c08b0b45f68f77229863adbc844ae42b7c2050a99b94560316dd7ee88c878e777cad2f5ec7c38413f4b8fc9a837c05d3ead5da517317d437454ac17e48d310cb56ea819286fcc6f1c6fd7df50a3f40c58f9374235c32e497304c8b7ba24616fd3a03f774c01a9906cbcb4fe4267d6b60121b793052b5d3dfa303d92e5960d1307418a15fdd1389d3e13c93266cf098eda82a2edc4901fe91738565e42d038f90045e9c76837a8aeeaef29d22785ffa898543326d2e3550c707c521e14f314a95978d0588008a977909ec441e1c5ab8b833000a66ee6318df2e0995c4a3d12c1c2d995b912cca804012e7d24fe1a8117e290608c9f19372ba2a3daecba385ec59c8c29ca9192b05b30f37bd8f810c81bc40c5892f0701fc46b437b489b2176378e059c6059f17e9c716553c28b7a84446151ee9056afdf6102dc5fd3664b0033dddbb98c353fc13679d1094e615725b5dd828214137b2f0a3921e042e151340bdbef6ddfc60155f8d982b33f166d1bd2fe08d770795d0bd6e30626c537239759435deed433a303d20de497014b11fb42d02ebd97de7f594b13d05ecd9bd8b372d3ea99172d4bcdba7c6c9d301153fb7e991c2bab774b1503c86967a6253ab802f815c4c78f31dc32bb57be8a28ec6407717dba89b98e5cecce0c4010406aa51a3c17bccf732ddc306f64006d4a386d8df1998432b1ec476b0861ad826f9f0c7ed7574f5b1e6c2b9ee21fbd9b78dcd3cf649c9ff2151c0cc4b1bb545532b7e53986cb0ee950d04e262cd459fc816c4bf156eb22b5418a69cbb09979392e05eb627215a1267ad270447c983cbb7dac9a55e80f33f86299d23bbf6f1c0f8a86e28d63f496cdec8d8b1b2cea2f21495acec36f7e0fa8956d4fe94c507679f337fd6f1449f6111a73b6b9667f228e43d5dc1bcc377cfdde8585e6f632bfcf4d257587832dc3aa77a9113e6296287e5b4ba63cd32f8b78cfd080f8f6d3b6134f916abf26296c329ebb7bf25d35578d36fdd858726ac57712eedb0d7758d5834c8d30489dd8a874f083aea1e015d55618bfd3f2659f878d1bcccbe7f87688d51e7140e22c0cef7f72496d6f8319293d6f623e2d410ba112482fa06292e64f2420f4b750a60931a5117f0c4f2003af0a14d641699cf6edbd2d8ebf3187e58924356272c1af4afe720f0609fd4fd108d693fe26bb264d2abceab0d16b9a2d22e503f662aacf9e9bc95f182d8fede41444343b86beb0098efcbcf7f5b77fcda7e02ca8ca014288f4557a41a9043a27733097c1d386811e012784d022dbfb32b11b0424ee694982c8731fea431159f736dabb0c95f8cc4732d3917c5a0a2ef429e3839f59767045c22b4a20f61fce5cc3f48a2961dc1d5dd6e68351aa974a53eb9b0b6b18df1580cc952ceac3ce6f843fb792c796ef25b9163302dbafedd8aec043784c71ef80d9f9d87f85066d7b080c154ba293fc579869d62e5b3145900a4ece21cd275bc38e75c88030c038f45a94f33d3a3d611e3f444131e5e923eacb7af86c53be348a4429ef9d1286ff2f965c8a760971ee16342fa56eee694e75df00ceb9d12b14d122f884211592be2982227972fd881d8f3ac5d660dc514fa53d2ba8022fab7356414962af8596f4dec9375844915e2f6b32b02e5270ac1f39674987d31ca9df79a5455be45323cd5375a80d6cf2b962a90c60f5c4fd65660a46a77693ed1cefb0d3b0359957ee59e6bd427cd508f5cf2676b173e888f7ce53aebeb522dd86d2fd4dfc930f38191aab7c495575ac71a81fa6c698d7ae55115502272e1a9cf0ddc6c984f937e30facd8b5ad97c13647d87a462a892d107a325b6ed4739fc0eed621539f22842ddd04615b9ef4962bdea0c7d26f13bbd38c46abd2a99ded3a5613e740fd35d9cfbae79082737856cce2121f8c76c94cedd578da9e948095271fd0bbe4622508bebc01d981ffc824f7462484f3dc1ef9f48c1a8b8b2b1ef69f14b90e8d159d51b70ccc14adce6dbda8eee2b98ec6c20a13991a637ce85211b28625a62a54e9da756906055051efebffc2632ab1c3365c82b5c977b1a1864fd994bfa2919550423ab83e086ddf43a08333c388250df42a4d5762a6ae2b8e3daa44c8ce3e5a5fb5ba4070caaaf1409062667a57fff99a7e53e0f79c61057e5d4269dee28d670449d2fcb13301d715f3c2c9d842622325edb0c150975b5750dcb0fd9e9374fce998450d5d7c7ce47a84b9d83bd8d1c53293927bca7c6c526c9b3bdf728a247035e71dd865955e0abde53ade6b91cefbb43e88d9e3779dbf180dc7d8da16c936ccf5b5cb9e2034e725811e81a162769c058a2ea69bd3271bc9a7f7067afc6109c00e2627fa25ca0fd79fee0f0a462aaecaff1b0012c0ec942f8c4dacbb08b49945e56376b3745cf38322c6101ba7a2823d582141f002715dbcc4bb89d114ad39b88089685499c412b0e1dd9d41b3f26a1d147050f917191956d44e18846114b31184ccd23f6686990412a31504de3c05b646cd6e149a8435c1b0c791acf701d66237295084bad18071240aeec01d5aa0022c9e2e864aade53e5a4d53f22d83f986126e61a62e66fd99ead5232c8fbd496558777381a3c9259779d32aeabd2d6e5c0a722dc7f8f66e2a5d7e33fd4a9bd6de023f3a46eabeeb35f2b92c64dcc67d152597aef880461c1764c39b40a1acc20df6464f4172695b122d6e4c549dd6a0ec857f6be1244c6b9ea5df6de014ece2f19f6af3e473c5438501f99bdcf9b47a85fb3f2afe85aa1c4bd3280ac59609955dfe16fd4cc3f41a55e4b354409588ff4827cd5ed3932a5e2740856ca3d19bbd8bc13ca7b552864cb0a1628dd0ab10ae92f06addcfdc9ab7e0aab4b17f117b637b5976a332779fad674a18939350cd1b9c17010c28d0b152cc8eb306be5d1d8b44343f13369916e4e5044d0f5d962ee122fa14303b0ed9850cdc56cc5ea7ced35634038a40f287c27961418f6302224d0431011a604402f1d4884e3a2e259efe13f9e86176a2b695084e1c1c1f7aab0db8c5977c6ab7b4bdfc0a6c20c7602a5e448ea4e2dedd154dadbef1bf3851592474b373a21dbbbd3ed7bde01e2aacb418cf9a79a9fcc5dc7039c50fe2deca4370d351fa295ff6d74041271c1b453dda803d97d3cfe19d1b2a20b71e75772ced63fb69044d39f3afb2b7a28cf05921ba89b8c998686def2714e13713c3d8b512563bf82a818ceca95ff9db9c0813f285fa869b19ce7dc78fd3a80ffb0856e1ba3ec8d97cfa2a0e7452ea407b3200d7ba70037ad50dc0f5cfe7a9f7de92bc04c6acdaf02ca1bdcdc9f53413d891b1412e2a8fda5ffa51a300eea636d5690a63b027327928e43c05b9a735f4d8a638c07b55a286c53d43637e10f536f7aa510d359186ce8b2a850e235e439c1ccb1e7e8d31021c19642230276af8c4479b46a981ad46438bbc9534c0a1367f7ecd7a73074b01fe6e35948ace550c1527dec8fff249d9645c7d34e52460126456bcc559b4e400e04c40ddbc3a8d7a8adbf6be379fae4e7f7653b88a54ef13d96db7dc8aa3b1cb2b9f8627671bd0db1faecd22d7647497379667fc30665e889eae8aef2107a08e58f31ade0c8c5160a186430d3f457e28d2372e9740470f0b425782210b4f7700081b09c7ca8197513978a02989aaa27b83c60f719eae168f76511dc61794712736348a3accf54bdf95984a96604653550988445f7e2c5676b972d25ccd452071c0340e9227a07ae01159118bd12b0a15d6f1938d2cf3c5561cbb044eda435fa62050d99c83731501aca5eab06d2a0788ff0f984fce93f46fbd391b1d7a12324349fc45601bb44a2c60ce78daf347f30f5c893bbaee3784588e4ec29c7126edf1057f85540ec727019c3ffadfde6cb0abbccb1c93b039e6fd70da7c7920efde08da5fab7473dbbdf8f6c40e098b03eca168ad1bfba9d9f54e34cd82eee06945dcfef0e1664343f4af7e9cb0fd987bbbd3d3cfadd2abe06f96acf757e38646cf089c546dcfe214c336eaeb5d76ca1be3bcf90b75c37721e938af89fa89d6ade832a5703d1bed5c34ba3da1a6bbc75821669a6188575d22dcdb054c83504a882f4d9416697270aeb85f40136bd988d8ee6cdc9b03e6b7e26f05c1299f0c0e86baccc96e8086249cd9f11eeeaa8621ed9adb9984394853135edac257b665f127a10230e5da2c9c2f87b2baa53aa5ea09cbafee20615833866674c606766cd1c311c0efac603da4eadc2e508efe7cc23d23ea3824424c1e60331f6402909d117a17170df9a8b91984f269aa174c51c52a4d0d2635ff050c1dd26dabe92ac650ea65fc4ec2b33a063a1404a716a83cd8697e4307acc37cf4d7c85445ca4fa1ed2a432a7382056072968685249a4ba8169a28ebf1e6e2f88d9484cd6ff8fb76713120ce64cd40bc62a63fe9390c2f2eedb7eb49ff4a1a29e86ecd2e7d2168c6f77f5c707e654137cd4bffbc780dfb6b698c6d6ff96cd5dca1bf21c9e7d0ac6a8d3f60eb674e3a435b4f233a0f987bba8807a0d0b3daf058e9fbb3187cd4bb814c409b5734b38498ce7044aa0ebf385649137c71e48d331eb6b585652b616f519da251d13411f47ebc88c869f5e5c07f4d50572b86ef553fb750f3414740b169d4b66f9e99d4c030fc12b6aaa49535f4837af507749d810e387a4a9f3bfa12189fe26c562deede61cf64be77eb8667074cf229837975eab84f84f2d6c61edd2783a3469fef6827c63059c60106ec7932e1df51b324147ed744d34beb8273387806bf27f211af657209276438b3d16bb0451d68d035c74cc1e27e74bf0e284dd082c73453d09d82b8c788faf781eb6a110474fff84f50536b0d74e3633830db2732ef50a076fe86f82e407cd92175f9103f40f64c0574e92d36b26d7c553e346e4f316ae2e8edbeb38a4329e18140bcd61bf02098a21c6003bb5ea5878452efe9144eed5b6585dd79a4d5861acd33c8b271ebcd01bdfa09b68fcf0a0e46daa54d6661ce72a8b4dcf080b53a724e0edfaf76b9ae1f60bd0076991d83ab74576546639d8d88fe97de44a14561fe45387204de7d09815808b58639af2f0ebc8e9515dbca6c4f4c2d66f234e2744ae93270887d8839e9e0ad4f631becbfee24c0adaa2a0fdf86aa72621609b429462041174513445e5ef3ccf6f697387c5a3af0af7993cbc8a7ba7c8dad34b513a686260f57ba9e48c340190b2956ebf7a27fb7ed2d048ea04d54ef780416beb8a88e7a5721817d75e94ea647877484567da2be40a9f7f21c7372d27c52f35f81ae02cf892e695db4e7ac34a42e1713403d32d404c9f3934df3d25b7172e06d5c62def4b72865c5a5f0f36597a43e5fb6ab5c6978788f13ec1f329f50897de1178907215f5adf15a821bfe4c50c71c85bd032abd067e9c8f08641b9d2ff5c6da36588eda80184627b218697594966cd040b505207ef79c4f2c4b9e26e3496478d343bef3f0b06bb73ec7669285dd3ff07681d09f8a0b0dc50f06bb863d7dec61e3fd910fdf6443aae3a57c91c0b8155d46ff06991f46213b1af48e4b0e703a49634b19b2f4d2781d8d8c97aede584c7f37fa8dcd1c5f92e9e470fc92220c3a8f4099f9d2a00a580d3641526e252187f11bdc25477c064f8fdc2c4323abb2d1d760ff0cce7b9d232ab784f202eab3a78317482e311b1b8c595082b3eeb9cbe81f393f69796b4ff5a6ea94d0ef2eff4f0280cf7f35c5c08c790425a285f380381d44e19a9f49a37241646215cd270fc6afa80371ccad3d0d236b8704a160af9ebc1facab6b75f1ccc143c981e026ca76b6e9bffa0c44619440299de0f95151545760079e7501c8dc9b79723c78b476262c5b9e52b2fb5663799f14facb38ffb356df57bd26e7bc909fb57068f9813ff6678be55ea3265256d98f9cccdaf62d9c659d214478aa04e8495a4ab2e53b8c441110936b116faeba72e7dd390c3d95616279f704fdd81891e2311c5759219feb706f5b73f21ae0d58c85e3876eb396284bafab1e68b9bccea786a8a624a5106b40774fba8a416acdf5824ee7c8f0d289caf305b685112749f58172870bf3ef6d1c9f2045eb447a6126f31710feafec3557e8947011c86cdf7c9295963d4230197e0fa760e25b50be54deac7ae3c5a18c3195c1597f38685cfd8dd736659370b306a330d2feac5c8dc46cbc28bea46b0ffa568c3bbf415b0b53e013e7238a2090cbb09c94119d6ea01c3ce13705a3b35ecdb0d879320aa703adcd238ca2d1740c8c43b7394ccb9e6f3a9c6a02ccb2eb1e6bad477409ecca7563873c83d59ab3a14030680e54cb83139e1fc812659019108b39e083f7be879bf84a62fa9c3a1d0e4edc840fbfe865f364f2cc8fe796100f21d6584e104cb1969e40ea8a9c64c6115fa600a42dcb4aa751aae48f6bed353ea8407c4e1125d988a73a4c9e9af9a09a8c8b353ae00f0c1476fee0c34bd92fde7d3bd6b9f387cc635795cf367cc9669535cd6ef50ef36374b33c64cfcb4526b69ef6490873aecd49531229cca0d85f515625545987e2ea44243bb4702f76f74a812919575afa5f7adf4a105e074cf24a9548ebe4ea492d7f56c580b6de2f21d980b465bb6f3db354002830d312b9aabfc6ab45843efb9a93321b4abb1ac99a9930106eec9492c4c43f12b65ac4371847d76cba8984cdb823f161004689cac45ddd57118faecb6c90f0748bca43810eb096678053e670b1a685deb5d4d0ed6337a123d615fc8f8797025d608d6d5557d0359f9a1355d4f13dd24a8b8479185a4af6e7320003dede1e129a1ca290fa703218532bb0054f12bef04576ac286cfe82a65252633ccc3b731eb6a0b9023b549b09e43da06592b11bbaf1c0951faeafc46e63c3e869a52cca01b4bd228441bb18ecf32ed0379cd7de2b3ac0b71bdf0b60a4e1da1d31614496bcd6a955cb0402136ce637ab4df476e92f9c7f1108100d33698de47e563cb6b9e2373f5f8ee13873dcd66185133673bc4ae8457da1b5a4b5436486a90cc2f18d29f562d1292e252d0b107293f22d31ee1014a6764ba2ff3dbbf0cb187a0ea84dd7b4549277d4ac96545f1efc46463773032793774c153e404a22b9f2e5d6b19b99975f302663db33800bd07
For a simple look, you can remove the surrounding border and horizontal padding to create flush toggles.
Simple flush toggles
View code 3a177e594a49a6eaee085ea0e0b7b7530d09c9055b721b10ccba610ff7d76b62055f6fb8c3b1dba877ea1c9abbc48547f2d9d507c4cc4127855cfbe146e5b4535d62d0ec707f3e198bfdc9abcd22f79ab61a26362ca069797630a4c105776ce83be8dac01ab52cbb24aaa59cdc47f2f22e5240667be24dfc2219f4b1372bbb2fdd8536d42a7418d423a3f5de113f8d0641f035f43eab26851f014260cda210884efb53d4a288e90b42a3fa3a5cb494b5cb93baa5859316df55e1e7d45ea0dc51983302572e5bb4e1c93ccd8710dece210309151393e90658394bf743b342919d271e2ed687dc0a92f438d2679159e48eb25bda14ad6d62c6a2081397d9e911519984f0667b473aea26a48bfc5357be95d5f314cd763acb9b1ee0461bcc286ce450d758e3a48fb8fea67f4a380ae5325bf2a27fe9595a2a9803c08b0d9d725a38976fe4ae425e0c9855ec6ae445cf2612f81087e4900eef1e8c3f4e715c32ce4e35fbf601717beff1da7ca9b33248697b7b901e4a0fd9444c73685511edada33f4b77e100337a5c76edeadb94a7f4da6b3fb881c43fc273911ef4636c686662ca4572826db5cc8bd20dcb9c8bd89ce9aff9e8ea9456705a0345b2e3718b05e896c675244b1c102da598a42bc110b1b86744de249a530d76b18b06f1f7484fbf897653cdd5045dced2872eda184bf3407b1dffcb0a31d7153df3f6eac445bd3d52da908d3a43304f9b7dd925cfb6a6d479a919fb8e4c06b468100a5744545fd5696b24b3e2420249514c7975dbfd35b443f252fbfb8dffc69c55eddb241afe030d1ce837f88b5e857e9ff7d8bb4873d911f189dc23f5d236bea427dad18aba159e40b11eab4dd290bf733148f028c044e1f19bfd5d91adda7efdf25b133ac90504fe94561408e10ea3095172c4ece0572047a685e60e66444e0ca7c87e064ba1b2ddcd068eb81bb6008b54145ad7fcbab8726398467302fe72b2f649f6e8749576869d9149af25310fd94bce8088c7d7e8d0a41bb75e83f35128802addd78465bdbdfcdb278dcab5d79edac5350b6b809c28f2f22ca4919f3ba2a7ecce42d519502fe2b6d31201165d0f6e588812ff4756a60ffbf99e359d719d6a545b0d7e2541f8a5f871ccef42cc7255e9736cc5aa19613561ef810f7b86132c538c91f11418b915374dd727916d8128a8027b4f6f808c91b64de3f344c0aadbf24490fe9defd4a93235814f449e4212c4cc801349ed119f3ab9867ced480d3d2af90a2944600cf8e430b4126c6c970638a43a7a8a05f3789e0f3667f9a96189e06fc4e935e30b6c0f650d108b52bc4999336f17c168e47ffb9c4b8af1da59d06f60bdb3fe5c5a64b3d20f1742fbb504058e12de047ea81277575857a28295fe5826b7937cc2ced3234e7ead827ed82df6ebf8bc685952931361a07c0735d8918cf8fc41ce5631f5b02b36af02bf51eaed61bbd759f5e5f7a2c83428dff5f73afd514221c6f9ec38f95f405e164d74ecd36e3bd19661c362be82e42c453261ce80bf7ea5ab0de030da3f4579841b9a0a92b94b139e93f2ae0c8d88cd3e683dacf568579d4382bc4129b1c0c007cd41e14315ab122a69f095aa1c225588bf1af1d09ee1429248f5b290b2203f3d5f8187b83463a0fc8e37fb9da60d227638275f26868fa50b899bf5bcbce6dee22727f1020cd615fa2165a6f329cc5e11e78edcfb5969686ab49f194df59d27f7790c278d10f2c93839e60c0380084925d6236ee6ccbf69a635fc9de046e5d2ecebb7a5ce1fff33b2630d7267e79e25cae836cde3cf579f69ccfd62785b8073f9123330fa73e06dc173bf1f7148811d83f520e557b8d886533f00eb449807f12159bee5df0ebc0048b91e3ca5d03c417d14ebdd5fb7fd58b28c6cdb4ff8b5cae29144fbbea9074c9bb1d6e98c093b0011bcbcf53df7369b5a73ddd13fe10009ced39c3dac4d0da07977999ae96e76521aa02e28c40ddf0854650529c3105374f8e60aff3220cd9eded1ec557bfff17fc78ad09ff56bb26c05a74daf40f59225a9b7e5931de0c84528f608ce298baa9b2a441120ef755af70765039bb17ddf7b6b65c4b57a8a5434f785e1105b7a9a415597cec63a61d4db471e31a36c3cd1d14144d7842722477f7a067cc5557127f8b4fa7bfd3a22e5e77e47135b217633ce0729005b2286d35c818f109be7504925153cb3b80fe03cfc1d877a76cb2dfe648e7cb8bd7a82608399ddaa71352cdaf113812e36b317a578ab9fa1ae3cb081d1547c8000b86b13a0f911c5ec04c161e88d6b2aa507bf502d0bdce194bec4c0e0a5a28b557ea181d88229a49174a082111dbf3c7f8b03442c8ee0aa8b18ca46f09ff80928a687fe1b9f6670005161d1216893c9a44272565da491865e0b572f53378d0f4ffc94138de53defbd92807fd7e75e4e96d7aab90d0bd1275ad26182f4b9d0db717d9ecc03c05ac11e9b4a1b5e81953970b05b9eb9ee260db9a2cad5d1cb0551536728c40925d8fbf10d06005c3313e28e700bf43992c3282f2bf6e4ea3e3c5b794beca52b059735006ee92ab34f7ba4c8014e85ecf082e0618d2b338d2e528d5b76f3a761be3bca0f7ccaa75a00b0762a59c35b2ab4f5842b1e0270a5af136d680ab39e5d7fdebe7f31919fa5e8b4b03c4efc90af03354f7715a83f9a226401deb286b2880ceb58de4185c6d7c5a35dffba259589da5cfaf1a849523823479efa17d4460f0ff41f65e92d2e64683de12b4d909b0d69226dfd34c2e8a7f0feba36782379a1495906b0bf695ba8b801cad0f7fb179e33213cb4c40fe6632fd13ce3c045988016ab8a92830cf0e01610e7d194bd237fd46d7725ad262d5035e034fb61b3c0b939a6faa4230f47b53884587a5d164d563f5410e0f9b42ee46afd97032b2374fd69215ba0c094fc33f85a78b531111b320bfe5ef28ff644e6b9bffe4b4419f3476654370f4fe8c388f0d114da1933df49ae1769e694fbfa20bbaeef5eabafdefb5c17c1fab18544c5fc90ffcea04e07d6ed8652e5f5a34a004da6e40ebc96de4e18370e520801a3c604f3ff6b09cb06c8e424
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.
