{"id":60696,"date":"2016-01-21T03:26:22","date_gmt":"2016-01-21T08:26:22","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=60696"},"modified":"2016-02-11T09:14:42","modified_gmt":"2016-02-11T14:14:42","slug":"js-animated-how-to-createmanage-tabs-layout","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/js-animated-how-to-createmanage-tabs-layout.html","title":{"rendered":"JS Animated. How to create\/manage Tabs layout"},"content":{"rendered":"

This video tutorial will show how to create and manage Tabs layout in JS Animated templates.<\/strong><\/p>\r\nJS Animated. How to create\/manage Tabs layout<\/a>\r\n\r\n

    \r\n\t
  1. \r\n\t\t

    You can use FTP or File Manager, open index.html file for editing:<\/p> \r\n\"JS<\/a>\r\n\t<\/li> \r\n\t\r\n\t

  2. \r\n\t\t

    HTML Website Template use ResponsiveTabs.js extension to implement tabs functionality. In order to add tabs to target pages, you should use the following code structure: <\/p>\r\n\t\t\r\n\t\t

    \r\n<div class=\"responsive-tabs\">\r\n    <ul class=\"resp-tabs-list\">\r\n        <li> Tab #1  <\/li>\r\n        <li> Tab #2  <\/li>\r\n        <li> Tab #3  <\/li>\r\n\t<li> Tab #4  <\/li>\r\n    <\/ul>\r\n\r\n    <div class=\"resp-tabs-container\">\r\n        <div> Tab 1 Body <\/div>\r\n        <div> Tab 2 Body <\/div>\r\n        <div> Tab 3 Body <\/div>\r\n\t<div> Tab 4 Body <\/div>\r\n    <\/div>\r\n<\/div>\t\r\n\t<\/pre>\r\n\t\t\r\n\"JS<\/a>\r\n\t<\/li>\r\n\t\t\t\r\n\t
  3. \r\n\t   
    Go back to your home page to see the newly created Tabs, make sure to refresh the page:<\/p> \r\n\r\n\"JS<\/a>\r\n\t<\/li>\r\n\t\r\n<\/ol>\r\n\r\n\r\n
    Feel free to check the detailed video tutorial below:<\/p>\r\n\r\nJS Animated. How to create\/manage Tabs layout<\/a>","protected":false},"excerpt":{"rendered":"
    This video tutorial will show how to create and manage Tabs layout  in JS Animated templates.<\/strong><\/p>\n","protected":false},"author":73,"featured_media":60703,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1016],"tags":[796,2411,482,793,977],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/60696"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/73"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=60696"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/60696\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/60703"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=60696"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=60696"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=60696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}