How to change two class with another using jquery?

<>

This question already has an answer here:

Answers


I want when user click on span with ColOpen class replace it with ColClosed and hide ul. but i don't know how to know what span the user clicked

You can do that by watching for click on a container element (for instance, the treeview) and telling jQuery to only notify you if that click was on a .CollOpen or .CollClosed span (this is called event delegation):

$(".treeView").on("click", ".CollOpen, .CollClosed", function() {
    // ...
});

Within the event handler, this will be the span that was clicked, so we can use that to toggle the class and hide the following ul:

$(this).toggleClass("CollOpen CollClosed").nextAll('ul').first().toggle();

So:

$(".treeView").on("click", ".CollOpen, .CollClosed", function() {
    $(this).toggleClass("CollOpen CollClosed").nextAll('ul').first().toggle();
});

Example:

$(".treeView").on("click", ".CollOpen, .CollClosed", function() {
      $(this).toggleClass("CollOpen CollClosed").nextAll('ul').first().toggle();
});
.treeView {
  -moz-user-select: none;
  position: relative;
}
.treeView ul {
  margin: 0 0 0 -1.5em;
  padding: 0 0 0 1.5em;
}
.treeView ul ul {
  background: url('http://kaminet.ir/img/list-item-contents.png') repeat-y left;
}
.treeView li.lastChild > ul {
  background-image: none;
}
.treeView li {
  margin: 0;
  padding: 0;
  background: url('http://kaminet.ir/img/list-item-root.png') no-repeat top left;
  list-style-position: inside;
  list-style-image: url('http://kaminet.ir/img/button.png');
  cursor: auto;
}
.treeView li.CollOpen {
  list-style-image: url('http://kaminet.ir/img/button-open.png');
  cursor: pointer;
}
.treeView li.CollClosed {
  list-style-image: url('http://kaminet.ir/img/button-closed.png');
  cursor: pointer;
}
.treeView li li {
  background-image: url('http://kaminet.ir/img/list-item.png');
  padding-left: 1.5em;
}
.treeView li.lastChild {
  background-image: url('http://kaminet.ir/img/list-item-last.png');
}
.treeView li.CollOpen {
  background-image: url('http://kaminet.ir/img/list-item-open.png');
  ÷
}
.treeView li.CollOpen.lastChild {
  background-image: url('http://kaminet.ir/img/list-item-last-open.png');
}
<ul class="treeView">
  <li>
    <span class="CollOpen">[*]</span><span>Collapsible lists</span>
    <ul class="CollList">
      <li>
        <span class="CollClosed">[*]</span><span>Actions</span>
        <ul class=" CollList" style="display: none;">
          <li class="lastChild">
            <span class="CollOpen">[*]</span><span>Actions</span>
            <ul class="CollList" style="display: none;">
              <li class="">Expanding/opening</li>
              <li class="lastChild">Collapsing/closing</li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="lastChild">
        <span class=" CollOpen">[*]</span><span>Actions</span>
        <ul class="CollList" style="display: none;">
          <li class="">Directory listings</li>
          <li class="">Tree views</li>
          <li class="lastChild">Outline views</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

if($(this).hasClass('CollOpen')
{
$(this).removeClass('CollOpen')
$(this).addClass('CollClosed')
}
else
{
$(this).removeClass('CollClosed')
$(this).addClass('CollOpen')
}

Please Note there is error in your css

.treeView li.CollOpen{ background-image:url('http://kaminet.ir/img/list-item-open.png');÷ }


Need Your Help

Couldn't change the telerik radgrid cell background color

colors background telerik cell radgrid

I want to change a cell's background color on a telerik radgrid on windows form project if the incoming value is "Var" but couldn't manage to do it.

Mysql LOAD DATA INFILE - input data unexpectedly truncated

mysql load etl mysqlimport

I'm trying to load data into a table (obviously?). My table looks like this: