{"action":"created","issue":{"url":"https://api.github.com/repos/twbs/bootstrap/issues/18301","labels_url":"https://api.github.com/repos/twbs/bootstrap/issues/18301/labels{/name}","comments_url":"https://api.github.com/repos/twbs/bootstrap/issues/18301/comments","events_url":"https://api.github.com/repos/twbs/bootstrap/issues/18301/events","html_url":"https://github.com/twbs/bootstrap/issues/18301","id":118016431,"number":18301,"title":"Tab Plugin should have default behaviour if a target is not specified [enhancement] ","user":{"login":"dtjones","id":1758785,"avatar_url":"https://avatars.githubusercontent.com/u/1758785?v=3","gravatar_id":"","url":"https://api.github.com/users/dtjones","html_url":"https://github.com/dtjones","followers_url":"https://api.github.com/users/dtjones/followers","following_url":"https://api.github.com/users/dtjones/following{/other_user}","gists_url":"https://api.github.com/users/dtjones/gists{/gist_id}","starred_url":"https://api.github.com/users/dtjones/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dtjones/subscriptions","organizations_url":"https://api.github.com/users/dtjones/orgs","repos_url":"https://api.github.com/users/dtjones/repos","events_url":"https://api.github.com/users/dtjones/events{/privacy}","received_events_url":"https://api.github.com/users/dtjones/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":6,"created_at":"2015-11-20T11:01:54Z","updated_at":"2015-11-20T11:21:46Z","closed_at":null,"body":"The following code would allow tabs to function without selectors providing they are wrapped either within a `[role=tabpanel]` or a `[role=tabcontainer]`. The default behaviour would pair the index `[role=\"tab\"]` to `[role=\"tabpanel\"]`. \r\nThis allows for deep nesting tabs without specifying #ids or .classes. \r\nIf a tab is required to perform something other than the default pairing then a selector can be specified.\r\nIf multiple matching targets are found then the selector is looked for within the context of the wrapper.\r\n\r\nIf at this point more that one matching targets are found then it selects the target which has the same  `[role=\"tabpanel\"]` index as the `[role=\"tab\"]` if it exists. \r\n\r\nOtherwise the $target does not change and the script continues as normal. \r\n\r\nThe JavaScript is probably the best approach for best performance, I has many nested `if, else`'s which may look untidy but makes sure no unnecessary methods are called. \r\n\r\nI recommend looking/testing the demo\r\n\r\n<p data-height=\"268\" data-theme-id=\"0\" data-slug-hash=\"avMKgM\" data-default-tab=\"result\" data-user=\"tarranjones\" class='codepen'>See the Pen <a href='http://codepen.io/tarranjones/pen/avMKgM/'>Bootstrap tab.js (working nested tabs without using selectors)</a> by Tarran Jones (<a href='http://codepen.io/tarranjones'>@tarranjones</a>) on <a href='http://codepen.io'>CodePen</a>.</p>\r\n<script async src=\"//assets.codepen.io/assets/embed/ei.js\"></script>\r\n\r\n\r\n\r\n\t// changes\r\n\tif ($target.length != 1) {\r\n\t\tvar container = '[role=\"tabpanel\"],[role=\"tabcontainer\"]'\r\n\t\tvar $context = $this.closest(container);\r\n\t\tif ($context.length) {\r\n\t\t\tif ($target.length > 1) {\r\n\t\t\t\t$target_idx = $context.find(selector).filter(':eq(' + $this.parent().index() + ')')\r\n\t\t\t} else {\r\n\t\t\t\t$target_idx = $context.find(container).filter(function(i, el) {\r\n\t\t\t\t\tvar $closest = $(el).parent().closest(container, $context);\r\n\t\t\t\t\treturn !$closest.length || $context.is($closest);\r\n\t\t\t\t}).eq($this.parent().index());\r\n\t\t\t}\r\n\t\t\tif ($target_idx.length) $target = $target_idx\r\n\t\t}\r\n\t}"},"comment":{"url":"https://api.github.com/repos/twbs/bootstrap/issues/comments/158366302","html_url":"https://github.com/twbs/bootstrap/issues/18301#issuecomment-158366302","issue_url":"https://api.github.com/repos/twbs/bootstrap/issues/18301","id":158366302,"user":{"login":"dtjones","id":1758785,"avatar_url":"https://avatars.githubusercontent.com/u/1758785?v=3","gravatar_id":"","url":"https://api.github.com/users/dtjones","html_url":"https://github.com/dtjones","followers_url":"https://api.github.com/users/dtjones/followers","following_url":"https://api.github.com/users/dtjones/following{/other_user}","gists_url":"https://api.github.com/users/dtjones/gists{/gist_id}","starred_url":"https://api.github.com/users/dtjones/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dtjones/subscriptions","organizations_url":"https://api.github.com/users/dtjones/orgs","repos_url":"https://api.github.com/users/dtjones/repos","events_url":"https://api.github.com/users/dtjones/events{/privacy}","received_events_url":"https://api.github.com/users/dtjones/received_events","type":"User","site_admin":false},"created_at":"2015-11-20T11:21:46Z","updated_at":"2015-11-20T11:21:46Z","body":"http://codepen.io/tarranjones/pen/avMKgM"}}