Add and remove classes jQuery

Question

Im showing a preview for a news post, and when the user clicks on read more (or the whole div, actually) it should open in a full-screen manner. Which it does. But when I try to close it, it doesnt work. Its like it doesnt want to remove the class again.

TL;DR: The on click event for the second function does not execute.

Here's my code:

 /* NEWS */ $('.news-entry').on('click', function() { $(this).addClass('open'); $(this).find('.close-btn').addClass('display-close-btn'); $(this).find('.news-all-text').addClass('display-all-text'); $(this).find('.news-text').removeClass('news-read-more'); $('html, body').animate({ scrollTop: $(this).find(".scrollTo").offset().top - 20 }, 600); }); /* NEWS CLOSE BTN */ $('.close-btn').on('click', function() { $('.news-entry').removeClass('open'); $('.close-btn').removeClass('display-close-btn'); $('.news-full-text').removeClass('display-full-text'); $('.news-text').addClass('news-read-more-btn'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="section-news"> <div class="news-entry"> <div class="news-image"> <div class="entry-number">25</div> <div class="horizontal-hr"></div> <img src="img/news/2.png" /> <div class="close-btn"> <button class="circle scaleUp" data-animation="scaleDown" data-remove="3000"></button> </div> </div> <div class="news-text scrollTo"> <p class="news-small-title">Doers - News</p> <h2 class="news-title">Doers is Looking For a New Junior Designer</h2> <hr class="news-hr"></hr> <p class="news-teaser-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p> <p class="news-all-text"> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. <br />Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p> <p class="news-read-more">Read More</p> </div> </div> <div class="news-entry"> <div class="news-image"> <div class="entry-number">24</div> <div class="horizontal-hr"></div> <img src="img/news/1.png" /> <div class="close-btn"> <button class="circle scaleUp" data-animation="scaleDown" data-remove="3000"></button> </div> </div> <div class="news-text scrollTo"> <p class="news-small-title">Doers - News</p> <h2 class="news-title">Say 'Hi' to Our New Intern</h2> <hr class="news-hr"></hr> <p class="news-teaser-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p> <p class="news-all-text"> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. <br />Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. <br />Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. </p> <p class="news-read-more">Read More</p> </div> </div> <div class="news-entry"> <div class="news-image"> <div class="entry-number">23</div> <div class="horizontal-hr"></div> <img src="img/news/3.png" /> <div class="close-btn"> <button class="circle scaleUp" data-animation="scaleDown" data-remove="3000"></button> </div> </div> <div class="news-text scrollTo"> <p class="news-small-title">Doers - News</p> <h2 class="news-title">Winter Holiday - What's Your Top Wish?</h2> <hr class="news-hr"></hr> <p class="news-teaser-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p> <p class="news-all-text"> At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis. <p class="news-read-more">Read More</p> </div> </div> </div> <!-- END JOURNAL ENTRIES --> 

When I inspect it, I can see that something happens to .news-entry (it blinks?).

What could be wrong?

Answer 1

Your Problem: .close-btn is in .news-entry . So when you click in close button, after calling close button click function it will also call new entry click function. Solution: move .close-btn outside of .news-entry or use return false in close button click function.

You can try this DEMO LINK HERE .Update the script...

/* NEWS CLOSE BTN */
$('.close-btn').on('click', function() {   
  $('.news-entry').removeClass('open');
  $('.close-btn').removeClass('display-close-btn');
  $('.news-full-text').removeClass('display-full-text');
  $('.news-text').addClass('news-read-more-btn');
  return false; // add this line.
});

Answer 2

With that little info I can't help you, consider making an small jsfiddle with your code to find the issue.

But here are some steps to debug it:

• Check for errors on the console: you could have syntax errors and the output from the console will show that.
• Confirm the close button click event is triggering: Add a console.log to the function and see if it is actually triggering. If it is not triggering review the class selector and the markup, to make sure the click is not happening on another element on top of the button.
• Manually remove the classes from you elements(using the inspector tools in your browser) to see if that provides you the expected result. There's a chance the code is executing and the classes are removed/added but the result is not the expected.

Basically get familiar with the debugging tools for web, specially the console .

Answer 3

<div id="section-news">
                 <!--add id-->
                 <div class="news-entry" id="news-entry_1">

                        <div class="news-image">
                            <div class="entry-number">25</div>
                            <div class="horizontal-hr"></div>
                            <img src="img/news/2.png" />

                            <div class="close-btn" id="close-btn_1"><button  class="circle scaleUp" data-animation="scaleDown" data-remove="3000"></button>
                            </div>

                        </div>
                 <!--add id-->
                        <div class="news-text scrollTo" id="news-text_1">
                            <p class="news-small-title">Doers - News</p>
                            <h2 class="news-title">Doers is Looking For a New Junior Designer</h2>
                            <hr class="news-hr"></hr>
                            <p class="news-teaser-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>

                            <p class="news-all-text">
                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

                            <br />

                            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
                            </p>
                            <p class="news-read-more">Read More</p>
                        </div>

                </div>
                     <!--add id-->
                <div class="news-entry" id="news-entry_2">

                        <div class="news-image">
                            <div class="entry-number">24</div>
                            <div class="horizontal-hr"></div>
                            <img src="img/news/1.png" />

                            <div class="close-btn" id="close-btn_2"><button  class="circle scaleUp" data-animation="scaleDown" data-remove="3000"></button>
                            </div>

                        </div>
                        <div class="news-text scrollTo" id="news-text_2">
                            <p class="news-small-title">Doers - News</p>
                            <h2 class="news-title">Say ‘Hi’ to Our New Intern</h2>
                            <hr class="news-hr"></hr>
                            <p class="news-teaser-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>

                            <p class="news-all-text">
                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

                            <br />

                            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

                            <br />

                            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
                            </p>
                            <p class="news-read-more">Read More</p>
                        </div>

                </div>

                <div class="news-entry" id="news-entry_3">

                        <div class="news-image">
                            <div class="entry-number">23</div>
                            <div class="horizontal-hr"></div>
                            <img src="img/news/3.png" />

                            <div class="close-btn" id="close-btn_3"><button  class="circle scaleUp" data-animation="scaleDown" data-remove="3000"></button>
                            </div>

                        </div>
                        <div class="news-text scrollTo" id="news-text_3">
                            <p class="news-small-title">Doers - News</p>
                            <h2 class="news-title">Winter Holiday - What's Your Top Wish?</h2>
                            <hr class="news-hr"></hr>
                            <p class="news-teaser-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>

                            <p class="news-all-text">
                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis.
                            <p class="news-read-more">Read More</p>
                        </div>

                </div>

            </div>



<script>
    $('.close-btn').on('click', function() {
      //get id for the close button
      var index=$(this).attr("id");
      var idIndex=index.split("_")
     //remove class using id
      $('#news-entry_'+idIndex[1]).removeClass('open'); //check if id is getting fetched prperly
      $('#close-btn_'+idIndex[1]).removeClass('display-close-btn');
      $('#news-full-text_'+idIndex[1]).removeClass('display-full-text');
      $('#news-text_'+idIndex[1]).addClass('news-read-more-btn');
    });
</script>