Javascript DOM manipulation with odd even class

Question

I have HTML like this

<div class="oddeven">
    <p id="p1" class="odd">Lorem ipsum</p>
    <p id="p2" class="even">dolor sit amet</p>
    <p id="p3" class="odd">consectetur adipiscing</p>
    <p id="p4" class="even">sed do</p>
    <p id="p5" class="odd">eiusmod tempor</p>
    <p id="p6" class="even">incididunt ut</p>
</div>
<button class="btnClick">Click</button>

I want to show only two paragraph like this

<div class="oddeven">
    <p id="p1" class="odd active">Lorem ipsum</p> // every 'odd' class will show here
    <p id="p2" class="even active">dolor sit amet</p> // every 'even' class will show here
</div>
<button class="btnClick">Click</button>

The rule is "Starting from '#p1', only one paragraph will change on click button, from odd to even, Odd class will change to another odd class, and even class will change to another even class".

Example first change will look like this (first button click)

<div class="oddeven">
    <p id="p3" class="odd active">consectetur adipiscing</p> // #p1 change to #p3
    <p id="p2" class="even active">dolor sit amet</p>
</div>

Example second change (second button click)

<div class="oddeven">
    <p id="p3" class="odd active">consectetur adipiscing</p>
    <p id="p4" class="even active">sed do</p> // #p2 change to #p4
</div>

Next button click will change odd, then even, odd, even, and so on.. Anyone please help me, I would highly appreciate..

$(document).ready(function(){
  var first_odd = $('.oddeven').children('.odd')[0];
  var first_even = $('.oddeven').children('.even')[0];

  $(first_odd).addClass('active');
  $(first_even).addClass('active');

  var odd_sibs = $(first_odd).siblings('.odd');
  var even_sibs = $(first_even).siblings('.even');

  $('.btnClick').on('click', function(){
    // I don't know what to do
  })
})

.odd {
	color: red;
}
.even {
  color: blue;
}
.oddeven p {
  display: none;
}
.active {
  display: block!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="oddeven">
	<p id="p1" class="odd">Lorem ipsum</p>
	<p id="p2" class="even">dolor sit amet</p>
	<p id="p3" class="odd">consectetur adipiscing</p>
	<p id="p4" class="even">sed do</p>
	<p id="p5" class="odd">eiusmod tempor</p>
	<p id="p6" class="even">incididunt ut</p>
</div>
<button class="btnClick">Click</button>

Answer 1

You can use .filter(), :not(), :visible, :eq(), RegExp [135] to check if a variable incremented from 0 is odd or even number; if true call .hide() on p elements having .odd .className which is :visible; select next .even element using variable, else do not .hide() .even :visible element, perform same operation

$(document).ready(function() {
  var i = 0;
  $(".btnClick").on("click", function oddEven() {
    if (i === 0) {
      $(".oddeven p")
        .filter(".even:eq(" + i + "), .odd:eq(" + i + ")")
        .show()
        .toggleClass("active")
        .filter(".odd").css("top", "60px")
        .addBack()
        .filter(".even").css("top", "100px")
        ++i;
    } else {
      if (/[135]/.test(i)) {
        $(".oddeven p:not(.odd:visible)").hide()
          .removeClass("active")
          .filter(".even:eq(" + i + ")")
          .css("top", "100px")
          .show()
          .addClass("active")
      } else {
        $(".oddeven p:not(.even:visible)").hide()
          .removeClass("active")
          .filter(".odd:eq(" + i + ")")
          .css("top", "60px")
          .show()
          .addClass("active")
      }
      ++i
    }

    if (i === $(".oddeven p").length -1) {
      i = 0;
      $(".oddeven p")
      .css("top", "0px")
      .hide()
      .removeClass("active");
      oddEven()
    }
  })
})

.odd {
  color: red;
}

.even {
  color: blue;
}

.oddeven p {
  display: none;
  position: absolute;
  top:0px;
}

.active {
  display: block!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="oddeven">
  <p id="p1" class="odd">Lorem ipsum</p>
  <p id="p2" class="even">dolor sit amet</p>
  <p id="p3" class="odd">consectetur adipiscing</p>
  <p id="p4" class="even">sed do</p>
  <p id="p5" class="odd">eiusmod tempor</p>
  <p id="p6" class="even">incididunt ut</p>
</div>
<button class="btnClick">Click</button>

Answer 2

Using gt and lt will lead to more maintainable code (as you can easily increase the number of elements.

$(".oddeven").data("location", 0);
update();
  
function update() {
  loc = $(".oddeven").data("location") + 2;
  $(".oddeven").data("location", loc);
  $(".oddeven p").hide();
  $(".oddeven p:lt(" + loc + "):gt(-3)").show();
}
$('.btnClick').on('click', update);

.oddeven p:nth-child(odd) {
	color: red;
}
.oddeven p:nth-child(even) {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="oddeven">
	<p id="p1">Lorem ipsum</p>
	<p id="p2">dolor sit amet</p>
	<p id="p3">consectetur adipiscing</p>
	<p id="p4">sed do</p>
	<p id="p5">eiusmod tempor</p>
	<p id="p6">incididunt ut</p>
</div>
<button class="btnClick">Click</button>

Answer 3

Here's one way to do it:

var odd = $(".odd")            // save a reference to the list of odd
var even = $(".even")          // and the list of even elements

odd.eq(0).addClass("active")   // display the first odd
even.eq(0).addClass("active")  // and first even

odd.prependTo(".oddeven")      // move the odd ones in front of the even
                               // so that when visible they'll always be
                               // before the even

var current = 0                // index of item currently shown
var next = odd                 // type to show next

$("button.btnClick").on("click", function() {
  if (next === odd)                             // if next is odd 
    current = (current + 1) % odd.length        // go to next index

  next.filter(".active").removeClass("active")  // deactivate previous one
  next.eq(current).addClass("active")           // activate next
  
  next = next === odd ? even : odd              // set which type to do next
})

.odd { color: red; }
.even { color: blue; }
.oddeven p { display: none; }
.active { display: block!important; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="oddeven">
    <p id="p1" class="odd">p1 - Lorem ipsum</p>
    <p id="p2" class="even">p2 - dolor sit amet</p>
    <p id="p3" class="odd">p3 - consectetur adipiscing</p>
    <p id="p4" class="even">p4 - sed do</p>
    <p id="p5" class="odd">p5 - eiusmod tempor</p>
    <p id="p6" class="even">p6 - incididunt ut</p>
</div>
<button class="btnClick">Click</button>