CODEWITHSUNDEEP
javascriptjquery
Jafar Pinjar
Jafar Pinjar

Reputation: 168

Toggle class except on the current clicked element

I am using the toggleClass() function to add a class to remaining .members-section div elements. It's working fine but the class is being added to the currently clicked div also. How can I apply the class to elements except the clicked on in jQuery? 

$(document).ready(function($) {
  $('#as-member').click(function(e) {
    $('.members-section').toggleClass('unselected');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="members-section" id="as-member">
  <img src="img/test1.jpg" alt="">
  <span>Join as a new member</span>
</div>
<div class="members-section" id="as-student">
  <img src="img/test2.jpg" alt="">
  <span>Join as a student</span>
</div>
<div class="members-section">
  <img src="img/test3,jpg" alt="">
  <span>Upgrade my membership</span>
</div>
<div class="members-section test-members" >
  <h5>Teest...</h5>
  <ul class="member-options">
    <li><span>Discounts</span></li>
    <li><span>Institute access</span></li>
    <li><span>Library access</span></li>
    <li><span>Market events</span></li>
  </ul>
</div>

Upvotes: 1

Views: 978

Answers (3)

Mark Baijens
Mark Baijens

Reputation: 13222

You can use not(this) for that. It filters out the currently clicked element out of the jQuery selection.

$(document).ready(function($) {
  $('#as-member, #as-student').click(function(e) {
    $(this).removeClass('unselected').siblings().addClass('unselected');
  });
});
.unselected {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="members-section " id="as-member"><img src="img/test1.jpg" alt="">
  <span>Join as a new member</span>
</div>
<div class="members-section " id="as-student"><img src="img/test2.jpg" alt="">
  <span>Join as a student</span>
</div>
<div class="members-section "><img src="img/test3,jpg" alt="">
  <span>Upgrade my membership</span>
</div>
<div class="members-section">
  <h5>Teest...</h5>
  <ul class="member-options">
    <li><span>Discounts</span></li>
    <li><span>Institute access</span></li>
    <li><span>Library access</span></li>
    <li><span>Market events</span></li>
  </ul>
</div>

Upvotes: 2

Udhay Titus
Udhay Titus

Reputation: 5869

use .not($(this)) to achieve

$('.members-section').not($(this)).toggleClass('unselected');


.unselected{
background-color:#0f0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
    <div class="members-section " id="as-member">
        <img src="img/test1.jpg" alt="">
        <span>Join as a new member</span>
    </div>
    <div class="members-section " id="as-student">
        <img src="img/test2.jpg" alt="">
        <span>Join as a student</span>
    </div>
    <div class="members-section " id="as-test">
        <img src="img/test3,jpg" alt="">
        <span>Upgrade my membership</span>
    </div>
    <div class="members-section" id="as-four">
        <h5>
            Teest...</h5>
        <ul class="member-options">
            <li><span>Discounts</span></li>
            <li><span>Institute access</span></li>
            <li><span>Library access</span></li>
            <li><span>Market events</span></li>
        </ul>
    </div>
    <script>
        $(document).ready(function ($) {
            $(document).ready(function ($) {
                $('#as-member').click(function (e) {
                    if ($(this).hasClass('active-div')) {
                        $('.members-section').removeClass('unselected active-div');
                    }
                    else {
                        $('.members-section').removeClass('unselected');
                        $(this).removeClass('unselected').addClass('active-div').siblings().addClass('unselected').removeClass('active-div');
                        $('#as-four').removeClass('unselected');
                    }
                });

                $('#as-student').click(function (e) {
                    if ($(this).hasClass('active-div')) {
                        $('.members-section').removeClass('unselected active-div');
                    }
                    else {
                        $('.members-section').removeClass('unselected');
                        $(this).removeClass('unselected').addClass('active-div').siblings().addClass('unselected').removeClass('active-div');

                        $('#as-four').removeClass('unselected');
                    }
                });

                $('#as-test').click(function (e) {
                    if ($(this).hasClass('active-div')) {
                        $('.members-section').removeClass('unselected active-div');
                    }
                    else {
                        $('.members-section').removeClass('unselected');
                        $(this).removeClass('unselected').addClass('active-div').siblings().addClass('unselected').removeClass('active-div');

                        $('#as-four').removeClass('unselected');
                    }
                });
            });
        });
    </script>
</body>
</html>

Upvotes: 2

Rory McCrossan
Rory McCrossan

Reputation: 337743

To make this work you can use not() to exclude the .members-section which was clicked:

$(document).ready(function($) {
  var $sections = $('.members-section').click(function(e) {
    $sections.not(this).toggleClass('unselected');
  });
});
.members-section {
  color: #000;
}
.members-section.unselected {
  color: #CCC;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="members-section" id="as-member">
  <img src="img/test1.jpg" alt="">
  <span>Join as a new member</span>
</div>
<div class="members-section" id="as-student">
  <img src="img/test2.jpg" alt="">
  <span>Join as a student</span>
</div>
<div class="members-section">
  <img src="img/test3,jpg" alt="">
  <span>Upgrade my membership</span>
</div>
<div class="members-section">
  <h5>Teest...</h5>
  <ul class="member-options">
    <li><span>Discounts</span></li>
    <li><span>Institute access</span></li>
    <li><span>Library access</span></li>
    <li><span>Market events</span></li>
  </ul>
</div>

Also note the use of toggleClass() means the UI gets a little out of sync on successive clicks. I'd suggest amending the logic if you need that behaviour.

Upvotes: 1

Related Questions