CODEWITHSUNDEEP
jquery
user3267537
user3267537

Reputation: 151

Showing a tab only when another tab is clicked and/or active?

I have another quick question. I have a set of DIV's that act as Tabs. (Similar to jQueryUI's Tabs). My question is this, and it should contain a short and concise answer (I hope =P).

I want to know how to change my existing JS (Shown Below), to where when a tab with an ID of #tab-2 is clicked, or is active (whichever is better or even both, idk), then and only then, show the tab with the ID of #tab-4.

This way, when a user clicks on #tab-2, #tab-4 appears. If #tab-2 is not clicked or active, tab 4 is hidden.

I thought this would be easy, and maybe I am over analyzing it, but here is my JS:

$(function() {
if $('#tab-2').click(function() {
    $('#tab-4').show();
    };
else $('#tab-4').hide();
    };
});

});

HTML Update:

CANNOT UPDATE BECAUSE SO's CODE EDITOR IS CRAP IMO. Look at https://jqueryui.com/tabs/ for a great reference.

Does this look good, all I know is it doesn't work for some reason lol. Any help is appreciated. =)

Upvotes: 1

Views: 516

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 206028

You were almost there

if $('#tab-2').click(function() { is wrong, and some misplaced ;.

$(function() { // DOM ready shorthand

  $('#tab-2').click(function() {
      $('#tab-4').toggle();
  });                         

});

It would help also that you use a selector that points to ALL of your tabs, so when you waht first to close them all you can do something like: $('.tab').hide(); // First, hide all...

By seeing your HTML I would surely give you a better advice... Till than.

Upvotes: 1

Jack
Jack

Reputation: 9388

Nothing is wrong with the selected answer, but you asked for me to elaborate :) Here's a quick JS Fiddle that demonstrates what I suggested.

Firstly, the fiddle: http://jsfiddle.net/GY356/

The main difference is that instead of using jQuery to show/hide elements directly (by calling $(this).show(), $(this).hide(), or $(this).toggle()), we set a class on the parent (in our case, the id of the clicked tab).

Upvotes: 1

Related Questions