CODEWITHSUNDEEP
javascriptjquery
AnonUser
AnonUser

Reputation: 19

toggleClass activating but not deactivating

My toggleClass() method activates when I click on a .personId, but it does not deactivate when I click on it again OR on a different .personId. What I am trying to do here is have the names of people, and when clicked on it shows their last name, DOB, etc. and then when clicked on again it disappears. Right now when I click on a name the information appears, but it does not disappear when clicked on again, or when a different personId is clicked on. 

$(document).ready(function() {
    $(".personId").on("click", function () {
        var x = $(this).text();
        $("." + x).toggleClass($(this).text());
    });
});

<table class="personIdTable">
    <tr><td class="personId">Bob</td></tr>
    <tr><td class="personId">Bill</td></tr>
    <tr><td class="personId">Tom</td></tr>
    <tr><td class="personId">Jimmy</td></tr>
</table>
<h1 class="Bob"> BOB SMITH 04/12/1962 </h1>
<h1 class="Bill"> BILL SMITH 04/12/1962 </h1>
<h1 class="Tom"> TOM SMITH 04/12/1962 </h1>
<h1 class="Jimmy"> JIMMY SMITH 04/12/1962 </h1>

.Bob {
    display: none;
}

.Bill {
    display: none;
}

.Tom {
    display: none;
}

.Jimmy {
    display: none;
}

Upvotes: 0

Views: 56

Answers (4)

Angelos Chalaris
Angelos Chalaris

Reputation: 6747

You can use the following snippet:

$(document).ready(function() {
		var selectedPerson = null;  // Stores the last selected person.
        $(".personId").on("click", function () {
        var x = $(this).text();  // Get the name.
        // If no previous selected, do not change classes and ids.
        if(selectedPerson != null){
        // Otherwise do.
          $("#selectedPerson").toggleClass(selectedPerson).removeAttr("id");
        }
        // If same selected twice, just hide.
	 	if(selectedPerson == x){
			selectedPerson = null;
			return;
		}
        // Otherwise show the proper header and store the selection.
        $("." + x).toggleClass(x).attr("id","selectedPerson");
		selectedPerson = x;
    });	
});
.Bob {
    display: none;
}

.Bill {
    display: none;
}

.Tom {
    display: none;
}

.Jimmy {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="personIdTable">
    <tr><td class="personId">Bob</td></tr>
    <tr><td class="personId">Bill</td></tr>
    <tr><td class="personId">Tom</td></tr>
    <tr><td class="personId">Jimmy</td></tr>
</table>
<h1 class="Bob"> BOB SMITH 04/12/1962 </h1>
<h1 class="Bill"> BILL SMITH 04/12/1962 </h1>
<h1 class="Tom"> TOM SMITH 04/12/1962 </h1>
<h1 class="Jimmy"> JIMMY SMITH 04/12/1962 </h1>

What this does is it stores the last selected person, gives it a proper id and makes it so that when you click a new person, the previous one will lose their id and get back their class and the new one will get the proper id and lose the class.

EDIT: By adding a condition in the jQuery function, I made it so that when you click the same name twice, it will hide all names.

Upvotes: 0

Derek Story
Derek Story

Reputation: 9583

I would recommend doing this slightly different:

Codepen

HTML (and remove the period from the class names in the html)

<table class="personIdTable">
    <tr><td class="personId">Bob</td></tr>
    <tr><td class="personId">Bill</td></tr>
    <tr><td class="personId">Tom</td></tr>
    <tr><td class="personId">Jimmy</td></tr>
</table>
<h1 class="Bob"> BOB SMITH 04/12/1962 </h1>
<h1 class="Bill"> BILL SMITH 04/12/1962 </h1>
<h1 class="Tom"> TOM SMITH 04/12/1962 </h1>
<h1 class="Jimmy"> JIMMY SMITH 04/12/1962 </h1>

CSS:

Note: You should probably not use h1 tags if you are looking for valid html as there should only be a single h1 per section.

h1 {
  display: none;
}
.is-displayed {
  display: block;
}

Jquery

$(".personId").on("click", function() {
  var x = "." + $(this).text();
  $('h1').not(x).removeClass('is-displayed');
  $(x).toggleClass('is-displayed');
});

Upvotes: 1

Arathi Sreekumar
Arathi Sreekumar

Reputation: 2574

Issue: You doing this $("." + x).toggleClass($(this).text()); results in the class you are toggling being removed, and hence no longer to be found for toggling, eg: If you toggle '.Bill', 'Bill' class is removed from the element. Next time there is no Bill class to be found to add back the bill class (paradox?).

So instead of doing this:

.Bob {
    display: none;
}

.Bill {
    display: none;
}

.Tom {
    display: none;
}

.Jimmy {
    display: none;
}

You keep one class:

.hide {
  display: none;
}

Update your HTML:

<table class="personIdTable">
    <tr><td class="personId">Bob</td></tr>
    <tr><td class="personId">Bill</td></tr>
    <tr><td class="personId">Tom</td></tr>
    <tr><td class="personId">Jimmy</td></tr>
</table>
<h1 class="Bob hide"> BOB SMITH 04/12/1962 </h1>
<h1 class="Bill hide"> BILL SMITH 04/12/1962 </h1>
<h1 class="Tom hide"> TOM SMITH 04/12/1962 </h1>
<h1 class="Jimmy hide"> JIMMY SMITH 04/12/1962 </h1>

Note that I removed '.' from .Bob in the class name, because you don't need it in the html.

Update your js to do:

$(document).ready(function() {
    $(".personId").on("click", function () {
        var x = $(this).text();
        $("." + x).toggleClass('hide');
    });
});

Upvotes: 1

Shweta Matkar
Shweta Matkar

Reputation: 301

Instead of using 

$("." + x).toggleClass($(this).text());

use 

$(this).toggleClass($(this).text());

Upvotes: -1

Related Questions