Toggles

Use toggles to organize your article content in a way that makes it easy for your visitors to find what they're looking for.

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
43ec3e82599921b38d11d2605df220290d5590052f55060454cb6baf6f149a1609094e2d648f2ac5bbf88f4884481e0fa8994e4198ac6f117bae31ecbb25cb8e0cb33a07ed5a2954c59939db6f88ca7491f4addcfad41c2793fb65dbc92b0ec56ddc9f155d546d3be16b570a1f36bad13fd70b7274fa7699acc759842c65908b6a3512ff2c8e446ac0d11298feff15de4ed6cc43e963647587f604c3d2c1a328f3bc369095a7ec83c4212f44e18a1d1cc1c3973adc3ecb40db78970150b174f89e5262d281a4b1eb9b6443c55778cb7fa2d1750ad540e4536c9bccfdb181a82ce513e73ef19c62cefc2abb463693a55b4c828e2f7d1ff9be2d0da5b9f4f008f1c8d5d27ded43a78c4ccda336010ee04809a3e1dfdd45811d4dab46380230168d88cd7730e11a86cf614ca11516227b20241b1b23d78b2ef6193f4448ee24e0b78bb04b0f19972eb3d06a8bd97b150cf4dc765ca9336abb1331d6c917c8998140f79f77a2829c3afc1e8e2f1cf3c7586e9eed180e4688697365d86e2aa8ba4a989f57d0e1814f9069a0d453b7e2291cb8ea3bee4c70917bc04a120c168c3df9282e808694a61272c6ffd2a0457aa829b3bd21ad34cd3d268966ee412b36fc553f950684e126d9c001f1ff5723885da459aa5544490868a52d1c097611f28aeb247f9e1b1474ac9aef5caf293fa61313b84302acaf930acdc5fb17427c6a65d33824c0ef77344fc950bb2de60fa4236210aaafc0a189f738a1998ce93ce8f763a30df848bc6f8d6af2c6f3405922d87b859e282ca81857e1e09996afe450b1dd81ca6bc5ea1ed89a0638cca4df8bcc97f7eb1aa3ca56c9b488cd4c367e16f15bbf6552c06e15555e84e3b1b4e0ca13dfe9b2284a9131a21e44f3b97d6159e5c56926a2e3ac547ad9930107b7b05e30a7f34dfaa680f4a5492f4fe6e536b2446544dbabf03e605d4799bb7264345d52e32995c834fc7dfd626eedbb3d09a004829bbc92f8be07596775ffade7fd4812f1b6d4073b53b3d05ccbb53d8d91b119919296c13ad2a4a4cd8a654120604e90a8192f515a7b584ea54d4274658d43a9bd0476fa2a5f4cd6b2497430cb91bfcdaf770a5f765d7ede621ff4af18aa0148a39dd7626f710ad04e37acc3629c47380ce721960409044a421f1c5026db7a8789f12d95afc496a6aff3fc02432ed8805283dd78e5679ae4a49e1f722f73c2d0b3c862e9f17b370d5b55ac8b31efa04d450dfab392db03cea9f5d9de9dd105270bfd71903c11a30e51812150f0fc1e082de57a38402714d4332152e66ac022289d497e8f9151b728b355996b268048f06e9e1defd2418a33f44b68e845801d282d568b7ba92643980255195104031bb4b7ee25aaab5d979dd0523cb2e03ebf750150c6858729f60614bf55a2360c05bc13e567612ebc31842cdc7a21038748e102c754979261cd219dfb1d33d8f21f70196dee0fa763daa456c1d77b3649e663591a543489d5c9619af9d95a08772cc0ac96a88085eed5c6e58d74847002c8a048683cb54781125b75f8c7d94f36c7ed74bd691f46c811d7cd1cf26b182be364fcf24a00aa62d44a7975d429522cd9b1d92847ab7590a87addb685d01c4b9a3365d76dca58960e37f6d684a7db8852484bdc25c7c439d71c7b5d064e849a88970af332f57b0a714f888c3426ba10f0095539c92aed582760e3be250a03cb47880b9c7d596c2345de0651ed2ae5014252694f2b9faf1dd131e89794a50c879426c11caa776bd072c57ab9546241a9927423064a654118e4a65615d3002f1f7492a4d768e86bd5766428056b2d48452323c7a8ea740517aa65854ceae32d8ff5004912a6e0844664ed0214fc68e439b2dd38b689246c36941a8f5fe953427ea24716220830f3502236e9b478f7527a6cc20bf30982513d3de036aac5cc90dabd55d157a9ef6503f718ffeb23d101f5b46dc4372ea7058fcb692d2001e82d871b70ca8f91f130cac65361abc590355e4985592f5c315914d26677462d095609165c4ba59d9de5739d852ccd13fc196327897bd0bf2f65df00f3e5200240319d4b5927fef0b5de48b4d35c20eecb5b1afe96b7c555dbb1b978fdd152a3562cfce533e7560c14de5c6bd8a962f883dc4d5e72acf97652946e9c576641fc037dc834b7128073ed4c2275ec35e23acb8b9cbfaf250dc146e59e87d393e84728552ed8b6cda67b38bfe53ee327a9aa6908befcb639b3788b68958e31ea581fda2575334d8a4c

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
864db5fb49e84daaab95904a431c2563c9e1ab7b6f9a41990dfbf4aec4d742c152436e5ac29f3f88f057ab6055fb47855a38e60548ce77ea4ecb5dcb57b333cfcdeaa387df5206cb05408186e67ac1a6806c833e47cc21b5edb55c5f9b389adcb398e347317a06a25b89931f089339221fa10dfd6a82f514372897a45cf653c908a5f384cd5113608d456b99d3d72f197c31a77184f175c8dc0b35d31f4d951ee91a32775347c9b2b2d95f4aa7aaaa427caee86564d806fec5dbcfc8983d766c4fa25c8be38c929c678f6c1ae3f2b83052165695b385b8d254c1a8519b1f13629b069d6358ad8a60990d3e872f7126b3a01f542e198a72898aa4175a059e1bdee64e0bd7500ca45479acefb27f11251322f6853b1a51f8e978c6b5e29e8d6736b003a25ab72471109207b8b1d5f57fd9ea4a586c5ef1b325eb6153ce9b74dce233a76cf63c50baacde1b3b76f4b1ea091341fd55aa98dc192c1d74a2fc010a198744db03b7691a199355a02ddb9d3eb415f4a753e4f922dc65150e4da05472149182bae311e07f02e1c305b7aa06952f8c582657a4c5a101361172836897994f0586aeb717c867fd0bbae3314c30f8188887ca25e684b1746c5509699d153b777a43fbc09e810cb1c5b34f6b0328ace7abb05880d0201033c6b222fc8d6d349ae567fa6e7d5f4cd8325ce8cb02e6fe8bef4665f699dc3eedaec18be26b7f6bc4ebc4b715a899e574a0a6a97302f958f2cb7f039274940514edf57f8360fcb4b3b70fb1e0db168e956e32fc59dceba0d77d6a1cb5d4bf3f7152549c1912f4caa20bda947c28ad0bdfd4382072111240986fcfe03e4d7c08568587f2fdcf348e5270e5fd78f094984e334f2fa85df6635999dfa0e7acb3b990d1f510760e7e7d72f6713c294b3211e6ba43100cb756fcdd1167f3ebe816daa1973bb8690b21a175bc00364dc64ddc124777567e91360bc628eb5d477d612a67e184f33c294f47772204805b71091de527db456f9d29b7e12147ab53a1183c6153d0afb93beb78c7f0658430a8d0f0386bc959b5cc13b4614287e4c205e760e08f7b691e0533a6eb767afd407ce9f2679f581a4b45806d26db48b5debc4378b76f279e659a9fd9c1a611d77d46bb422a5255bd6d793eca523b74f81783c438081c66e87e5a1a3935c4f0ba4398ae457d4f38a3048de810baacba888fce91d8f46a265b0d56a25245a33c48ba850ccc74a61073d5c66c549a5915fc378a253284f7199cace1c0dbdc8d9414acb00603151a36c57a603756167413d8eaa67f5c58bd6ebd3f8f991c9cd28192e5c6d50cb71cac7e4954906c1c1d08eba8cce607d9c735b9074e8457b389526b4c4204d9665a1fa97db9e421e876fd2c251e3b09c58d9259f054bd677f5083321a3f45baa06c7a3cad845f0af193076ba5429e04e52753c726ba8649416faeba3e81f5ea7124667e528275ff3fe0f00c69b3a9190728cea9d5dc73a998b4b96497f94f744126c9224b08ebd3b1a19cf7fbc884229b5597bdf691f9f33170bc843ed9b53befdc97fed5e5d16148b736790cf41e08855a227841308ba4ae7fa4314209b463beae3addbf14b3dc5371fe00279ce538729b83720564aa87e62b6429a9a72884238e84073ff8a4fd286117f1140f0facc04a1dc5c6beb46ad43d33c3b31e31b827c35664ae29814e52036ff6f4d90b471ff5e998d030e2d6e59ec67d2d7625601e7493f4ba28cc853813168bdb8433cdb826e607ec8ea05d13b80270900567a5de47f292f7bea61e765df1f9a05671fe8e5ae9cabddb1c6778848eed17433db0194384d8b30151eefb11ecda76e4076b1f7b77895d861705c699aea43290341cbaa58dee5f4468b2d3b58a448cda27b09b68ed4e014f5f4d437e3bfce8cb93f2d1c858b3edd0b37c0bdc3b3672da4ca6e9475f111b1986f193418db1924141352154b6037ad5ba0ce73d6fcb4567d079bd00ac76340e06a7cf8df9d5c81d48190b6d309961fa8b516e9e587220c917043f3ac108091dfbf98f7d830cf2b5d955f77c1690f494da4a00e701138d8f1550d15a1dcdc80146d696380fedaabe51c8bac56d8d5d83ce1de00ec8be0a0aa559559a5a8c2b28258ef860c6b6dec88d7a9dd73a6114fba5e5654c2926fed4a41b7015c96003eca7bf36b4d979221e63535e1c60153e3561ee3974e76a929fecee8cc32242be0f93689218bd4e7110d97c666488fe7540503260e925a8b35c8487b1e4b18d54193eb95dfa3d2d332ed4cc1d463d1485e497a5a8c4c22126f20732f28b7a123de7b6934c9883d1cb316ba09e6b4f3179d9782c481288b57638d6dd5c6154754a88a389118bd4aaf1ed0ee26767a6c4a05eea21a0ea2365001a991555c449a4966a6808411381a8fdc876c8d4ad1685de05353ffe5bf399a57bc50bc75bd6aef4901d8ea0ce2b81c3685528928ae454835d41b7b7c8ecef2d165f696887a55e573b0e51b14dd5a9f1e8d0b0508d881314c4b83ea6a55ce4d30741870193889eb80ee876af603693a739c6138d0b51ac74b6dd12183c6ad9042333bf29834d3ecba93a221edca8e49ba05d63782cb689cdc346423ed98d070019e78d115ac4cc1bdc3c423f63119361401ad763fb9a39e52eee29719e6f01adf75f21f468e359b8f5a74fa8439e2360bcd95ecb676ba27ee0fc7c48398b5cdd5bbf53a207dd1c210bb8ffebccd7033a7fc941693d1c3fefb07f9604376b7811cd0250d7d0313fd827ba9bed080d96db2487ea6e0b11f9c87f4a9ec0976d4c1aed543becd2a720c7eb14742d98970dbd3665a944dbf7567c94a2d7ace4784a1183a0ed448c103ee2cd272f025427787cfd5fee18e8cea2720a7c33541e929286bb9f4bfd51500ebc7370eb1df8a78bd35bb7592c3e20bc4b6c0ebf408be8d00c980c0d63ca69ad8fc3eebe73edfc4ac8dea38931a7b79ee7bac1ce32763a2e367520498117445f461e1474d976042cea9ee1c4057888f906205a1cf2a3a74474dadedf685a68712c08dd99dbb35d858c84d42b31c8f1d8dec43d8fea5c0799806d14f24de19ca7a17582b98c97dc727b504d4b258bb69393901bd9f5c3ba10d3c70f5bd0cc89c6ecbccfd82036031076c9c49a79258f937ba6735e06a78f32f95cdefebcc7d304c0b525da0b4b009bce875c683577de4ce8009b00237b98f4f1c032c69b362e5fe425d6f3d3
Large toggles with background color on hover
View code
8d5aca961f5be8a8a3999101be7f180de84c20dd8d54498296ee7512a97087e789f8ae8371c1176b107808188e597fa5b907ad4cd376f65a59e5a82cf2dfe29e050f4ca6c1df1d267585320734188cc725b005f51a700b9a7acb4af7036f3cc18e9879a596e18696c0067e466e34e736294d5a6e9ee596c6e705eed362066b601b764df0b1218d5d525e57c211c9eebc94c9d2c6680d351e2c3d81479bdd5b90a0df749a4ef237fbe83e0e30239385e8403aed632ad3fdb4f66764f835b1f47b1712af99ffac689fff3581743deffa1d2959305536777fff0b20fc2aa04e3a790f99f075a77015e19e4429745c951eb4e597f3653c3d5870f2a96eaf85ba2d418c2dd0a8b8079f9e3728d9fc255f476d720cf4d7e5dbde74a50ecf4aa87f849959b1ecfb7f693f37fce4695472e07269176fa18d9226a3d32064b4eadc28c09e9357d32d4dfabd522c1a56eb11f3c41e8bd7d3ffbcafde820bd4a849d016b0234f78e6a71d86395d9104637895d1b4fc98875255bd6e956740324acb38d24ea96fcb5f2800befb7ba3d51c6986894eedd08b9887138284f543b5fddc88226a4fd537e8ffc4a76a54318312afc45ec5cc6657b0826059b5f09848cf5d33912c9059c669212a4f74e1e92c4c707c7cad33e02a981d54a4e9041e7e534d7894319272343d3408c4692799fa76be844cb25a6f1a754aeea8aac9b517045a672f5d4243358264e8982b32da5a03a6452a3707e64b4567f20982ca79a1197066289bbbbea625ebc4dfe16e9cfbef0c0c556a81237c46e85a65dd3c9cd44910bfd8dda70ec557c1d531e9a06dcbb5306af19b3e191a805f8dd7a2c828ed6e9b34bd39d0b1523c580f8c286bfe75d6835741b5e0d4729e03904b8fad8adc5b4e10238764403d50c6526806aa3ba3dca27d5e4307ef642e19b5a587e52a3ba73d30059448ff6de2372d465600c59c7d0a1f461c095a718da7704e1e332fdcaa9ead919a8851e2ceb0914651cbd8f4a28e62147308d2868d32d06fc00bdaf946fc9ad3d7d9454ed17f58fe75661873bc8a247d38e18004dbbe6f2eeb0bee88ef258f43d51485328f29d41e7c5ea932b374c81a71525406dcf14fd8d11a1f86f3adfd48424f4ddd5a75b8cc382fb0e91e68b2a0001c2b0675d17d23fb32cc529748af85504c65ddb92de9a84603de99f92939e4c2f335dd7a6a5390d01071529a2cc2acd1e0b0af6b3b38ad0c505a789a53f08137c2c9a36020a16b5410d746cfdd8683e7951fd2711d91da62603fd3744d516e64c3f395baa7c227bc2f473a11e0cf24e2a08c140199f54ad9b2bd04058440f436b1341d5b3ea1649d8693b495135c3c66bf949f5828cf7eadbac4122c9ca8031bbfd8bde7622b39de77f1d88b5f851d5d929e1185132695b84566ccc01103a888d71d19bad44a43184aa03f88e98bcd3624a2e3a07f1114fa288b3f82253e3291100a412621eb30fa9f3f65943811bb1912019577b2fc2790a15ffd55103e195c1140e06973694b22b5dd043513f89c13ce4092c80fcd2eb687cf20fb6905509e98627962258d1495c813e414e8f3d38a451fda152dbe9947f0133f04c7c5a5ad5afa48518e363761d5792df4ea79d73d5cd964f347c5ed4d6c4df213fb52975f8fcef92c46509775d5cad7f5d3ab763da54400709dd7e4846819045f68d059e235adafd213dcb1a98de63648cec23d229e3f6ab40fe52519885382f81962e22bb5341039bb7f01e856ee437226e30286a1c3eb8df813aac6c7c11876e44db8699e3b4cb328bc462124363043e4c5189bc870077880ede40be02912de36042a64c4e64e9af11b0df5adecd038d40404f0811187e22dbd1e0884adc7fd07443729c394481629e6fb85537eff0e58f4aab3f0ce14ae1f43e1ad3c98cba846467ce667c30813f6077d618688026e28849c837b8e0d6540165d2f2f96d8163842fa099468b09624fd2ffa00c40cd9c21f4f473f7e1d48655a3ccd0661a8548392ee0660464fb3ddc8387ed6fae77a913fd904b330f3cbbd17f33c7b03402d09c3f76b4d74f01b4b5e3095757467ebc7e2b1cf0e19c4a371fc75de1f5ea2692b6fc8f75ee01728e8e3329f37c7bded119d89ac37237dacc1e0df7afea5efc37407390e0eff4a6b58759eb8aba27fefcf0f1c62d6c336a68101f13941b09e496827c87267c30735ab4f6d62580972bfef0338821a5e2ff1f0824532b70c527db28ada6ddf8efd5f9981b3cb95fc065719bd8471cdfd710c4200adc46d36ecf7463ce7d186945e9300c9ed7fae2dbac644087313e923ce860b2f7484eb550e5fd2cc3d53b8efbf80f8df675220d7ff57d29adbf1f1181185df888485fd7c2fd3e28a23519dd3a643af13f7345bfd74afd1b318f842d0d6a2135cbefffc8881ee84d21a7180
Large toggles with icons
View code
46550308c3e63922c5582a95a023aeda19cf33c4d0dcc87cc2e5f7862b94d1d496a7fd5b6731bf40305aa686c28a1a1a0a14034abff01453f5b33d9fa5d47bff3e0e0e53d66c47be14ca3f12082084a7103826abd1a090e9a17b67e3eb6680ac93f6945d52c9bf5ac3dae6387f0b7228aa2c5a5e268b74cbeb06b83dd3ee267fe340a2a1de14270e0c9802a066ec11963847e3255106c4cb61bac40d28a0cd14e4c9ae1183a06dd4b0c79eea902634a1862f2d63aee00dd24293deda6419b4dac89885ee05ac3af1aef7d9fa22b839d00073a260ea4c29429ac603b4ff238aa97f88022de3c61655800197fafb5c4fc8e8dd91b744122958cfcab1b12e3f1749d55a3dbbc3836189d6ba66bce2e254f665c5aa155e4a95110fcdf2d770ca22895a0c9ddefe08c0fe741aa5011d7721abd802ea2ce0abe820aeee853a2fd7e50d855359b13a42dcc2cdaadb2a1fc29c1536b27cd026b037bd0fece5141bb0d2d92e37cf9f329c83104be2437e887ae3b03d91a1677132eef70b8e0f077478c99aeec242875bb32934524ca48ea7632c6a51f347681102b1176bd202d4c174cce5d46f33363e7aca587dd66ee57808439bce3460b4bd453bf5ca4cdea3dc5762fa629a41ba22f3c3b26cd48f6edc3ef73e31f016150c565fbd9f1caf4c38f4886bf65ebc22fa20d6d8c769e4c6eae26de489a0fd44706a24784a45b133578bddb77e6bc81325777f31e1d8570dfbb0497946ca86556627ca6e6b414cefadb517f521ed30d044f7403dbc68700a6a2e979809119b24cfe75093c91f6cdf2cd4b3498aad53aced064a47ab5e73a0523090c1b5696b4593823f5f6aaa0e7677a2ea1bdefce56d1e2d456e6036b875d62e6082705b61f624d9b05459acd321614b223e32bdbca95f4bffb23d17b020bae643b21b58235656eac594ba3348dd356c8c980ffeb351696db359cc58fd6e56092b9dd683816cb13dbd2dc90bb37845fa3ca7ae99eedd5eab0916169378873577cfa5549ac50960e3c5311dff99256ca9484b1a40b1eaadcf7b5804a4799f36a065cf0a108ca9da48b18f4e2b7dac3bc44f238c06bfb81b324ef62944375a655d2f1ca1d92c4af6f745e509a6270c81fa7c948b6f01cb05f451b00c87a6382b906629e13cddd131d2705ec4e0c74577aaa18871bb216c11fed81332d19a2eba41ef51eb2096acdb2e6d58966bec910d77e73fcc92559532cc49b17f28dc83e8797af9bdacdabd6fc054c7ecfc9d8aba676b19c7a861dab65e329400dbedd29ece91420edc491181bba591479580cc9135f7023241e8c0c5159e94933956cbaf3e009bae35ce2856189f0496f3fa26da99ca2b5b1c706adf814d96c9e04e7b9b1bd2e4512631e9f269adfe11f0065f566c6b9e45f178cf2cc9d5894c2f96b50b60e195039bc9e4d4601723ce60b762140f9247e59e8d76bbfff2cf6bc309f0e4c145782c2dcbe65c66da5ed435d10f821f003ccc84b088babb0b4c03d646c1abc3dfda4f177fa3e9ce57ea9bafe13d6421c75ea1711de277c3a32af9657084daa82ccb8ba3df2542a20f62f14c3418da25aac5c4b12ba7d59579b09974d7f892ed6c246792e7a36c1c13c8518d99adba3d81f45b776836d08f447a8873d4aa7333cb9ba7247b201af3671e248f70986d28cc06ac23fe00bcaa43504b56379ece5bc5ee699a1d959dcc2d82091317e830d8a2be8a2c4fe116acbb00e6cf261da4a55b4ba8fba2abd6d9c74fe1cf06f662e52e468752ed7b2f8e27b375086cc4836d36082c13eb27fa26f1e801aa2abdf5bb4db99b5e630035fa87f7a89cc8c263a73d7a21648e98ad6ec2a389ec767b60dc11910d5a8a8b827f10c8542e7457b2e96e23f16c38d3e426ca641112387e04addcd7d4b22b7cea36d665b74d87c76ff064cfab63b308d382276594c83f6fef746f15f501ac21a6da5ca94f9341fc1ce39e87d8f158e191c6d210b50d295354006fb1e77ea0d5224c22227d984e5f8d3c6827a5196a7fd0425b81f586754c9d2210446c0828a2860b7081a3edfb6bdf13de686e4213c7081b1770930634811d8d4224bfb99309258db08e2c84e4ee5a073ea9f8e8467f17b5d4350070920a448b50931bb3f3198a62e878864d0f9bb0837d7a693c3c951899dc9f9125d3601ede2f15bb9fa5acdfc813b1b18cd69cac0a6674be9e0c758203e0ca1f04ccb499e72b9b53e0ecb44e526f3908cfafc96ee6dc63c2e0253c704203d388507b6814210a13e12fdc130f7fcb583e84d97bb73c351b35027e26242bf4bf3d5c4f3700bf0f858164ea63f1f62759c18dc40c21bce828393072c26bc6ba4a12fd1b933f98844383a5ea2179fe4452eba42b91f12900a472dbf71065c178adbb6901df8665fedaa7e575c6a6bf0d71a5b213b4dec06af8add89fed7dca35f98461f27f425e3441fc8445ed4bcef7500798571ba96fcff778e5fb9eae2bec799b3787bef0fa855b15e8c24b230d55924f959a5affb22923b9e8daf256318e8ab8be454444c6bb28b2ff30d8d7f9a0bff4ad62de67eb2036d365fe90903bf33904b5d3f1b79bd84560de1dbf37198a17c03e92ed3cc2eef9c08373f1446185e6879665d9e06d58f8f2217c770d246418cce92478b79a21c4861b0f979fdeb7a268c9064d0dcff228dbfcac300a05098d3f3b177b881d362d83c9a86471d8c3d5cc78644f0de94ae2403f808497fa36cea70df9f9d38205823f2f57fe433c57abb61b980c95a8143b2baab2b961d2bf2981e3f4b9ab005914af5a3da72c5d3dd80b3fbe96b29f60d209a6583fc0e57cd0dc0b3597b53864c9bc10890e12b971bd78e4426a962dd5cd9d237415786bac26659858509eecd2d7e0d459aa69cde2f8ebaf5dd83eda5662413838bb7b619940cdea73e6ecf6c51f2a568735cb4aa10fedcbdd4b9c5b60762800ee9c7e004ff084c7fd37ae98a900b9464e271e5062ea37c7643c659ed3ba29d4cf56c0c890cc76296eb75f8ac6314cf07203322e700029d663984658a17fb66d6073003e3ae63dfbdd211d7178e0ecaed12135268d7b0bf5737e2b2d3c7759c77cfb567e719981c72000ec6780cf2db44b4d0d812ce5d933e65a6ab55ead7d05f75604597260625f8a36df1e847d6ed0f9356cc1d8d43eaed2b62ff616289eb68fd06a5f7251fae1b2352e11c4c436137575cf20f295e152550a6883cc10515eba4d0d6c23996c7ebac097c6d50a91ecb925a328b7213f9e5ebcb35b7638819d30fbcaa6d97730a6e56e568043d5fc96a04e8119483bcfe89f066a2182b4895a5c42f3bd5f5717051fe1ef517dce16cdeee63a8c67468a19f7bae8803b17235134040aa0609d58b67a8d0dd847cb9787213663954df98b10cdcbb13cb5ef6783141f6ed797acfc068168770bf8eedea91097b9ddfb3df56520c3ca15923cfad184a79f158fd0cc3b4a1869eab5e97914485339395e9436982b5d2de1dcfa37ee479dee4e293514ed0c8e02293966dfdfd7ad39beac93fd5ee6e0ad29eae44e65006a901f4f20ea2e05c7e331a7d0dfa2366171aeab22af0384db5192694f1f495764c743c47faf021e8e5f03c3df43b74e4eb4baab385e4c3751d65eb479c065ce1700b9062ef9095df35afff8daf774c9f2d6d0a8705fdd2438057363d1c93d34b15cecb6717422b110203075950831af8900449a43178fa1b07ec58a0474d09a533aef86cb66a2c7d8280f9008d5de370ccb4a8c23b299803a7a1289f34f2580b04c02663e7d17b66b3d62a2f6623c6ccc1d43cc378516bdb32cbcab8d051d16c7d5d7b1079e5e5b42886e8e22ba5318389f1a1b36a559889e7286b769fd8c2fdd4f2fdace65b7061b179c6c82d40088f2579a691102a31f6e3c80a7acfeb46d5e9678c90cefd18b72ede3c385a1ce6aa7f134bea64ad19ff1d005d8978cb265e13df12bde4ce3dd676200c167db9691778209ee29b2319e9455f82e5d1b68256a825ff2c798dc4fc46cc110483bfe933f14ce94e640bf70f62dba8516608d7adc234e28ff150585d984d277167321d9816730f3ff504bfb5d6d23a34bcf509d84cf600cdc8d015cd4de887f28a64722322c5da5609478bf293200fdedf382b65852645ca258d8bf2350b4967dd26c5ae1c06ef7510b2545736bb92a8e59e664cfd0cd0bf096b34cd4813ed7c07e9585b22de847f2948121551f410164101f01300c199aabdf06f0fb6233f9e1cba3b7016ff0f17fbb6ae1eb382834e071d73eeb59db45ea5b07fc9334159883238b78c02553fd8c20daed5e2f03ab91a242137c2b4365630e24314282866e8ad0bb067b7cbec745f22f35c20c5bc504365572dacf42c84241cb617675a0c1f04a686a1770ea05c1758c2f8d1b8fff0ca6cfcc298a1f458197994388166733dbd01678a2f5dcab71a1ca025578b0a1ab85b5366841eeeb2de0c00f895a8e9ee1d5b07e91a4b2b9485fd150ffed839110d7c7dc235e0739e62784e20caf499c6b8302fe5aff250eee77ce799253145d4daa497a67fcf0aeeb3c1c46323d4aca29ba3f9b7045db298b75b68348932a3bf49013503cf5a050d25a2f6ae00ae321bcec37bc10d78edbccb4898404a1077db3fb4145acbd93d222b7c954bac5f7c1ec7abeaf3d2ff2daecc5e5a9c065b668647ff40bd2f499d42b01ec261863d23bdd819786df5f44b5b7b5bdc6445811ab6bb3d0cca40f716c1bfe8e47e4e79fc5089633720bce97f15ca684191cf5f8f4ee7875bbf3d3f94b9188e2a413daf918e1fe6e014cb6af242e95a69877b6b1b1495087223084960c85dae2beb1e2ad1a4e6dbce58308f964b0374ebeff2463504db0e2d1b7257f011f0577706e205e30186a1a8480acc65974496a8dccf4b3fd6cf5e9b252b2bd07f76149732cffb6ab0e73bc760cb07c08787fe9e038812dfc3e9ee0983438ca135eb5c28ac84821061d4bc35da6d43ead2983997d02bb5231cd529bf56a95d8a366b7aa296a3ceb44e1d65da66be135257fd7a50769293c3a9f2970a153a285275b30269859690f6f36bfe780dd93c0e134f6fd136929b56efc222559bcbbf556342f1d219c6f5f5dcc49883dd389c014385898d5fa1fbdb8c3ba6df8206c5a0c2ccab45cc86ad4920c8dbdaebe055cd4345a754836ed5fe0cf8719675d39ab9790b9f169de378018b34ab96d95b9e055d101fd9ed8ad9e68d32815079d5158d9609c05c629a88fe4fb054be58bc9583c8744f7accbf9a07e0891e0305dc5ee04e81c2bf67a5b007f3ac7b23d688b4557e3bc4ae7b190712c471b918019a57c56eb98ab9ecaedf1d74d9fabc9ae793c7949906b8ed7c9b9e2e4595e461cc90deaec8a8b384b1b9e8ba26c04452d0d364ca037acdb536f3f178bccb0753fa624cc09ec99e9705e70a8a23d8d8b08e809e508e59b3f20bf4bba283cb3be5ab8601797f5eeb4619635487f8558c387aa711fbd94b7f538c26ccc28d8a9a228a9431a400034bf290cfe3f646217f930b4cfa809ced2e3c8b3e885ae2863a71690c4874fcca940e0edc225c61d4ac853370c09539d295c9786b50e2cf32e8ba72bf81746644d68f134f7313a7bd8d68d11e4681fb072cb3954fbc9a40bdf60a399165ab9a43470e5ddef7c489fc6aeb6c15aa8fbebe8950495b7d9ce2a477e88ac5aa2f58bbc10ca4a68b3cf25a6722bc367d81d2976c8ad982a8d542b47e4182f68da704694624bf80b7782b31d179c5acf0e40b792a8783d4fd406826567a0b3c77b697f40b35daaaf5b3bec9cae05acfcf51e1d06209a6cc4caac359926c863545beb4e55ffb3e6063293af5fdc87d260e1397961d3bd78a78da751929e778822b44bbdfa90338bd2eedb7a72a08d6b1f42221a8b45682b3fd3adc62bd7c32fe0d9e71db34203668eace6f397239c472e4340ae908e13e92f85b2a716d57e5ccb0f12f1e57f8434b73c4c06ebda14031b9f40fc10468ce345f5627381b778c34774244a8b052db0ff7af7f2341ca20176f72892ca53b9d825237e75e9afd921e931c476c2a5247b3decef6a2b0123c950cd2b7f36e911ce6fb02854bbfde95d06fcd924a941f7d7fde11431cdf7dc04b1c613035c1d9abf8203763148f87d80f58e7324a62f415a562c164c89b5fbfcae5abcae78afce786c709c5438ca889f0ac87e21efebb9d629980286381a437067c8b8959fb16f835f5de0ded0b9ce49b77012faebac6a4a7d00f6018762d1d502a98f7e28005b0b1e919041e038791aadad3e0667562217fe29bf5786461c02c4a1671ccd65db9003d2651ff0c521e2270c04cbb41e87c29ec0cbea80abb0094ce64d5b4585c2c15dcbe343c7395c5c47b92ad2a54865e39d8a61a8b40ee56d29dffcf41ad5a21ddad72d2aaa96bd3344b7c5f2131321c464bcbee5da5d377c0f8b080c9c5d37468df26fca76d9a3f11a1f336d7c82845588450fb38db33668d3be4761962acec2d5c0b0e9642bd294850892e3003687575048f6d66033359a8c2a0ba7f0b4c8a3127496c60ceb347e6e4c423901de9a7a637f05f340e74aac806dcfaceb675892c20fd912444fc650a4aac7be1a184642d91b3664451f287c84e07fed4d979b8099e68e7eaf2e9a3ab584c3480877ea3ace16803bd2b014dcbc83b6552e3dc7a28577be9065055cd424130d97afdc5ef5228dfe57becdca9755dda74814d1ac49305ad253883ba333fa4802b40cf593a1a2442eaca87828d7ed7c5ab4009c171b2fcb97fec047018169b0f2d583ba3f3854ce663129b883f3cff7a12ab1b1dc8befef986b0f523842755ff5dfcfe2c02c7476e04fc5508a4d9ffb648c817653ad7cee91c216a75ab49b98fe542da57c5254da18ea7e9529f4dc50dd1fed91f4c854bf8aad184b4c2d91a3a412069a0ad1fb366af14eef9ae86c9b8a55b784da2fea701d05caf2f2300123b49be945b4ffd2bd27a9a6f49153f1f51b7088a5a5030c1ec3591ea57b88c7ef95c65cc2079958c1bb938abffa27b80478b062219005751cefe608e694cab6ef28adcb8ef19d22f19d35534ec983bdc85a0f8723a88416e1d484391ae342cc44848fb3038a4e8747da7286afd0b2d92e4e422cbc308bea70b71c45c52fad4c208fdbacfbdca10916920f9e643dd4a252a38283955dbc1d325e8d4d4a2716892c356a14e9cda8e6218216940a44ca8b16478852939339d6690b855406f8eee4f8d53bb7a2ee7340e16cfdd1cadd095abcb55ef603331cfa6c8d13535ff57d5909afada0664315febf023473d67507eba75b90e026d541cab7542168154ebc12aff692e9ee1e3dc02a9493517b828e7a1887a7525b5553a28f74609df5bd07f7559f8a2bcdbf13a865b150cd725c28ba16433e6aef0222a9e11054300ba519105bbaf2f505f825b191909fbf1e8e0ae7ba2dccb2209f714541d97e5f009a770d78d14cca9aee3a969cbe53319b00006dd80b41f9ea404930426db09951035d1052401f9d8002b91170a5f321b62f24df8b7d87b822fc7feb7613d8a65706e842b63b22c950788f7d0b18b5d5d14b5042ba433397ded6e9a3cde7c95a0acb4a22ed56bd84aa42b63ea9c349c42a0cd4606848e5aa4806eeb0c2732ce93ec319d9dd85d609d6e13bd6b42abca401e7a52efe574508856307fc51f03f2f6929d51455d2c65db706994da478be18715fe0ee850564842e4b47f890ed96b65b1807e14557ff50e67e43ff9523787a614da95a3eda80c8519a344787304f8625d330ae612943b9634124dcd6137851a5f7e366e22facc150115399455f197ab43bc4e3f9137523f3642e12c4e33f019760af78ff6ff8107da1f0e8141579e75387e70c7e68e0e6447965fefb6aac873c81ebee7d3c8be4df0a569a49d1d7c9ff8492336c87d11e10ab11e1e9b508e491a47765c71a07d2cac3908be4096850227a8447353713dc84a7133d4bd1627f024e350270cde509f2298a5bc72ae40e60b0a4519e331dfb8f115cbb3a7d60ce0977b99845347fb08aa6b90e4c8009cc1f93d9a91f6f6a0c1252d654f7d25a79acdcbab781d8526c5f39e4cddaf38fb69ff30e2a88c95f96ab9f992ee12f6a50d2139efe34ae2b2ed9fd0ec58bd9d0cf183d981994630a75aa9b093101b1f0c032f76838b240f21c876660807772f87d55032b1c60fd645b4fc1af2e78aed8fb89428c5a5d26770a9f394ad4aef4a9e4cf6acfe2a8d2ea978db1a09170d8fb062c6970d7edd844e1248130723a30161c31737aae82b2c54757d2254ef693eae3da5e0fbe89a7b22991c6c8d47a4d876b613f797b64b990d98a556fa3eae6f8755c7b6ce4542d3b01e1ca3ef3a7f27787be2bf91213291a7c53d97b62471da99df1ed7dfb03d66b64be2c3de7beed2c14efb6f6ca1568acd5c20dbd1f81d5e22a1695de1056f2f099b44d515b483185446ce56a54634890fb7c280c0b7a6edf14c0f6f03c5dca6c2f054a4823518629ed52ed73eb3073a3c7d8550867d79923ab9b0f8ad4b1a1047c5ed3b667f17b926af97ce18fe8e8c8e01fd520a7c082e5c6e4e659cc7af9bda72b3a8c2331efa3ff33b089a64c772c35f77c99c24640d3658a9a033949ee0bbdcf8e9ed826614110dc088c75ef2ad0586bbbf0f5b89e5617c5b05ca687b45f3ce7082f9d0ecd701901b892f8f2cafd9cffd2c5b292974a11507177f09d9bfa8ec632ade168d680d2c694ff611c4938205fabcf54c2fbf8073fbc44591827a1b1f9fb5b78d0f6e023dfdd48a48057cec6d1d3c0dcda711e7aa1dd1a999d6ae78a3fe722439672fbdfb974905286c81c2d3c7045384797d0ced63ce8893c97b22fd85c544f4846b3cbc0ffdc5e510e9c57b6085d2fb70dcba7021b360008b7779c08e079d26ab42dce8538f906d6d8afc12723234914c468adc401651f29422c8f848d0b20cdf2b7b6116b48296d6c483664c92b853769dd99ba23308b52ff28a9294159a0039fb3384a7aebee11b244474c8b7de7617538ed08b9c2c80f405eb4d7d88cc43b0902897cbc9d58fef178932179b689a97578f303de1b2066e0e1ff88026065dffffba7e5bf5f4d65c33b53de108549c431c331147c2e4fbfdd859776c6cde2df1e43d720e6c6e11cfe0f469b8588668a7ea5cb8184596b8c8366c3431c388c0607d6ed41f0cbe4303d5b0d2b6c646f7f3fa56fcd87df754cdc768a91169f322469487e6832b29976b4882398ff64ec1e228f50485d4628010bc429cccd16e8bf20fb9dfec82607655f812e1a3a36ec86a383f9554fb22ee226bdb7c386d1abf6ca171bdbeb9afb5f09457456aa633f3de02cb3d7b41bb184ea3f52f3b5fef73018949b476ee9aee2289cb313bf4e7754dc200e2e61f25aad60d531145d8f081bd9d0cedfaf72b2a57018268ae5375e5c3d6cf53c26ce789841713c795f6f54521ce2cbe6c8c8f7466aaf2d2750dc19ab679136fb4a30d777148047772e19c7bdf28c3c771dde286fc1d8209663b6d449e6bec46a6cdd92ff49f39ba14f8472a0a34097401e459594f978a4f02a9233490a4854922ec289591a5f7d71b7333a9e13543edf3772ba14176951e5a5f3041d8e368df36c92fa98ecbacf956a4b6c7e33ff4d2fdc533a48eab260f40e1595d6d897bffb47fabb14dfb2f42a72cc5c2cbe1b46b8ca2b8958e1f2008ce3b621897ca705d290ff4c8c9117fa6e29439adf81d06641013aeae2280ec7dbf6ee4cf11f142824848e8f69a3dcf04cfdd5a7e6a923dc4ad70b47dcc0e9cd08ab4dde261868daec20dbdf3fa9796bbdd2a36196d469127c633073ebc5cd9e4a7105b32c8e024e2c03f3b7a8dbf6e2d7e7d31d19b9ede2288f1f134aed3915871e9b2b5ff8abdfafbecaebc2e922cba156f90c19e725aff83cd6198c0044f4efac6ee50d3dd22a3de7ae873eb040fd4439db644cb12932de49baa08d3844423f7303af3ee02d20690ea1a2e8f6c5df4c70a8ff1e26c334491bcf147c788783551b393919873678911e18abb82cb04f8781629947bc7baa21f5b71f53a44d5f298d826dd5f65f2030654d4d0f49f240036f38151726d1d9b958dc1a247f44f2cc87b2f36618e4392a498a1275ac5d212312c38145ffdda56f8a31b9213962136b7faa2e888342df855b3a0b701450ae5c46f97219621554c0bf045c9a4120bf8f4e12b5623e25385e08d13832b85ceb586efa31067508ea3c191143c70fba2d6eaf768c25786589921b3dfc84d159946907843f5c95ba84c91e6e6e1836c79ecd6b3895d5dee3ecba542b2c852ba5c886689787d3c32b52c8dffeff3c2d3c162236e893e988a5c0320090b2ed0bf209108eb3ddc035d9711449ac396aa1832039233e9b469dd8d6d94e6afe24965fdee582d9f263ed2b6c9971eff6efac6effe9b6e2d4397855b97068117bed68d7c506a3d3bfa11ab1b2cc2a017819ad8e35f48be78513307a5d9130e1493bbc6b8dfb8386aa1d684480d2e130ac6041ebc525ffe273c5952fad5183704373fcdcadc333380c0f181224e52962238bb416ddc72d7eb85e8590b1a024be698a74d61097a5db39d98ca47f8d6a428a2e256eff84354c91f50f602035313a612ec6f358556d993b341b

