CODEWITHSUNDEEP
javascriptjqueryhtml
tosi
tosi

Reputation: 621

Toggle a class on and off between two elements

I have this html:

<div class="container">
   <div id="element-1" class="element-show"></div>
   <div id="element-2"></div>
</div>

I want class element-show to hide from element-1 and show in element-2 and vice versa; called from one function in jQuery.

Any way I can do this properly?

Upvotes: 2

Views: 1336

Answers (2)

Karan Singh Dhir
Karan Singh Dhir

Reputation: 751

You can achieve that by doing this:

function getClass() {
  var children_container = document.getElementsByClassName("container")[0].children;

  for (var i = 0; i < children_container.length; i++) {
    if ($(children_container[i]).hasClass('element-show')) {
      $(children_container[i]).removeClass();
      if (i == "0") {
        $(children_container[1]).addClass("element-show");
        break;
      } else if (i == "1") {
        $(children_container[0]).addClass("element-show");
        break;
      }
    }
  };
};

getClass();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div id="element-1" class="element-show"></div>
  <div id="element-2"></div>
</div>

If you have more than 2 elements and you want to add the class on rest of them and remove it from the element which already has that class, then you can achieve that by doing this (this function will also work for the case you mentioned too):

function getClass() {
  var children_container = document.getElementsByClassName("container")[0].children;
  var class_elem;
  for (var i = 0; i < children_container.length; i++) {
    if ($(children_container[i]).hasClass('element-show')) {
      class_elem = i;
      $(children_container[i]).removeClass();
      i = 0;
    }
    if (class_elem != undefined) {
      if (i != class_elem) {
        $(children_container[i]).addClass('element-show');
      }
    };
  };
};

getClass();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="element-0"></div>
  <div id="element-1" class="element-show"></div>
  <div id="element-2"></div>
  <div id="element-3"></div>
  <div id="element-4"></div>
</div>

Upvotes: 0

Paun Narcis Iulian
Paun Narcis Iulian

Reputation: 799

will something like that be OK?

$("button").on("click", function(e){
  $('.container').children("div").toggleClass("element-show");
})
.element-show{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
   <div id="element-1" class="element-show">x</div>
   <div id="element-2">y</div>
</div>
<button>Toggle class</button>

Upvotes: 3

Related Questions