{"result":{"depiction_url":null,"edges":{"in_module":{"objects":[{"created":"2020-05-30T05:47:55Z","object_id":{"id":1296,"is_a":["text","documentation","reference","module"],"name":"doc_module_mod_base","title":"mod_base","uri":"https:\/\/zotonic.com\/id\/1296"},"seq":1000000}],"predicate":{"id":333,"is_a":["meta","predicate"],"name":"in_module","title":{"_type":"trans","tr":{"en":"In module"}},"uri":"https:\/\/zotonic.com\/id\/in_module"}},"subject":{"objects":[{"created":"2026-09-09T13:48:08Z","object_id":{"id":2555,"is_a":["categorization","keyword","keyword_information_type"],"name":"zotonic_topic_reference","title":"Reference","uri":"https:\/\/zotonic.com\/id\/2555"},"seq":1},{"created":"2026-09-09T13:48:08Z","object_id":{"id":2563,"is_a":["categorization","keyword","keyword_audience"],"name":"zotonic_topic_frontend_developer","title":"Frontend developer","uri":"https:\/\/zotonic.com\/id\/2563"},"seq":2},{"created":"2026-09-09T13:48:08Z","object_id":{"id":2583,"is_a":["categorization","keyword","keyword_domain"],"name":"zotonic_topic_user_interface_and_interaction","title":"User interface and interaction","uri":"https:\/\/zotonic.com\/id\/2583"},"seq":3},{"created":"2026-09-09T13:48:08Z","object_id":{"id":2623,"is_a":["categorization","keyword","keyword_architecture"],"name":"zotonic_topic_scomp","title":"Server component","uri":"https:\/\/zotonic.com\/id\/2623"},"seq":4},{"created":"2026-09-09T13:48:08Z","object_id":{"id":2641,"is_a":["categorization","keyword","keyword_task"],"name":"zotonic_topic_render","title":"Render","uri":"https:\/\/zotonic.com\/id\/2641"},"seq":5},{"created":"2026-09-09T13:48:08Z","object_id":{"id":2673,"is_a":["categorization","keyword","keyword_technology"],"name":"zotonic_topic_javascript","title":"JavaScript","uri":"https:\/\/zotonic.com\/id\/2673"},"seq":6}],"predicate":{"id":308,"is_a":["meta","predicate"],"name":"subject","title":{"_type":"trans","tr":{"en":"Keyword"}},"uri":"http:\/\/purl.org\/dc\/elements\/1.1\/subject"}}},"id":1401,"is_a":["text","documentation","reference","template_scomp"],"links":[{"rel":"self","target":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1401"},{"rel":"hub","target":"https:\/\/zotonic.com\/.zotonic\/websub"}],"medium":null,"medium_url":null,"name":"doc_template_scomp_scomp_tabs","page_url":{"en":"https:\/\/zotonic.com\/docs\/1401\/tabs","x-default":"https:\/\/zotonic.com\/docs\/1401\/tabs"},"preview_url":null,"resource":{"version":3328,"pivot_location_lat":null,"title":"tabs","is_authoritative":true,"body":"

Make a HTML element into a tab set.<\/p>\n

Note<\/p>

There is no default styling for jQuery UI elements in the zotonic CSS files. See these two threads in the zotonic users\nmailinglist: does tabs scomp still work?<\/a>, and\nplaying with tabs scomp<\/a>. See also the jQuery\nUI<\/a> documentation.<\/p><\/div>\n

This is a simple interface to the jQuery UI tabs functionality. It will show tabs to switch between different panes.<\/p>\n

The only argument is “id” which is the id of the container of the tabs.<\/p>\n

The following example will show an interface with three tabs:<\/p>\n

{% tabs id="tabs" %}\n<div id="tabs">\n  <ul>\n    <li><a href="#tabs-1">Nunc tincidunt<\/a><\/li>\n    <li><a href="#tabs-2">Proin dolor<\/a><\/li>\n    <li><a href="#tabs-3">Aenean lacinia<\/a><\/li>\n  <\/ul>\n  <div id="tabs-1">\n    <p>Proin elit arcu, rutrum commodo, vehicula tempus.<\/p>\n  <\/div>\n  <div id="tabs-2">\n    <p>Morbi tincidunt, dui sit amet facilisis feugiat.<\/p>\n  <\/div>\n  <div id="tabs-3">\n    <p>Mauris eleifend est et turpis.<\/p>\n  <\/div>\n<\/div>\n<\/code><\/pre>","slug":"tabs","is_protected":false,"visible_for":0,"tz":"UTC","language":["en"],"doc_source_hash":"d08bd618d0d0c4ab6a311e6317f3de216c95e59008dc082693e96f5c7d70e8cd","is_featured":false,"content_group_id":{"id":2551,"is_a":["meta","content_group"],"name":"content_group_imported_docs","title":"Imported documentation","uri":"https:\/\/zotonic.com\/id\/content_group_imported_docs"},"category_id":{"id":327,"is_a":["meta","category"],"name":"template_scomp","title":"Scomp","uri":"https:\/\/zotonic.com\/id\/template_scomp"},"doc_source_path":"apps\/zotonic_mod_base\/src\/scomps\/scomp_base_tabs.erl","publication_start":"2023-01-30T19:23:54Z","github_url":"https:\/\/github.com\/zotonic\/zotonic\/blob\/master\/apps\/zotonic_mod_base\/src\/scomps\/scomp_base_tabs.erl","pivot_location_lng":null,"doc_source_kind":"scomp","name":"doc_template_scomp_scomp_tabs","is_unfindable":false,"is_published":true,"pivot_geocode":null,"created":"2020-05-30T05:47:20Z","uri":null,"doc_status":"current","is_dependent":false,"erlang_app":"zotonic_mod_base","publication_end":"9999-06-01T00:00:00Z","modifier_id":{"id":1,"is_a":["person"],"name":"administrator","title":"Site Administrator","uri":"https:\/\/zotonic.com\/id\/1"},"privacy":0,"doc_source_commit":"66cb145eae7002b184e7d8c4c7bba5e53e8248e5\n","erlang_module":"scomp_base_tabs","creator_id":{"id":336,"is_a":["person","robot"],"name":"gitbot","title":"Git","uri":"https:\/\/zotonic.com\/id\/336"},"modified":"2026-10-02T12:40:33Z","title_slug":"tabs"},"uri":"https:\/\/zotonic.com\/id\/1401","uri_template":"https:\/\/zotonic.com\/id\/:id","websub":{"hub":"https:\/\/zotonic.com\/.zotonic\/websub","topic":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1401"}},"status":"ok"}