{"id":54163,"date":"2017-02-08T10:46:10","date_gmt":"2017-02-08T10:46:10","guid":{"rendered":"https:\/\/wordpress.org\/plugins-wp\/simple-tabs-shortcodes\/"},"modified":"2020-04-08T10:55:45","modified_gmt":"2020-04-08T10:55:45","slug":"simple-tabs-shortcodes","status":"publish","type":"plugin","link":"https:\/\/it.wordpress.org\/plugins\/simple-tabs-shortcodes\/","author":6169743,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.3","stable_tag":"1.3","tested":"5.4.19","requires":"4.6","requires_php":"7.0","requires_plugins":"","header_name":"Simple Tabs Shortcodes","header_author":"Krzysztof Grochocki","header_description":"","assets_banners_color":"","last_updated":"2020-04-08 10:55:45","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/beherit.pl\/en\/wordpress\/simple-tabs-shortcodes\/","header_author_uri":"https:\/\/beherit.pl\/","rating":5,"author_block_rating":0,"active_installs":100,"downloads":6820,"num_ratings":4,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":[],"upgrade_notice":[],"ratings":{"1":0,"2":0,"3":0,"4":0,"5":"4"},"assets_icons":[],"assets_banners":[],"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0","1.0.2","1.1","1.1.2","1.2","1.3"],"block_files":[],"assets_screenshots":[],"screenshots":[],"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[357,2150,2148],"plugin_category":[43],"plugin_contributors":[91822],"plugin_business_model":[],"class_list":["post-54163","plugin","type-plugin","status-publish","hentry","plugin_tags-shortcodes","plugin_tags-tab","plugin_tags-tabs","plugin_category-customization","plugin_contributors-beherit","plugin_committers-beherit"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/s.w.org\/plugins\/geopattern-icon\/simple-tabs-shortcodes.svg","icon_2x":false,"generated":true},"screenshots":[],"raw_content":"\n

Plugin adds shortcodes to place a page content in tabs. Uses a lightweight JS script, no additional CSS files so you need to add own CSS style to your theme's stylesheet to ensure proper display of the tabs.<\/p>\n\n\n

In most cases you can install automatically from plugins page in admin panel.<\/p>\n\n

However, if you want to install it manually, follow these steps:<\/p>\n\n

    \n
  1. Download the plugin and unzip the archive.<\/li>\n
  2. Upload the entire simple-tabs-shortcodes<\/code> folder to the \/wp-content\/plugins\/<\/code> directory.<\/li>\n
  3. Activate the plugin through the Plugins menu in WordPress.<\/li>\n<\/ol>\n\n\n
    \n

    Example usage<\/h3><\/dt>\n

    There are two shortcodes available, below is a simple example of usage:<\/p>\n\n

    [tabs]\n[tab title=\"First tab\"]The content of the first tab.[\/tab]\n[tab title=\"Second tab\"]The content of the second  tab.[\/tab]\n[tab title=\"Third tab\"]The content of the third tab.[\/tab]\n[\/tabs]\n<\/code><\/pre>\n\n
    This will output the following HTML:<\/p>\n\n
    <div class=\"tabs-container\">\n    <div class=\"tabs-nav\">\n        <ul>\n            <li><a href=\"#first-tab\" class=\"active\">First tab<\/a><\/li>\n            <li><a href=\"#second-tab\">Second tab<\/a><\/li>\n            <li><a href=\"#third-tab\">Third tab<\/a><\/li>\n        <\/ul>\n    <\/div>\n    <div class=\"tabs-content\">\n        <section id=\"first-tab\" class=\"tab active\">The content of the first tab.<\/section>\n        <section id=\"second-tab\" class=\"tab\">The content of the second tab.<\/section>\n        <section id=\"third-tab\" class=\"tab\">The content of the third tab.<\/section>\n    <\/div>\n<\/div>\n<\/code><\/pre>\n\n
    Optionally, you can set a custom ID by adding id=\"my-id\"<\/code> in tab shortcode.<\/p><\/dd>\n
    Example CSS<\/h3><\/dt>\n
    Here is an example CSS, make the necessary changes if you want to customize the look and feel of tabs.<\/p>\n\n
    .tabs-nav {\n    margin: 0;\n    border-bottom: 1px solid #ccc;\n}\n.tabs-nav ul {\n    list-style: none;\n}\n.tabs-nav li {display: inline-block;}\n.tabs-nav a {\n    display: block;\n    padding: 5px 10px;\n    border: 1px solid transparent;\n    text-decoration: none;\n}\n.tabs-nav a.active {\n    border-color: #ccc;\n    border-bottom-color: #fff;\n}\nsection.tab {\n    display: none;\n    margin-bottom: 15px;\n    padding: 15px 0;\n}\nsection.tab.active {display: block;}\n<\/code><\/pre><\/dd>\n
    Selecting a tab by the URL<\/h3><\/dt>\n
    You can select default tab by using a hash in the URL \u2013 simply add #tab-name<\/code> at the end of the page URL to select the specific tab. This example URL will select tab with the title \/ id \"something\": http:\/\/domain.tld\/your-page\/#something<\/code><\/p><\/dd>\n
    Switching to the tab by the link<\/h3><\/dt>\n
    Tabs can be switched by a normal link, just add a class tab-url to the link. Example:<\/p>\n\n
    <a class=\"tab-url\" href=\"#something\">Something<\/a>\n<\/code><\/pre><\/dd>\n\n<\/dl>\n\n\n
    1.3 (2020-04-08)<\/h4>\n\n
      \n
    • Pure JavaScript instead of jQuery.<\/li>\n<\/ul>\n\n
      1.2. (2018-08-12)<\/h4>\n\n
        \n
      • Support non-Latin URLs.<\/li>\n<\/ul>\n\n
        1.1.2 (2018-12-13)<\/h4>\n\n
          \n
        • Minor fixes.<\/li>\n<\/ul>\n\n
          1.1 (2017-12-07)<\/h4>\n\n
            \n
          • Changed class name tab-content<\/code> to tabs-content<\/code>.<\/li>\n<\/ul>\n\n
            1.0.2 (2017-02-10)<\/h4>\n\n
              \n
            • Changes in tabs navigation structure.<\/li>\n<\/ul>\n\n
              1.0 (2017-02-09)<\/h4>\n\n
                \n
              • First public version.<\/li>\n<\/ul>","raw_excerpt":"Adds shortcodes to place a page content in tabs. Uses a lightweight JS script, no additional CSS files.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/it.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/54163","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/it.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/it.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/it.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=54163"}],"author":[{"embeddable":true,"href":"https:\/\/it.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/beherit"}],"wp:attachment":[{"href":"https:\/\/it.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=54163"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/it.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=54163"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/it.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=54163"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/it.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=54163"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/it.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=54163"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/it.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=54163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}