We Keep Coding

jQuery Tabs, multiple tabs with just ONE panel

I'm working on a custom solution, so I thought I would ask the community if anyone has use jQuery Tabs for this purpose before.
The idea is this: I have one main panel, a form with inputs. There are multiple tabs which basically identify different records. All the records will use this form, thats why I just want to load it once, instead of for each tab.
I put a basic example of the direction I want to go. As you can see there are 3 tabs but only one panel. I want to dynamically load content into the_input depending on which tab I click. SO i don't even want to switch the panel, just the selected tab on each click.
I was thinking I need to catch the beforeActivate (http://api.jqueryui.com/tabs/#event-beforeActivate) event, identify which tab was selected, and dynamically alter the 1 visual panel accordingly.
The code isn't really working
jQuery(function($){
$("#tabs").tabs({
beforeActivate(event, ui) {
$('#msg').append('<p>'+ui.newPanel+'</p>');
//I figure what I want to do here is catch the ID of the selected tab, and use that to dynamically load content to the tab.
}
});
function fill_input(selector){
if ( selector == 1 ) {
$('#the_input').val(1);
}else if ( selector == 2 ) {
$('#the_input').val(2);
}else{
$('#the_input').val();
}
}
})
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div id="tabs">
<ul>
<li>New</li>
<li>record 1</li>
<li>record 2</li>
</ul>
<div id="bol_new">
<form>
<input id="the_input">
</form>
</div>
</div>
<div id="msg">
</div>

You could set the href for each hyperlink to bol_new as under
<ul>
<li>New</li>
<li>record 1</li>
<li>record 2</li>
</ul>
This will set the panel for each tab to the same div with id="bol_new"
Test: https://plnkr.co/edit/EGtCnmNr0c28AaT647SP?p=preview

I would advise just mocking up the tabs with CSS. You can then manipulate the form as needed.
Working example: https://jsfiddle.net/Twisty/j63uvk4q/
HTML
<div id="tabs" class="ui-tabs ui-corner-all ui-widget ui-widget-content">
<ul class="ui-tabs-nav ui-corner-all ui-helper-reset ui-helper-clearfix ui-widget-header">
<li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab ui-tabs-active ui-state-active">
New
</li>
<li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab">
Record 1
</li>
<li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab">
Record 2
</li>
</ul>
<div id="bol_new" class="ui-tabs-panel ui-corner-bottom ui-widget-content">
<form>
Record:
<input id="the_input">
</form>
</div>
</div>
<div id="msg">
</div>
JavaScript
var myData = {
records: {
bol_1: "Homer Simpson",
bol_2: "Marge Simpson"
}
}
$(function() {
$("#tabs .ui-tabs-nav li").click(function(e) {
e.preventDefault();
$("#tabs li.ui-state-active").toggleClass("ui-tabs-active ui-state-active");
$(e.target).parent().addClass("ui-tabs-active ui-state-active");
var id = $(e.target).attr("href").substring(1);
$("#the_input").val(myData.records[id]);
});
$("#tabs .ui-tabs-nav .ui-tabs-tab").hover(function(e) {
$(this).toggleClass("ui-state-hover");
}, function(e) {
$(this).toggleClass("ui-state-hover");
});
});

Link to Jquery Tab does not work

I am working on a L5 project and i am using a Jquery tab for one of its pages. I have a little menu for reaching tab contents without clicking just tabs.
<div id="aracislem" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Araç Arama </li>
<li>Araç Kayıt </li>
<li>İstatistik </li>
<li>Araç Takibi </li>
</ul>
</div>
</div>
Any my tab is
<script type="text/javascript">
$(document).ready(function () {
$('#tab-container').tabs({
active: $.cookie('activetab'),
activate: function (event, ui) {
$.cookie('activetab', ui.newTab.index(), {
expires: 10
});
}
});
});
</script>
<div id="tab-container" class='tab-container'>
<ul>
<li class='tab'>Araç Arama</li>
<li class='tab'>Araç Kayıt</li>
<li class='tab'>İstatistik</li>
<li class='tab'>Araç Takip</li>
</ul>
<div class='panel-container'>
<div id="aracaramatab">
Araç Arama
</div>
<div id="arackayittab">
Araç Kayıt
</div>
<div id="istatistiktab">
İstatistik
</div>
<div id="aractakiptab">
Araç Takip
</div>
</div>
</div>
When i clik to menu links i cant reach to necessary tab, link changes in the browser but does not redirect to tab also when i click to tabs, content changes but links do not change. Anybody knows what am i doing wrong ?

Check this DEMO : http://jsfiddle.net/yeyene/mktgnp3e/1/
Your problem is when you click link and after going to link (it will redirect a different page?), want to active the tab, right?
So get the url first, then get the hash, then do the active tab step.
JQUERY
$(document).ready(function () {
$("#tab-container").tabs({});
// for testing purpose
var url = "http://localhost/pages/aracislemler#arackayittab";
// use this script for getting url
//var url = window.location.href;
var hash = url.substring(url.indexOf('#'));
// trigger click to tab with url hash name
$('#tab-container a[href='+hash+']').trigger('click');
});
*Use the line var url = window.location.href; for your app, then take out the current url getting test variable.

Show HTML class on first tab when you do not know which tab will display first as it is dependent on whether data exists in that field

I have a web page with tabbed content. The information for each tab is pulled from a database. The tab only displays if content exists. The JS requires class="active" to be set on the first tab to allow it to load and also to change the colour of the tab to show it is the active tab.
The problem I have is that I don't know which tab will be first, as there may not be any information for the first tab, so it will not display and it will be tab 2 or 3 that will show first.
How can I say 'make this tab have class="active" if it is first'?
HTML:
<nav class="filters">
<ul class="tabs">
<li class="active">Content 1</li>
<li>Content 2</li>
<li>Content 3</li>
</ul>
</nav>
<article class="tab-content has-aside wysiwyg active" id="uniquename-tab-1">
<h1>Content 1</h1>
</article>
<article class="tab-content has-aside wysiwyg" id="uniquename-tab-2">
<h1>Content 2</h1>
</article>
<article class="tab-content has-aside wysiwyg" id="uniquename-tab-3">
<h1>Content 3</h1>
</article>
JavaScript:
function tabs($container) {
$container.each(function() {
$('.tabs > li > a', $container).on('click', function(e) {
e.preventDefault();
var tab_id = $(this).attr('data-tab');
$('.tabs > li', $container).removeClass('active');
$('.tab-content', $container).removeClass('active');
$(this).parent().addClass('active');
$("#"+tab_id, $container).addClass('active');
});
});
}

$("ul.tabs li:eq(0)").addClass('active');

I suppose you are using Bootstrap. If so, I had a similar problem and added a call to the tab function, as stated in the usage section of their doc:
$(document).ready(function () {
$(".tabs a:first").tab('show');
}

jQuery .show & .hide not working

I am currently working on building a small menu that will change divs based upon which one it clicked. So if one is clicked it will show the div associated with it and hide the others, ect. But I cannot get it to work, nor can I figure out why. Any help would be appreciated. Thanks.
Below is my code. I've clipped out the content as there was a lot of it.
<script type="text/javascript">
$('.mopHeader').click(function() {
$('#raid-progress-mop').show();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').hide();
});
$('.cataHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').show();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').hide();
});
$('.wotlkHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').show();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').hide();
});
$('.tbcHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').show();
$('#raid-progress-vanilla').hide();
});
$('.vanillaHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').show();
});
</script>
<span class="h4">Raid Progress <span class="mopHeader">MoP</span> <span class="cataHeader">Cata</span> <span class="wotlkHeader">WotLK</span> <span class="tbcHeader">TBC</span> <span class="vanillaHeader">WoW</span></span>
<div id="raid-progress-mop">
<ul id="raid-mop">
<li>Content A</li>
</ul>
</div>
<div id="raid-progress-cata">
<ul id="raid-cata">
<li>Content B</li>
</ul>
</div>
<div id="raid-progress-wotlk">
<ul id="raid-wotlk">
<li>Content C</li>
</ul>
</div>
<div id="raid-progress-tbc">
<ul id="raid-tbc">
<li>Content D</li>
</ul>
</div>
<div id="raid-progress-vanilla">
<ul id="raid-vanilla">
<li>Content E</li>
</ul>
</div>

