How to change two class with another using jquery?

Question

I have a tree View with this code snippet. I have span with CollOpen or CollClosed class. how can i change CollOpen with CollClosed or vice versa on span click that have each of these two class?

     .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>

Can you just have it default to ColOpen, and then toggle ColClosed? — Rob Erskine, Dec 03 '15 at 17:34
It's not clear what you're trying to do, can you clarify it? — T.J. Crowder, Dec 03 '15 at 17:39
@T.J. Crowder, 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 . — Farzaneh Talebi, Dec 03 '15 at 17:59

T.J. Crowder · Accepted Answer · 2015-12-03T18:17:07.897

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>

Note that I've had to add [*] to the spans, though, since otherwise they have no width and can't be clicked on.

I would suggest that rather than toggling between .CollOpen and .CollClosed, you just have things render one way (open or closed) and use a class on the li to switch the rendering to the other way. I'd have the spans within the lis consistent. (Don't think I'd use the actual bullet as the expanded/contracting indicator, but that's a style thing.)

score -1 · Answer 2 · answered Dec 03 '15 at 17:43

-1

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');÷ }

answered Dec 03 '15 at 17:43

Dnyaneshwar Supe

141
3

Any reason for downvote??? – Dnyaneshwar Supe Dec 03 '15 at 18:06
The tooltip gives the reason for downvoting: "This answer is not useful." In this case, I'd suggest it's not useful for a couple of reasons: 1. It's doing a *lot* more work than necessary. 2. It doesn't show how to do what the OP wants. (What the OP wanted wasn't very clear at first; guessing at what they want isn't usually useful.) – T.J. Crowder Dec 03 '15 at 18:20

How to change two class with another using jquery?

2 Answers2