For a simple look, you can remove the surrounding border and horizontal padding to create flush toggles.

Simple flush toggles
View code
4ec03fbccbf15f17657fef70ce16640730c016be5b53e613b6a55720423f8e5b930402a06eb16131e9f97a448843b891ec1608239ed7728ade19fb43906c19548ecb836adc8bb8cf9a15d3743f686748058b364e1ca5d8e4b2aea0e803acf83b817611743e8cc252f8d65960d406f9680b4a75096f2dbc5a44d048dcb846eeda5508d6030997ae10d9ed45324d905b893d075f4ab23a58146e7e74879956fd8be97ed4a331fc29cc578f10df81931a6662ed5ca21d6fff492f1bf1c7367908d88be724d4aad60afefdb55d1a19a9391c4b3a7003bf99568094f7fe74036209b7490dc55f5b077893db8fcf82ab3394490440d0ef6196e66a56e1d4326d8eb9ec90ab100b738447363d47000018ff82c4c14bc915a7b1d4e1354831daf53ce81a0c21496bff2585c3243ab2c11ccee46d86427e3f9b2816ef90fe15f36aa4656c3c933c5818b7d213f33649dc16b6bdd596e65bde0138e8a8aa97964dd35c46150f9716ec81b34491767cb640010bc232c99fc2ca29a560f3d2c72d6610545854dd6ae27d6bd084633a140bc1c0252847d1e88456f699b47ffb2cb311a5a78b092ca8268aa34aae347fb9cc4ccea300902ff3960d7da502f55144400e4b11b50305d28ff78fdd53745a7849a5136c7cefe9367df970178aead588bb5137c957c5c2c2743e8fbf53735fd90648afd1edf943b60b7d0004c7fdec80e6a448c3b87319f4d0064e7411a2ac57bb5ded5245ffbc6fd1373d3589148a85f7b9352f5061244e6ab4d3e00b678ca02aa92f49278be360bdb8021be7695891d0ce7e4b9322c4d1789969285dd922a134e898c8748d8f2218e7016f4caeda4bbbc37d67787a085b446a3f75765febbf35b085d2794fdc83917d65bab23ca10a21316df1b72ddc63790d585cc269c4150cf2b4e56d50726d5841c8e9390e23cadd3ea01a422f23ea314b91f4af280e4c09209d9f87c179722e958d7582535f657d333244b6aa1bddcb92541a4d7a800a35669f697a8c19d0d305a0ed95a97ac2d19ecf20d4b84e0af8247c25627f349bc7c1546241b7afb09ad50ebb2c82c3b81baa87b81737f7f2915b7189861a9c0d6df177aca032a74934c9370bb313ebf60492994bd3ddfbed88d391ae4fd1c94379b640aa48c3bd6ba687a84b308a0998b14874542649d72295acdec892a9c7836c228d6079a56c8dbe7adb4437a7a78d80bed2a4869fead84ce44a49a6bb7c38f6c96e591c0815aee9b7386c73ba212d582870b1431afd60cad2ed6a2c74fbe600abc861a57de3bc3e4d2fb0bcecb960a4518de071b835255ee77cd92d6d00ecd8e9965ad15351a5477678c8b692c2b19bdd0b4a8aca040d2c1257944c11714c69a6b392d5cf66e372d18ba9c353187603ff47f4561dc1442ab50935c3dff902b53a9ff579ffeb1703a4c41a0d84d055d4479c3e63471cd887cce003ba1af517ac5fc1ede38fa7c90c1e397d90d4dff132029be87165e745f8cb9c8c4b196d689336fb5f0cba3a01c9ab3e62e9d9797d14da0d93c9e7b2482030b654d21c58d9e407e07a97f872a7233a7451806c6eec6c417b4dc6c6e37e5be256c8601927f19ed72e0b36fd0f2005cb9a55d66dfa608505d13be9c0c26d1a57f636c9d0f4ba8ab29af8c1e85185eda1c6dbd7dfd43e381f6610852b1dcb758f4b3efd34c9d3c5a4550a776fb987b9ca706f291f8e7871f755f5fce42a5c33b7479f6389ad84b674f2e04db1d2a0cc13342eed7661e3851be836c49eb7dff746490769b2ceb7e5856293d82b1bb0969fec306a81b0425017b559660c3cb8f724875020a6c5676ca3624a43aecdceef795eda08f15f2e20f1f2070295bb4ad400ed39b8c1550b67a8df9e62c8c2197e81088749830cbb9c4ff3765b044f56857780de4952ba58b2c59b3efc74cb8878e61979b368d87fe2ce81579e93fbfdaef83950683f2c4160b30186e70a9dccc51f9a7471cdbda4497f4a90dd9a83764d791d11eed017b892731c33f14efa97518ef4a27fdf71b7d7f961a587b0c9f6b1fc1a8e52b501a90fa46268e4d8fb5baa98a6453e7c3011de78522385ef10349ba4dce353767ddc7d79e9ebf7287fe752b3123580ac3a29ea2a15d4040bfbef36a52cde66a5656dc6dfbc11a6e204770ad4fb05dad3d795c0e1b9dc69c69f8ebb3348d2f875c2c1bfa9cbc5a7fdb21277e158dc33327ee6a8b427048fb8e3a7eab1fcb7726971ebf180a4b32a198cb9694345e7cee80d1e98da319f6fba13ec201fb0bd93e7f863ad0d4dcfe6ca983a65414c5ffdb66b50e152bf9b94f8c3be12c5fefbd8f6c83a2b698cb507d50478a600c946e51625985ca711962abdb9c899e275c4543dba897203a87139218f9bd4c1a916d3d87373151ff5134f74ab5c7cbc113ea5c761f565e9822f71ea291ffb6dcc714a15912a037813629c7419837c49e74c68e0ef9e2d014edde1df78d889b367a0f4f7ca7a019fcb35c13ec78a30f6e749128c81f37f5e71042660db82f65eb83d60a30994353f73eacd1c76d5bb4ea8b81224885191110cce5db836afd318cb840f9060625afe846cb77ba88bd15402b2c18204bdb17e75c23d1f70f0b862047aa26dd6dcbc05d266afe4bda8fe5c3dee667089bfcedbf15946ad8b1aee8725afc14feae5a40bd1da7c65080ab0dbe2280b4d18b07cb35fec8cb4892cc87776a18e65e3097ff44740215d7d8abd6b5251013d384cc65db12643d2aa3b7cc5291df8436e8066e443dcfa31b69bedc273bd2ddfc865ebbac19388f676a9bb9479316bff7c648652adb3928e359907a2bb4a43cdbaa7b4521dc5c568b38b3286202271e37b9e44a97fbbd6570616f5e6b3e39a682e3b364837d76c48136efcb22dd7e264c0fa22b600f94d629f1a921ef203d8a592c1271acdfd282e849afce71d8e4923b2247a71a74ba597742cfb1957e7896bc21f38a4ec5917ebc01c8b12bfe7a4c455a01153be2e74210c760fa10a2ad174d081f6e9160a921f0ab6cd8e861b11f520b7b5b84ae15bfd5600d3a5a47714f4d07e5326ebfb5fb1830ca3916b8656f7c27f50452e72bfe8

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.

Related patterns