Wrap your code in:
$(function(){ ... });
...which is the short form of:
$(document).ready(function(){ ... });
Cheers

You need to put the script underneath your markup. Either that, or put it inside document.ready callback:
$(document).ready(function() {
// code here
});
The problem is that when the script appears above the markup, it will execute before the HTML is loaded, and so the browser won't yet know about raid-progress-mop, etc.

How about doing that a little more dynamically inside a ready() function :
<script type="text/javascript">
$(function() {
$('[class$="Header"]').on('click', function() {
var myClass = $(this).attr('class').replace('Header', '');
$('[id^="raid-progress"]').hide();
$('#raid-progress-' + myClass).show();
});
});
</script>

jsBin demo
Wrap your code into a ready finction and this code I wrote is all you need:
$(function(){
$('span[class$="Header"]').click(function(){
var classNameSpecific = $(this).attr('class').split('Header')[0];
$('div[id^="raid-progress-"]').hide();
$('#raid-progress-'+classNameSpecific).show();
});
});
Explanation:
$('span[class$="Header"]') = target any span element which class ends with Header
Now just attach a click handler to all that spans.
Than, to hide all your div elements do:
$('div[id^="raid-progress-"]').hide(); = will hide any div which id starts with raid-progress-
and than you just need to target the div that contains the magic word:
$('#raid-progress-'+classNameSpecific).show();

$('.mopHeader') isn't defined yet. wrap your script with $(function(){...})

show/hide a link if certain jquery ui tab is selected

When #my-text-link is clicked, i need to select tab 5 and when tab 5 is selected i need to hide #my-text-link. hope this makes sense, heres the code, and also what I have done so far, please feel free to show me a better way. Thanks in advance
var $tabs = $('.tabbed').tabs(); // first tab selected
$('#my-text-link').click(function() { // bind click event to link
$tabs.tabs('select', 4); // switch to third tab
$('#my-text-link').hide();
return false;
});
<ul>
<li class="one"></li>
<li class="two"></li>
<li class="three"></li>
<li class="four"></li>
<li class="five"></li>
</ul>
<div id="tabs-1"></div>
<div id="tabs-2"></div>
<div id="tabs-3"></div>
<div id="tabs-4"></div>
<div id="tabs-5"></div>

As far as I can see from your code, you've already managed to open a tab when the link is clicked. Here's how you hide the link when user opens the tab:
$(".tabbed").tabs({
select: function(event, ui) {
var tabId = ui.panel.id.substring(5);
if (tabId == 5) {
$('#my-text-link').hide();
}
};
})
Hope this helps