Hide/delete tab header

[ClSoft]

Hi all
any option ti hide tab header?
I try with height:0 but it does not work.
I will drive the tabs with accordion.
Thanks.

[ClSoft]

Is it possible to somehow hide or delete tab header.
Thanks!

[stworthy]

Why to hide tabs header? If so you will not be able to switch different panel by clicking the tab title.

[ClSoft]

Hello
I'm using something like this:
http://www.jeasyui.com/documentation/index.php
but instead of tree (on left side) I'm using Accordion.
Each click on tree load page to tab (using href). If tab does not exists, it is created and if it exists, it is reused - it is great idea, btw.
Thanks!

[ClSoft]

stworthy, do you have idea how to hide or delete tab header, please?

[stworthy]

Try to add the code below to the page.

Code:

	<style type="text/css">
		.tabs-header{
			display:none;
		}
		.tabs-wrap{
			height:0;
		}
	</style>

[ClSoft]

Hello
it works perfect.
Thanks man.

[ClSoft]

Me again
is it possible to use different style for tabs?
I mean, I need to hide some tabs but css above hide all my tabs and it should not

[ClSoft]

stworthy
your example works fine, but I have some other tabs and I need to display their header (title).
Do you have some idea of how to hide title/header only for specified tab object and not for all?
Thanks.

[stworthy]

Try the following code:

Code:

<style type="text/css">
	.mytabs .tabs-header{
		display:none;
	}
	.mytabs .tabs-wrap{
		height:0;
	}
</style>
<div class="easyui-tabs" style="width:700px;height:250px">
	<div title="Sub Tabs" style="padding:10px;">
		<div class="mytabs easyui-tabs" data-options="fit:true,plain:true">
			<div title="Title1" style="padding:10px;">Content 1</div>
			<div title="Title2" style="padding:10px;">Content 2</div>
			<div title="Title3" style="padding:10px;">Content 3</div>
		</div>
	</div>
</div>

[ClSoft]

Hello
thanks for your example, but of course, I have reversed case:
Above tab should have no title/header, and below should be normal.
I try to modify your code but it does not work:

Code:

  <style type="text/css">
    .mytabs .tabs-header{
      display:none;
    }
    .mytabs .tabs-wrap{
      height:0;
    }
  </style>
    <div class="mytabs easyui-tabs" style="width:700px;height:250px">
    <div title="Sub Tabs" style="padding:10px;">
      <div class="easyui-tabs" data-options="fit:true,plain:true">
        <div title="Title1" style="padding:10px;">Content 1</div>
        <div title="Title2" style="padding:10px;">Content 2</div>
        <div title="Title3" style="padding:10px;">Content 3</div>
      </div>
    </div>
  </div>

[stworthy]

Here is another solution to hide the tabs's header.

Code:

<script>
$.extend($.fn.tabs.methods, {
	hideHeader: function(jq){
		return jq.each(function(){
			var header = $(this).children('div.tabs-header');
			header.css('background-color','transparent');
			header.find('div.tabs-wrap').css('height',0);
			$(this).tabs('resize');
		});
	}
});
</script>

Call 'hideHeader' method to hide the tabs's header.

Code:

$('#tt').tabs('hideHeader');

[ClSoft]

Of course it works perfect !
Thanks a lot!!