CODEWITHSUNDEEP
jquery
Nicola Bertelloni
Nicola Bertelloni

Reputation: 333

jQuery .removeClass() not working

I have this situation a grid of divs with class of person-s4 with a series of div in it. 

<div class="person-s4">
  <div class="is-closed"> <!--THIS IS DISPLAY:NONE -->
    <img src="assets/img/close.svg" class="close-btn">
   </div> 
  <div class="img-person-s4">
   <img src="assets/img/people/nb.png" class="small">
   <img src="assets/img/people/#" class="big"> <!--THIS IS DISPLAY:NONE -->
  </div>
  <div class="initials-person-s4">
    <h2>BLA BLA BLA</h2>
    <p class="initial1">N</p>
    <p class="initial2">B</p>
    <h3 class="person-role">BLA BLA BLA</h3> 
    <p class="bio">#</p>
    <h4 class="link">#</h4>
  </div>

I wrote some code in order to expand them on click 

function personOpen() {
  $('.person-s4').click(function personBig() {

    $(this).addClass('is-open');

  });
}

Now, I want to remove the class is-open by clicking on the close-btn, I wrote this code but doesn't work. 

function personClose() {
   $('.close-btn').click(function personSmall() {

     $('.person-s4').removeClass('is-open');

   });
}

There is anything that prevent the .removeClass() function to work?

I'm not creating DOM elements, I am just showing them.

Upvotes: 0

Views: 129

Answers (2)

DinoMyte
DinoMyte

Reputation: 8868

It seems like the structure of your DOM is not correct. You first need to create a container div that wraps your hidden contents. Also, you don't need to add or remove class. A simple toggle would do the job.

<div class="person-s4">Click
  <div class="is-closed"> <!--THIS IS DISPLAY:NONE -->
      <img src="assets/img/close.svg" class="close-btn">X</img>    
  <div class="img-person-s4">
   <img src="assets/img/people/nb.png" class="small">
   <img src="assets/img/people/#" class="big"> <!--THIS IS DISPLAY:NONE -->
  </div>
  <div class="initials-person-s4">
    <h2>BLA BLA BLA</h2>
    <p class="initial1">N</p>
    <p class="initial2">B</p>
    <h3 class="person-role">BLA BLA BLA</h3> 
    <p class="bio">#</p>
    <h4 class="link">#</h4>
  </div>
       </div>

$('.person-s4, .close-btn').click(function () {
    $(this).find(".is-closed").toggle("is-open");
  });

http://jsfiddle.net/njzatgku/

UPDATE : To toggle only the elements with <!-- THIS IS DISPLAY:NONE --> in the question.

http://jsfiddle.net/njzatgku/2/

Upvotes: 1

Gregg Duncan
Gregg Duncan

Reputation: 2725

You don't want to add Event listeners inside a named function like that unless you really want to control when the event listeners get added. Change your code to:

$(function() {
  $('.person-s4').click(function() {

    $(this).addClass('is-open');

  });
});

and 

$(function() {
   $('.close-btn').click(function() {

     $('.person-s4').removeClass('is-open');

   });
});

This way the event listeners are added once the DOM is completely loaded. And you don't have to specifically call the functions to add the event listeners.

EDIT: Sorry I copied your original code and didn't notice you had named the click function handlers. You don't do that either.

you had

 $('.person-s4').click(function personBig(){ ... });

that won't work the function should be an anonymous function. 

$('.person-s4').click(function(){ ... });

Upvotes: 2

Related Questions