CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Kyon147
Kyon147

Reputation: 798

jquery tabs display:none hiding all inner divs

I have some query tabs and they are working good. The only issue is any div inside them is also being hidden with the display:none css.

Of course all i want it to select is the tab container and not the content otherwise I have to manually add display:inherit/box or what ever to each div inside the tab for it to show up.

Here is the jquery

$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');

$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div').hide();
$(currentTab).show();
return false;
});
});

HTML here

<div id="tabs">
   <ul>
     <li><a href="#tab-1">Overview</a></li>
     <li><a href="#tab-2">Facilities</a></li>
     <li><a href="#tab-3">Reviews</a></li>
     <li><a href="#tab-4">Images</a></li>
   </ul>
   <div id="tab-1">
     <h5>Overview</h5>
          <div id= table"></div>
   </div>
   <div id="tab-2">
     <h5>Facilities</h5>
    </div>

So from above I assume the div called table would be hidden because the jquery is selecting all of the divs inside inside the parent #tabs div. I am a complete beginner when it comes to jquery so I would not know how to solve this.

On the same note. How would one ancor each tab so it can be "jumped" to by url i.e www.example.com/pagewithtab/tab1name

Thanks guys and girls.

Upvotes: 0

Views: 1630

Answers (1)

Cᴏʀʏ
Cᴏʀʏ

Reputation: 107536

I would change a few selectors in your script. In particular, the ones that contain #tabs div, such as this one:

$('#tabs div').hide();

And this one:

$('#tabs div:first').show();

The selectors here target all child divs within #tabs, but you really probably only want direct descendants of #tabs. To target the, use >:

$('#tabs > div').hide();

And

$('#tabs > div:first').show();

Upvotes: 1

Related Questions