Standard toggles
Creating toggles within your article content doesn’t involve copying and pasting any HTML as the Tabs extension lets you transform standard ordered (<ol>) and unordered (<ul>) lists created in the article editor into interactive collapsible and expandable sections. This makes it easy for visitors to find what they’re looking and allows content creators to focus on producing helpful content.
If you do ever need to migrate your content you can do so without having to worry about unnecessary markup or inline styles.
The default toggles template
View code <ul class="js-toggles">
<li title="Android">
<p>Android is a mobile operating system based on a modified version of the Linux kernel and other open source software, designed primarily for touchscreen mobile devices such as smartphones and tablets. Android is developed by a consortium of developers known as the Open Handset Alliance and commercially sponsored by Google. It was unveiled in 2007, with the first commercial Android device launched in September 2008.</p>
</li>
<li title="iOS">
<p>iOS is a mobile operating system created and developed by Apple Inc. exclusively for its hardware. It is the operating system that presently powers many of the company's mobile devices, including the iPhone, and iPod Touch; it also powered the iPad prior to the introduction of iPadOS in 2019. It is the second most popular mobile operating system globally after Android. It is the basis for other operating systems made by Apple Inc, like iPadOS, tvOS, and watchOS.</p>
</li>
<li title="Windows">
<p>Windows 10 Mobile is a discontinued mobile operating system developed by Microsoft. First released in 2015, it is a successor to Windows Phone 8.1, but was marketed by Microsoft as being an edition of its PC operating system Windows 10. Windows 10 Mobile aimed to provide greater consistency with its counterpart for PCs, including more extensive synchronization of content, the ability to to connect devices to an external display and use a desktop interface with mouse and keyboard input support.</p>
</li>
</ul>The default template is simple, elegant and responsive and will automatically inherit the overall style of your theme. You can add any type of content you like to each collapsible section, including HTML, images, videos and other article formatting styles.
Customized toggles
Using the options described on the Usage tab you can have the toggles behave an an accordion, where only one toggle can be expanded at a time, and create custom templates. Custom templates can be used to change completely change the look-and-feel of the toggles, add new elements like icons and even modify the behavior of the toggles themselves.
Large, custom toggles with icons
View code d9c6f9da39c6030e0a7bd449caa31a52d52174e0ded7bd06333d53aa5b0985eb55b3eb4f6cd09a0de03fd243762005df989a4433c66a315e4cf447941ef5624ae75eafbf477e2d72e0a4f90ffbd633ebbc9976102d5240612bdae6cd53a970d22bc2a6974c6363c60e2e77cea0e0fc5cab77d0cc82ab9f1a1684e80f69ecc2e8885ff5d341cd7389b6a57bb32158bdd3de610f7cb5c561a4b5095e5c18612480cddb4d67980803f329b5a07997316a255df87867ecb047973dcd95c1efd955701633ee1f352428fb9aacbd5955bbb030b1ee0994d386d82779b38f29d08422637ff34de02abc832b06994b727835d00e6b739e6bad077f03f9137886d990faae8bf99f68c0bac057cbc8268a2d7523c693c34bc196f9b3a745f9312637ca29b044eecfe1d628ffa5eb3b84b9717d9b9b629b0a3354d06509c0f3098219bae9653595581c421b6789b17e03fd6bbf1e6cd1aef6be39b1ba17bd6e219af446fd62afb6747407d732c87d9bb715f664f42fbc47d8bb9aa697809c122e8c6dbc7400c7b92298b037420d356f0b2a6dc0eee364e83712ce82287cde5de72b620278764742934f6da22d4e96e11adbab054413b1143b0d6c2a23dd5b2f3bc93b1c7de9de806f1c680ad39fdc28336dcf2040880461680904e937e55690bc55d1058bf3669e9d0099ab68dfb58de7d36c1147d6c430b993fa24b34fb2e8d0797e6fece8af582278c0af20ffb73fc18930652bb522d56fafa59f5e108098d624f48a7bf1063fd7ae5b7c3dcc161bbbbf2285df971779cb53c686771a18be0193ff0bb6e966868091a61ae9496fac5023ea8d22d6f9d0d3e338f438adc595cdba0f187d2d6069a736cc5dfcbf686e34548a758a678a2778f59c9badcb28b3c1b4f4f18843a807bd089f1ae741c94abf24d993c6376ef34223653ce91fc73df246a91e3fd0405c0fcc7acf27e2fe239324ddefffc8045eedf1d167929246bfa9fe0b3f4636d075f9a757fba783f409d9e9f08f6130e736e809559e267760c6c8cca28c16d7e9d9f8b67f4d5c43e6aaf2f1cd3f39acc22184c687e2fbc26c4f9b8801386ac186ad3448df1df616e7c7563a1dff37e3d9ab3a04e73d1095d76714369752e56d21963f9791d2d873386feaa0c3bc62eb5172f6037147b2a6dfc1f4691d6068795d2d1a2855b7c608d9d6ddecd43ef6c4cdff73103d8c2a2dd62da97d5b74a7791af6f2185b29771110db3f5fe69605545fc39c3693369bbeebd5fb91ca55f8d0b2f61ab83d852d8d777c177bc8119c57d85fb65d0b8b8045499f71e28bac0cc3c4750320b19d576601081a13b10dfcd4788334e2441055e23cf303d101d6b608d8f9980246c93c52c2369e17a4448d901d9a3d22727ae89f7bed956c7f9608b806179424f53ecaf64c87e2b240e7bef43857201c7c36b8886be4ff6087fac15c81487296af5c1831bd65a8d2c03cdc018a498720736789437192426d00eb3e5287c39e7eebc21f58438b71ca3a1b50b550324dff15ac54022aba4e7251fa92109cd94ca9d5f8969e62aae1ef964abbf37261a4323125a3792297c3ec91886fea36b937b223c1cd10a5baf5af5a7f201ce4cf0574a0d210046a214abe5c330e0fd8e22a3ef1437ff1ba41a13321d0a79abd7e9ff8811d44bef2c18a95aba61ace786a983cc96ab9feb9cdcf47d5c5a086ea3a6394ce1a8edf758d808a44a9589ec4c68277fc9e0562ac8295c4cbaa858823dafab938db2085ec9ddd1d4ad9eb207919d63242137501badc667570c5447cddbefb629db6c0e4b2ff97d0d2c913815ff6721e73765e29d0500d350a5872c68c7b26545ed9c7cdeb5c44d0f548f926b9b4a7029fc7d8548dadb4144edff570a4c151118e2164f4a160d10771bb309bfe2e0fb58cd652e925a3b89491c968e72435609a99da8ceb218c3406c46a563d257e240d587a2328646fca1bc6f2c48576a8432b0570a3bc754f1933dcd0ceebd3deb9a444c243b4641557815f193e71f4414ce1c14c66ba9ed47c4e429d1b7bd890bf6763a33d0adc8ec8a128d44466628eadeb35b65a57ae39f2fd56017cdf1c1e624ad12ce009e668ca139ec0e2e2eaf6534997372988451f9f198098fad2309b250644ae996ddc8cf570f4b478309b3ef312d9d06d2e4dc6dfaed11cce3a089fd6bafcf25c07594638dacf49f0515d62d9859d9078cb556fa73c82951299a2f074a430b74425af5ade3f5fc423abbbcd532d6810d0b940ec0e5b4643c83b8a58acc3bff7df93c47cd03e3cab2c5f282c9f0082119a3122b60a161a6ad8b0fbe8773397ae01f411cc5512bd6512b423c6007804ca1d98d27bb13e635b23c05d2a4bd8f24cf845428d562fd132dba81c1ee32b5e0c4e7401225717c7922a4b4b683c8d67ac041a448c32b457c38dace7efb1b8dfcb74fe649634ac28852660bb5775f40fdb00040c38afab7afad6d723d4d64ca9fa1e33785dd1025ceb73fb2b7a300599aed35278947541484cbaa51511743267fdda72afc558a898da69f4715e40df4bb4c837ac02a0c8ef7e87ff21b3c4d2a68734abbc3e59dc26c1850da2f70ac08144ee3ee51d446e5bb5382b0392298dcdeef1f85ec5c33eff5fcb945f1d6899bdfa8058d4a3d8aef09afb22f52b6fad9a4b53d329b049bd1868409237d27488da224ef7cc8cfc2593febbd3561093de7b4644674af7288c0b9de3a8377b9920c7f6fd62070288213dcd1e8e27a885c4c6105a3bf01d4ebac4b0c510ee2c280a800bc1c65cfeaa5c7525cb844d6d78df36dbfd7e56b49ef74018434d76372e1ac69ce78e4e6f175984f267350f2f4b2080d9b40cb03112e7135df27fabaa04612caf96d9d3c35434c055ba1609e4fa91870f554f3b882a2da610f955c7f588e922d634f0f58c38483dd25910f48036617f22d4653d78d87e8f2bfadd1cca0dbbfd7937a1cb1293e0a9a89228f4914782174eeb9702d3eae12c8a4766fdff025d0e4c8dd93c884972f3d50a4148c5ad8d1565e976d7c1f3c42444480a11dd0b532934c8a0d898fa1c340e5116d63c70db870b24f549f19180f3187efa9ecc35df5ad360b83307bb7c029e2e70a60e70d8cfde92efb4149f19a727ecb1b86aa69592a08656063b7c3611c61f828caf4063b8c0e6cff59c6f230746986c0ce73eff99f68fb01081ccc2603fa2c3ec4fdee4ecd4db6d726a52b6b14937c6bc6d5ef152874dcc0a74c6cfc69ec92428e3c0fd4a88d2bcbc9f63e304e74863b886fa94c566deaf8eb6ecb3c7890af86d7d63229b2bf37b5fe378db41e7f5ba8eabfb6a53fd31131de6449446eb5cf8f2c310d758f1a28488b2bf46ad2e41bc1597ae2cb916756fe931d58b4b383659aaf2ede06ea571e02b8376c02b6f068006974f310c041e704cd83b1d178a0381d7140dc742851ca5a10cad4581f29cc70df58bd918d08723c7940db8bd0a11fc1a3983ea93000e73ba1401fa0652762bc3e6abb621a04acb52ebccd0a3b4cd0532ed5674debd909b79a8851531dc2706a31b0a4b292077adc66d0db4ad9ca80cd1d6e4c5f780ab70fa99b2e7c78304933d0f54e2770ecc82532cfbdc99042d08c3344ac6cde719dec07c7e4c1b7dddac2c9055cf0342f4a422294914114466a1572a9a99b0c5733543ce698554352dfdf5e445bb1dbd3045586a37290c56e5f1cedb3f901971d274df18a44f07e5ce6f4603d8f1354e8672d3c84983f05cf8d370f49e21c2ebbebfb812a59412337487757718fc759cc2e0080f6b90468cd8c034afd70fdc219a13cf5b8f639edf4148b07d7e36c2de82b3090db4d5eb8f3a0ab695aa2a685ae1c66685bd7434fd977c5e9baab6c0e1767d060896383505adc69373c503ef1b7534bb24acbdb2a032dfe76ffe98f0825aa5f310b1d261943d6af8c3fd004952726009c747630f73ad0171f934e0a767f68c173e67b8c1a663781ac0242c187a64da04cce7c8fa36abeabb0cd00a0b66a970d6b5e2988e05b1b4955e1468f4eea6a69a20d64cfdd96c722297513720dc0ae01697ac4867d8c11eb116cc263b053984aab6ec8bbe6ca1b63f9002becb7e246322f104567b72463997652f04da54d66d4cd7e62daf61e92db9a3b0d4f93223a65b10641f92ee4dfcc6eab94cba348c540c8a029d781a507a54c7bf2cd2cb15244dae879e38b51a626c22722e4d4c2f6f332a7b95b2d6e8393aa5e203d0a977c88cb085acd5e3a9e85f4e198a16d544da61fd56321477a0d78a2df79b57334bf9f3376810d21ba1996e721d6d028f01fd4c06b3fa288426a7290d47aec5877fde3b4000448648cf243e9bbb5f8d66c28f8f30fc72225f58ab4f22b8c8ae7d2ae444d6ab91723951c4d0c6329dd039fd71de190ae64c9d456043e5c16fb13f840f01ca52a1adc2d15a5d11c93813284af0a4272a2833cb4b7fa9adace0c09b409b78e5a7dcb68efc4f8fb1d47713e23cfb94aa72e2a994bd02f28b3f049929bc9e904157a0c5bc4ce6a8041442d839a2bf40493e617a02b9266f7f1048d0d16679fe1084dbe45c6a520ddb770dbc6c967046036d2a7385fdc13a4d1f0c52798226864ee1e362805feb20dc7b374dd697a7f6d787c17d7f526744e89628e1ee32b9df3bceee49b26b866291d1907ff3e31974daa8a6c54f6b876c31afb9bb3122991549ad4747c0855e941fbb7c9e6f45b0289235f07b2388fae5505aad30191d33ba8f6e1f9a5c972df596e7e661b5e30fde32ff0dfc6ed582eb7eee4b54ee37caffd29b8c79b4a4521a3b976f8a91d9a0d938e1708fadb7b7ee1de2309e903912f6e24a51a07b7d8cda73509592505dcfde04e33299bdacd41eba8dfa9a58974ed7f5cfd0f5f5d08ad3588b081e89786b474038048ff33daf616a2c2c2c3cab91a33672615437cf00650f69f89c84aaecfc537e8d786d23ef454b36727fbe25223d2a09c51f5dfebce71b66afdad29291e98a772a092060cb337a4a5cb398c468fcc2cdce88cb59ba69e49d394f3dd05bff65dee196077b3dbef294dcbffcae72b7238f5ecccdfbc2b1dcfb33ffb62b64b27364d57fdfe5e36a07f2cd496e115c08ec6915b9b4c7b1c34b527af6a150cfeb298d9501cb787f4ae4de0121ec930d69a83268bb29bed8186a222b2c9f017722a155a9c5e738a0229809c05f3ddfc0154e4d98c8dca5ff36cefede80ccaa0fbd01b0296f2790e1f292be069efaf98dac8c5c6d844940fe0c6f55946ce891f84941875a5464d0b4b8c9db46b0f620a24c40f2d1260eb25ca2cffef4773fdf9d17f3a7d416ef2f550c847748f318e47d8ccaa73a011f0ad1216e8a39c47174ebfef5fe9bd9ebbdfe78481c38fcd2c3444c3839a5cde3ad2b29a598d4f46da9402333af30d51a17029ddff09bfae5902dc328b61b25b860a5e3f99ad7ef9fdcc4c812ad509d4c693253e12763d616439559fea298e721892acb09a0c626787cb59c2a1c5a8ccac7f2309c533c6343cbed2dedc0f53c62efe943a50fb331b7e9f9d23f49ac4aa11f5cae8da7715799648eb272ee68e6ee5ab2b7796f855c995f2b500415f66dd950fe55b295e066ab003171de37c9decd55132abd7b6e12cc756803bdf2e8d95cf1289992b2c1872c05102a5d9d99c21a56b85127941d526674607b3419dd76ac29c07080cea684aca4796581ab2223e6e622a54205a65e80468e5ee07f450f6c4cb47d0885cdf4b08301d68cdf5c908a3a6878071fea94d1cd43692907e31b489a5e52be85c8c25d9da2a4abce6187ce1f0146c96dee3b4e00452f04cb716029d7d6ca2b96f568794426c741fdfe5966713b8d73f8668eba331674670ff7322fe6fbaa0af6aab9a1653a33826f2366acdfa01b049afdfbd7af786880da9be9e8f53f6d8ea0d85821371f50d031bf0acc046e28efc2d13ed10e657d875cf9995bc2bb4408e5e11b8feaace5e1e96bf1687bbf5880741aa127b73d9ef005be25907b9e61d0aeb95a5ec62df122722201bac7fffd50b18569dba864217bf40e63349f5ff716f7348cefaa42033ff3748358b2a97f696a12177c2976d7b771b769bf4a4fa4a22e32e4cfb77b785c82c800d8340e766a357a7a4a57ffef49b2803cef60002b8d64a2de61262087496106f7d236bde64b1f5026974512c7639ba0bc742e72c5f59c252d3bdeccb8eb3ac55fb7145e9f3e60572c4682d4757b62be98030e7e15821c068c6476826b6f4a597e80c9f847d58eaf9436387f5e9849d9938e0473868e0ad36e315fae186b4d9d3db83e0716cd46d3bbca8c9296ad06a76c3d52340bd929faa1d6524246f1f3325d2bbcc97464bd757502498ab636f2d173a7b640b66d35e9d1d69c13bd4d61df3fbdf118f09427dfd100f3dde8e31964c03f23ba6c8cffa02c58a942fb4e5a7bfbf634d8a21e2b2c6d01e1fdef08fca42e2bd8bdd2f62aa5435bbbc4140c741a3e77adb715a24f16582cf2cd5186c1c2d00ad5f50bde3246f7a9d4f8b81934e6869c1192852820999c4957e14f7c5009cb4293cd4e2c6a63fd429a026779898d08209c4bddffa751f262f4d3b769de09893523225a1f6c5c9b695a8bc649c9b59b49a1c549f0c8286fcc0f3149e98795424aaa275cf43f9d41cc4e7b83acb6567709526af239dbba7e463a2ef2c2142d51908de3a87a50dd3dd392684dec3c7ae0f5b553d50493e513ab6c7c76f07b66ff9d95ddbf03cb2f2e527a9a134f77d0a1b83cbd547db931f17e7c48a52abbf85a46faa4e7659995b2ca25cfd26a3b5d312b517d07f361811e6d2ef5ce436e8c749cc4b9412c2ad86149e7f6b8468af4980ffec2acb0533018f4a5f3dd3875937bdf69eaacbb6cedf350b913d4f741a6f89fdea6ca43166d39a1e1cdd8e9cef8bfae892d89e81c4ae915938b6c04a3cdcf05b64814afe70abc1c239125649c915399787b3bc15805cfdd12851d61ab90618b806336abb7a1c6cb28f17076eca01f8ce6836d3ce7e515e84dbb86457245313b1c832a4b3cde230feb54294bd30c027bd766067f42c7a84d44390aeafc076663aa4e5f96c676d6c1f3b39a4c673cab8d649584b05b5dcae3d41c472503590f5a75613e1a8eb6838b6cd1ecaadd8a33f78687019ec3306e1a445430daa7378047cdead1ad45fcf136d5d506d604cbcada11063e23708a0e445679276daa6aed7f8c311782715b0a3cf14f49b26416b4d9d78a9bd017711829ea8da1072a77dd4d76b37c0ab7bae7a6cbe24c2e584a3c1301fdc343d91c3ba2772ba7a9b98a45b13742a104c8288e56494e6cb5f3c59fa060e8772f4f246836877bef26bed7d3b4cbbd1b2c21a6ad01bd4ea39d9da18fdd9c61c3404509a751e4f0356c0212f224ad9435a6b2bba44e18aa44a6dfe1a85e91137d681c6f8a2796e540c0fba8d90ec7574381388bd39ecf8a11b19456a7de1be875baee7eed0c372413ea5bd2414f538aecb75e011ef1848114f9252bbf206c1562ae5f040415c2c58c2c42fd854a79a915e349b837f3b325d61dbe3ef9349b07f348d7ff8544bfb2c297e7c3de9d6618b43ba774601766410659154cd22181a0463fbf42a3c090a900592c65ae7957ebea10d07b3420d2537e430e171a8c93776c921dd894d9ea06ca82dcfcd1a670bc934750549c2c320fbba201670d30ab9fdffe397f268e53d295e5648008d6ab7d3016baf56a9dbf6afe41cd3371c5c4729b440f95bf88311c5776ff5982a5906d5695f682505ae6099f6c789715ee061843d70c7c08fd180fda9db7f30f0d2d0a36ffd8ab7ac3e4278d4adff2a658c8214644f9a43de11b5043f6e966a7468d2047d542eab8c5389e47ed0de56318acb7b5f999f36c352f3204232c6b8b228546923c66c1fb7554aa9f024bbe75334c4df33546ae2422976dc1c7317aa632765551f9e9624aa48aaad100b21b5f835c4415acdba30c8f64f0f050b5ac853491bcc422df0eda9881d1bd8d803adb2ea49ca478e0170354360fedd96b3a2a1524d456018ccb636404d3f6f20deb1d66db6fbd4c7f6bf794bbc48b7203cc61fff52142a9659984147d80c9a6e49259765b27f6488253e4df67b33872f58a69ab624357ac2515e3b4d03af33933e3d173c3bf415a8339d85431388ff4a2ba976468674b36534d250009d19db1a0f1970827b88c39b425dc500c30990f94a73de34ae200a91d7dd58f83217170d944aeb73e06199d689e3a334749cf8e73aa745040c23fc5b67f1a13d7f0ba0c7617896d22fe9bd16ed0bb6e4f38cc3b6df47adbd73b2865eca6fc4d3655a5db149405ce3654ec892fa93bcf98b38025b5ec43e6c7c39ac81642e7cf2f15e5c458cd7f85c3446404ef7cce5ab0f6a1ade8f79feca2395736a0d99f01dd606c76e102266bf4d7605e700c665d41a98e2efd624a09308d889d818f09a61678f500d92a41576aec3f10457f13c72bc6df57f169012a9c0d48435ff08f0d6f0ff49586bc6e3e6ce02bb2d6b0203fbbaf4805c2c9a8f40e7f0a99adb41b9987a02ec397a09d71d3beca7f9a0692e679a8ef27f6a3a57ac7b794c442da8ac24bf2d59200707ee86668fa5f54499ed029860d1c3f503c5f1776876d56280f933678a73918a77401444d433003fda90d9e785dd1e1fa94541d7e9bfd4fd17af6e4c9df8b17a76b978c90888433d87f9416fd7fd9937d0d86e00b3bcb076a95af2b54c89e76f73472b97874b0f3aa3a8194621253929d3353f5a48f96e1ff0abd7d63c76922edd2aeb01a5d73f1d769798bc24f318e7144eb9cf0619b7c46946b09bd89926201546ba97590b82961f42dd89ce5d0aef9fb81e295be44b9650d4e95191f6a77867956e2eb9051a29118b877364ca41e84ecccf729d1b37b3f2d2785af136e3d54aa9511e52e0802dff11d7fbba42a5ebb946586dd9a6b8fd4ec39c1ddaa7c60989c83d80e9225c173412fa9da33aa10c235cb0093c279e6532ef0e2449aeff739915fca3f7af08c3b8aa23f597a9efce529cc40c8ce820c8b876548964a77f0d14496da851d64347997bac17263ec7f463aba23573029097ab12c55ad8c21f6395e376e0f817c350171f5aeaacda84ec12e3dede926fc3320f1bc07cf98e1de7d2fc6c84f75ac055b304402aa7851098d151719542835784c629757427c3ae3214c3e720ec4bf09f6cdf4bdf36504fc4c936f5f9f8e49e34e6add5b03e71e6a9371b61fe7de3358d63358e5e6473f972b38aae73ed3454ee84cd41424225231498c0e907b1aff32426d2817f73dcfecfc98e2c59318f915ba7356a557aa83d4bc485c70d8cb60d04fc981c0164998943c01f78fd7fe395466203de8fa4f70d1e8807aa464e339e970129126ab4ad606a3b23501ef52b13b4d6081345f17f0db32eabcfd0f1ef57e275178f44af59b9270e261ae5e74666c030c971fa5a832a105861bdd7e6a4c50c03f15d0f101f8ec0264bee17e1f86dad27b54fbc8d9eea3b521e938477f8bc53450263e8d92102d65fd42470144bf65c59e44e1ccb0efd43264ce31a2907ae561febb35a025703c2db610bae2f5974f457779bece96dcf1a9c669b8ecb28fe80b7d55977557866f11fd15bca2105726942b0fa5cba5a60ba3712015c2a87d6d38504526ce8400a70d31e0b1c8d36f22cdaee3072196849e9d07b1609029f37b467a78c9e2c73aa4df81c41fd1d95de61918856d51cb30e9be0fa0c5c265a093cded68b46e0c15016adf2e98c02e76d1c1bff64c747d16b1100962f232884434840ffea8406721804f2bf15b91a6c5c476ff4a0b17d7a09a00fc07009bac4460b9232deb87356bca45cfe85100a782fceabc9b4892872e242a28add76261eb7713313257f81fc9a4086490e33e3eae7f03a31385004c86aee685cfff6692f1a2d20141cb4b574d44f295f12e8ae80c52e5c5c84df1e860333cf123669660ad48280443f6ae2f6c0c4e4703bd4d4bb45fa5b340dafa00cd4f12fd92f4dfb25b323960cdf535b1161404f7d46e77abe043a68553c8422fa590eeac3c754600050f1dc49459213e6a3bb749bad5e641a8ee275d03dfbdf9cff651dcfc3a479bc4a073fc1be2d572521857fff37a90c74214e1e85a5ee2ed0b3d15d500db16dffe4a4ec878a7741a73239c87b4636109c0d8d2f6dd5c78ae9188b4f4dd9cc0fc65d960b5c1052c598f69f726395e7bc2f487e83204ac88b7eb5e70e66df0bbb02ca9d86ef03b123e1cadc1dbd9569d0b368bed89563e61b5fd0f06e93e2297f72bd7454cfae28c50db28587e0bc5fff68217422c589f7f42e8d88b3baaf46973ede3c20916e163afec87238a7584ff587fdf7b87a742e384d1e425306b40c32813622ec78102c6954b72bf53a2144501ec3d4256d099adaab235202acb6463b67206262356587f29f25f3e258c583ba5a7fa679b1e8783ae7a792090dfdb9f3d696f58c77d806a9e70a77b38bbc2e3fd1c2422cf3e53e54749c499e4b94bcdebd1e5ad45c049ce289bfed4414da33f54def3bc7d606f8451d111d23c919eadf799b38f21b21ebefcd377ad09f21663c54d3ca386365910680ad757921eb6bb746337b40784c227234a08bd07cc8289750e083b451afe66510456c10aac2161
Creating toggles
Toggles can be used anywhere in the help center, but often they are used within article content. Our extension allows you to create toggles in several different ways, none of which require you to copy-and-paste any HTML.
The Toggles extension is bundled into all of our themes by default, so you can start using it straight away. The source code can be found within the extensions.(min.)js file in the theme’s Assets folder.
When creating or updating an article using the Zendesk article editor:
-
Create a numbered (
) or bulleted list (
) using the editor toolbar and add the content that you’d like to see in each tab within the list items. -
Click the Source Code (
) button in the editor toolbar to view the source code of the page. -
Add a class name of
.js-togglesto the list element to convert it into a set of interactive tabs. -
Add a
titleattribute to each list item containing the title you’d like to use for the tab. Alternatively, you can apply a class name of.toggle-headingto an element within the list item and that element’s text content will be used as the tab title.<ul class="js-toggles"> <li title="The first toggle title">...</li> <li title="The second toggle title">...</li> <li> <h3 class="toggle-heading">The third toggle title</h3> ... </li> </ul>
The Toggles extension allows you to convert a standard ordered (<ol>) or unordered (<ul>) list into an interactive set of tabs using JavaScript:
<ul class="my-toggles">
<li title="The first toggle">...</li>
<li title="The second toggle">...</li>
<li title="The third toggle">...</li>
</ul>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
const toggles = [...document.querySelectorAll('.my-toggles')]
toggles.forEach(el => {
new Toggles(el, {
// Options go here
})
})
})
</script>
Options
Options can be passed via data attributes or JavaScript.
| Name | Type | Default | Description |
|---|---|---|---|
| initial | number | -1 | The index of the toggle to open on initialization. |
| accordion | boolean | false | True if the toggle group should behave as an accordion. |
| activeClass | string | 'text-primary' | The class name(s) to apply to an active toggle heading. |
| template | stringnull | null | The name of the template to use. |
| templateData | object | {} | Additional data to provide to the template rendering function. |
For data attributes, append the option name to data- and use kebab case instead of camel case.
Events
| Class | Properties |
|---|---|
toggles:render | Fires when the toggles markup has been rendered and inserted into the DOM. |
