Slide Div Content With jquery html css

Question

I have made Tabs. Each Tab contain one div. i want to slide div content from left to right with use of if else condition. But I checked with alert box. But it did not work. Here is my code.

$('.tabs').click(function() {
if ('.tabs :nth-child(even)')
    {
  alert("11111");
  $('.tab-content').hide("slide", {
    direction: "left"
  }, 1000);
  alert("222222");
  $('.tab-content').show("slide", {
    direction: "left"
  }, 1000);
  alert("3333333");} 
    else 
   {
     $('.tab-content').hide("slide", {
    direction: "right"
  }, 1000);
  alert("777777");
  $('.tab-content').show("slide", {
    direction: "right"
  }, 1000);
  alert("6666666");
  }
});

Answer 1

The problem is in your click event you are missing $ and your if condition is wrong.

JSFIDDLE

Here is a demo code to check even or odd index:

 $('div').click(function() { //do something different based on whether even or odd div if ($(this).is(':even')) { $(this).html('even'); } else { $(this).html('odd'); } }); 

 <div>one</div> <div>two</div> <div>three</div> <div>four</div> 

EDIT : If you don't want to use odd even concept you can just toggle .One of the easiest bug free way is to do the way I have done in the fiddle.

YOUR FIDDLE UPDATED

EDIT 2 : CHECK THIS OUT TO SHOW ONLY TARGET CONTENT