CODEWITHSUNDEEP
jquery
Pure Rhymer Organization
Pure Rhymer Organization

Reputation: 536

jQuery .removeClass and addClass

I cant remove or add the class within a div and trying to remove the class .wew when the .st-collapse is visible and add class .wew1 if the .st-collapse is hidden

so my flow is go to each parent div and find its div child

my HTML

    <div class="st">
    		<div class="st-heading wew">
    			<a href="#">Link 1</a>
    		</div>
    		<div class="st-collapse">
    			<ul>
    				<li><a href="#">Sub-Link 1</a></li>
    				<li><a href="#">Sub-Link 2</a></li>
    				<li><a href="#">Sub-Link 3</a></li>
    			</ul>
    		</div>
    	</div>
    <div class="st">
        		<div class="st-heading wew">
        			<a href="#">Link 1</a>
        		</div>
        		<div class="st-collapse">
        			<ul>
        				<li><a href="#">Sub-Link 1</a></li>
        				<li><a href="#">Sub-Link 2</a></li>
        				<li><a href="#">Sub-Link 3</a></li>
        			</ul>
        		</div>
        	</div>

this is my script

  jQuery(".st").each(function(){
      var s = jQuery(this).find(".st-collapse").is(":visible");
      if(s){
        jQuery(this).find(".st-heading").removeClass("wew");
      }else{
        jQuery(this).find(".st-heading").addClass("wew1");
      }
    });

Upvotes: 0

Views: 98

Answers (2)

zer00ne
zer00ne

Reputation: 43880

I'm not 100% sure (I'm probably 70% sure actually) about what your problem is, since you posted a statement and not a question. So let me know if I'm way off or close or whatever.

The classes were not provided and I assume it must be of some importance since we are dealing with visibility and two classes(probably with diametrically opposed properties involving either display,visibility, and/or opacity. So I made my own classes .off and .on.

    .st-heading.on + .st-collapse {
      opacity: 1;
    }
    .st-heading.off + .st-collapse {
      opacity: 0;
    }

The classes in question belong to .st-header so I added the + adjacent sibling selector to indicate that the visibility of .st-collapse hinges upon whether .st-heading is .off or .on. I shortened the jQuery by:

  1. ...removing .each() because with jQuery you don't need to be specific in simple cases. $('.st-heading') will find each .st-heading on the page as well...

  2. ...replacing add/removeClass() with toggleClass()

<!DOCTYPE html>
<html>

<head>
  <script data-require="[email protected]" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <style>
    .st-heading.on + .st-collapse {
      opacity: 1;
    }
    .st-heading.off + .st-collapse {
      opacity: 0;
    }
  </style>
</head>

<body>
  <section class="st">
    <div class="st-heading off">
      <a href="#">Link 1</a>
    </div>
    <div class="st-collapse">
      <ul>
        <li>
          <a href="#">Sub-Link 1</a>
        </li>
        <li>
          <a href="#">Sub-Link 2</a>
        </li>
        <li>
          <a href="#">Sub-Link 3</a>
        </li>
      </ul>
    </div>
  </section>
  <section class="st">
    <div class="st-heading on">
      <a href="#">Link 1</a>
    </div>
    <div class="st-collapse">
      <ul>
        <li>
          <a href="#">Sub-Link 1</a>
        </li>
        <li>
          <a href="#">Sub-Link 2</a>
        </li>
        <li>
          <a href="#">Sub-Link 3</a>
        </li>
      </ul>
    </div>
  </section>
  <script>
    $(".st-heading").toggleClass('on off');
  </script>
</body>

</html>

Upvotes: 1

Arjun
Arjun

Reputation: 3793

Code is working fine

check the bin at Working Demo of Code

I have did that at click event! Check!

Maybe jQuery is missing in your page

Upvotes: 0

Related Questions