Issues With Tabs<\/h2>\n
There are some concerns when using tabs:<\/p>\n
- \n
- Some site visitors might overlook the fact that there are tabs on the page and won’t see the content they contain.<\/li>\n
- Most site visitors don’t like to hunt for the content they are looking for. They also want to find the information with the fewest amount of clicks. With tabs however, you are hiding content and causing site visitors to click through all the tabs to find information.<\/li>\n
- If someone was to print a web page with tabs on it, only the content of the active\/visible tab would print. If you had important information in tabs that someone needed to print, they would need to print the page for each tab.<\/li>\n
- Likewise, if someone was to search your web page, it would only search the active\/visible tab.<\/li>\n<\/ol>\n\n<\/i> TIP<\/p>\n
Did you know that holding down the Control<\/strong> key on your keyboard and hitting the F<\/strong> key (CTRL + F<\/strong> on Windows and Command + F<\/strong> on Mac) allows you to find (search for) a word or phrase on a web page? This keyboard shortcut can be very useful and works in many programs such as web browsers, Word document, and PDFs.<\/p>\n<\/div>\n
How to Add Tabs<\/h2>\n
- \n
- Place your cursor where you want the tabs to display on the page.<\/li>\n
- Select Tabs<\/strong> from the Content Elements<\/strong>\u00a0dropdown menu<\/strong> under Interactive<\/strong>.
\n![\"Where](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/10\/Tabs-Button-in-Editor-300x179.png\")
<\/li>\n- If you don’t see the Content Elements plugin button, (as shown in the example above), click the Toolbar Toggle<\/strong> button. The Toolbar Toggle button shows and hides a collection of buttons in the editor.
![\"Toolbar](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2019\/09\/Screen-Shot-2019-09-30-at-2.59.26-PM.png\")
<\/li>\n- Shortcode will be added to the page that will create 4 tabs. The shortcode will look like this:
[tabs class=\"yourcustomclass\"]\n[tab title=\"Tab number 1\" active=\"active\"]Tab 1 Content Goes Here.[\/tab]\n[tab title=\"Tab number 2\"]Tab 2 Content Goes Here.[\/tab]\n[tab title=\"Tab number 3\"]Tab 3 Content Goes Here.[\/tab]\n[tab title=\"Tab number 4\"]Tab 4 Content Goes Here.[\/tab]\n[\/tabs]<\/code><\/li>\n- Add a title to each tab by replacing Tab number #<\/strong> in the shortcode. Don’t remove the quotes. Simply edit the content within the quotes.
[tab title=\"Tab number 2<\/strong>\"]Tab 2 Content Goes Here.[\/tab]<\/code><\/li>\n- Add content to each tab by replacing Tab # Content Goes Here<\/strong>.
[tab title=\"Tab number 2\"]Tab 2 Content Goes Here.<\/strong>[\/tab]<\/code><\/li>\n- The shortcode automatically creates 4 tabs, but you can add or remove tabs as needed. Simply add or delete whole tab sections.
[tab title=\"Tab number 4\"]Tab 4 Content Goes Here.[\/tab]<\/code><\/li>\n<\/ol>\nExamples<\/h2>\n
Department of Psychiatry<\/h3>\n
![\"Example](\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2020\/11\/psych-tabs-example.png\")
<\/a><\/span><\/p>\nThe Department of Psychiatry homepage<\/a> uses tabs to display their social media.<\/p>\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Tabs can be added to a page to selectively show and hide content. Here is a simple example of what tabs look like: Issues With Tabs There are some concerns when using tabs: Some site visitors might overlook the fact that there are tabs on the page and won’t see the content they contain. Most … Read more<\/a><\/p>\n","protected":false},"author":89184,"featured_media":0,"parent":2212,"menu_order":17,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"layout":"","cellInformation":"","apiCallInformation":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-9683","page","type-page","status-publish","hentry","odd"],"acf":[],"_links_to":[],"_links_to_target":[],"_links":{"self":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/9683","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/users\/89184"}],"replies":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/comments?post=9683"}],"version-history":[{"count":0,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/9683\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/2212"}],"wp:attachment":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/media?parent=9683"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- If you don’t see the Content Elements plugin button, (as shown in the example above), click the Toolbar Toggle<\/strong> button. The Toolbar Toggle button shows and hides a collection of buttons in the editor.