Toggle hide class only on selected div

Question

I have a UL with API generated LI's(users). Inside each user, there is a hidden container with inputs for adding tags to search by. These hidden containers are supposed to show on ONLY the selected user when you click a "+" pseudo-button.

I had it working to toggle the hide class, but it toggles on every generated class, and not the specific user I click on.

jQuery Code:

$(".fa-plus").on("click", (() =>{
    $("#tag-container, #add-tag-input, #hideGrades",() => {
        $(this).toggleClass("hidden");
    });
}));

HTML code:

<div id="hideGrades">
  <p class="card-text hidden">Grades: <%= grades %></p> 
</div>  
<div class="tag-container hidden" id="tag-container">
</div>
<div>
<input class ="hidden" type="text" value="" placeholder="Add a tag" id="add-tag-input" />
</div>

Full Div:

                    <div class="col-md-8">
                        <div class="card-body">
                            <h2 class="card-title"><%=student["firstName"] + " " + student["lastName"] %> <i class="fas fa-plus"></i></h2>
                            <div>
                                <p class="card-text">Email: <%= student["email"] %></p>
                                <p class="card-text">Company: <%= student["company"] %></p>
                                <p class="card-text">Skill: <%= student["skill"] %></p>
                                </p>
                                <div id="hideGrades">
                                    <p class="card-text hidden">Grades: <%= student["grades"] %></p>    
                                </div>
                                <div class="tag-container hidden" id="tag-container">
                                </div>
                                <div>
                                  <input class ="hidden" type="text" value="" placeholder="Add a tag" id="add-tag-input" />
                                </div>
                             </div>
                        </div>
                    </div>

Thanks!

You can NOT use `this` in an arrow function. Read more [here](https://stackoverflow.com/questions/27670401/using-jquery-this-with-es6-arrow-functions-lexical-this-binding) — Always Helping, Jul 25 '20 at 12:46
Where does your + sign appear ? in that can you add that in your HTML. — Always Helping, Jul 25 '20 at 13:00
@AlwaysHelping Thanks for the tip, I added the HTML code you requested. — , Jul 25 '20 at 13:06

score 0 · Accepted Answer · answered Jul 25 '20 at 13:21

You can amend your HTML you make it more easy and simply use jQuery functions like parent() and siblings() to show the items where you click at only and not all classes in your DOM.

Also you do not need to use arrow functions and this => in jQuery it will make things complicated.

You can simply use function to do the same thing.

Run snippet below to see working (Click on + sign so the hidden fields are displayed for each student)

$(".fa-plus").on("click", function(){
    $(this).parent().siblings('.grades_section').toggleClass("hidden");
});

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="col-md-8">
  <div class="card-body">
    <h2 class="card-title">Student 1 <i class="fa fa-plus"></i></h2>
    <div>
      <p class="card-text">Email: Email
      </p>
      <p class="card-text">Company: Company
      </p>
      <p class="card-text">Skill: Skill
      </p>
      </p>
    </div>
    <div class="grades_section hidden">
      <div id="hideGrades">
        <p class="card-text ">Grades: grades</p>
      </div>
      <div class="tag-container" id="tag-container">
        Some Data
      </div>
      <div>
        <input class="add-tag-input" type="text" value="" placeholder="Add a tag" />
      </div>
    </div>
  </div>
</div>

<div class="col-md-8">
  <div class="card-body">
    <h2 class="card-title">Student 2 <i class="fa fa-plus"></i></h2>
    <div>
      <p class="card-text">Email: Email
      </p>
      <p class="card-text">Company: Company
      </p>
      <p class="card-text">Skill: Skill
      </p>
      </p>
    </div>
    <div class="grades_section hidden">
      <div id="hideGrades">
        <p class="card-text ">Grades: grades</p>
      </div>
      <div class="tag-container" id="tag-container">
        Some Data
      </div>
      <div>
        <input class="add-tag-input" type="text" value="" placeholder="Add a tag" />
      </div>
    </div>
  </div>
</div>

Toggle hide class only on selected div

1 Answers1