How can I add current class to a clicked element and removing it when clicking on another element?

Question

I am not very good at JavaScript and most of the time I use other people's work. I want to know how I can add a current class to the following code so that I can make changes to selected element. Thanks

 function showonlyone(thechosenone) { $('.newboxes').each(function(index) { if ($(this).attr("id") == thechosenone) { $(this).show(200); } else { $(this).hide(600); } }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="javascript:showonlyone(&#39;link1&#39;);"> <div> <p>link1</p> </div> </a> <div class="newboxes" id="link1" style="display: none"> <p>Content1</p> </div> <a href="javascript:showonlyone(&#39;link2&#39;);"> <div> <p>link2</p> </div> </a> <div class="newboxes" id="link2" style="display: none"> <p>Content2</p> </div> 

Answer 1

You can use

$(this).addClass('current-class');

and remove with

$(this).removeClass('current-class');

 function showonlyone(thechosenone) { $('.newboxes').each(function(index) { if ($(this).attr("id") == thechosenone) { $(this).show(200); } else { $(this).hide(600); } }); $('.link').each(function(index) { if ($(this).text() == thechosenone) { $(this).addClass('current'); } else { $(this).removeClass('current'); } }); } 

 .current { display: inline-block; padding: 5px 10px; border: 1px solid black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="javascript:showonlyone(&#39;link1&#39;);"><div><p class='link'>link1</p></div> </a> <div class="newboxes" id="link1" style="display: none"> <p>Content1</p> </div> <a href="javascript:showonlyone(&#39;link2&#39;);"><div><p class='link'>link2</p></div> </a> <div class="newboxes" id="link2" style="display: none"> <p>Content2</p> </div> 

Answer 2

You can use addClass and removeClass as below:

function showonlyone(thechosenone) {
     $('.newboxes').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(200);
               $(this).addClass("current");
          }
          else {
               $(this).hide(600);
               $(this).removeClass("current");
          }
     });
}

Answer 3

As per your Q - clicked element and removing it when clicking on another element?

you will have to use $('yourEl').removeClass('ClassRemove'); first then $(this).addClass('ClassRemove'); , so that all the class which name yourEl will be removed the class ClassRemove and only the element you click will be added with the Class ClassRemove

But as you have an if condition for that so there is no need to use $('yourEl').removeClass('ClassRemove') . I have updated the code as per your comment.

 function showonlyone(thechosenone) { $('.newboxes').each(function(index) { if ($(this).attr("id") == thechosenone) { $(this).show(200); $(this).prev('a').addClass('current'); } else { $(this).hide(600); $(this).prev('a').removeClass('current'); } }); } 

 ap{ margin:0; padding:0; } .current{ border:1px #000 solid; display:block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="javascript:showonlyone(&#39;link1&#39;);"><div><p>link1</p></div> </a> <div class="newboxes" id="link1" style="display: none"> <p>Content1</p> </div> <a href="javascript:showonlyone(&#39;link2&#39;);"><div><p>link2</p></div> </a> <div class="newboxes" id="link2" style="display: none"> <p>Content2</p> </div> 

Answer 4

I've reorganized your code a bit to make it easier to use jQuery selectors to do what you want.

Version 1: Highlight link

 function highlightLink(event) { event.preventDefault(); var $otherParents = $(this) .parent() .siblings(".newbox_parent"); $otherParents.children(".newboxes").hide(600); $otherParents.children("a").removeClass("current"); $(this).siblings(".newboxes").show(200); $(this).children("p").addClass("current"); } $(".newbox_parent > a").click(highlightLink); 

 .current { border: 1px solid green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="newbox_parent"> <a href="#"> <p>link1</p> </a> <div class="newboxes" style="display: none"> <p>Content1</p> </div> </div> <div class="newbox_parent"> <a href="#"> <p>link2</p> </a> <div class="newboxes" style="display: none"> <p>Content2</p> </div> </div> 

Version 2: Highlight container

 function highlightLink(event) { event.preventDefault(); var $parent = $(this) .parent() .addClass("current") .siblings(".newbox_parent") .removeClass("current") .children(".newboxes") .hide(600); $(this).siblings(".newboxes").show(200); } $(".newbox_parent > a").click(highlightLink); 

 .current { border: 1px solid green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="newbox_parent"> <a href="#"> <p>link1</p> </a> <div class="newboxes" style="display: none"> <p>Content1</p> </div> </div> <div class="newbox_parent"> <a href="#"> <p>link2</p> </a> <div class="newboxes" style="display: none"> <p>Content2</p> </div> </div>