JQuery adding class on click issue

Question

I am working on a grid of images that when clicked will show a piece of information relating to that grid. I've managed to get all of that logic working. However, I've run into an issue with styling the elements on click and hover.

When the user hovers over each div I would like to display an orange border which I have working.

    $('.testimonial-box .col-sm-3').hover(function () {
        $(this).toggleClass('testimonials-border'); //Add orange border on hover
    });

When the user clicks on the div I would like to add the orange border permanently until another div is clicked. This way they can see which one is active.

$('.testimonial-box .col-sm-3').click(function () {
    var testimonial = $(this).attr('id');
    $(this).toggleClass('testimonial-border').siblings().removeClass('testimonial-border');
    switch (testimonial) {
        case "testimonial1":
            $('.client-quote').html('Client 1 Testimonial');
            $('.client-name').html('Client 1');
            break;

I've a fiddle of what I'm trying to achieve. There are two rows. The logic works for each row but it doens't work across rows. If you select a client from the bottom row it will apply the border. If you then select a client from the top row it will not remove the border from the previous div.

https://jsfiddle.net/javacadabra/avbn0myh/

I'd appreciate any help on this, I can post the code on this as well if you'd like, however it's all containined and working as is in my fiddle above.

Many thanks

i guess you have an issue in this line ` $(this).toggleClass('testimonial-border').siblings().removeClass('testimonial-border');` i suggest trying to do a foreach on the element and removeClass then addClass on the clicked element . in that case you will be sure only the clicked element have the specified orange border class — Sora
– Sora, Commented Aug 12, 2015 at 7:54
That is a good idea @Sora, if you post answer I will gladly accept. I've implmented it in the way you said. — Javacadabra
– Javacadabra, Commented Aug 12, 2015 at 8:00

Arun P Johny · Accepted Answer · 2015-08-12 08:00:32Z

You are just removing the class from siblings that is the problem

var testimonials = {
  testimonial1: {
    name: 'Client 1',
    testimonial: 'Client 1 Testimonial'
  },
  testimonial2: {
    name: 'Client 2',
    testimonial: 'Client 2 Testimonial'
  },
  testimonial3: {
    name: 'Client 3',
    testimonial: 'Client 3 Testimonial'
  },
  testimonial4: {
    name: 'Client 4',
    testimonial: 'Client 4 Testimonial'
  },
  testimonial5: {
    name: 'Client 5',
    testimonial: 'Client 5 Testimonial'
  },
  testimonial6: {
    name: 'Client 6',
    testimonial: 'Client 6 Testimonial'
  },
  testimonial7: {
    name: 'Client 7',
    testimonial: 'Client 7 Testimonial'
  },
  testimonial8: {
    name: 'Client 8',
    testimonial: 'Client 8 Testimonial'
  }
}

$('.testimonial-box').on('mouseenter mouseleave', '.col-sm-3:not(.testimonial-border)', function(e) {
  $(this).toggleClass('testimonials-border', e.type == 'mouseenter'); //Add orange border on hover
});
$('.testimonial-box .col-sm-3').click(function() {
  $(this).addClass('testimonial-border').removeClass('testimonials-border').closest('.testimonial-box').find('.testimonial-border').not(this).removeClass('testimonial-border');

  var testimonial = testimonials[this.id] || {};

  $('.client-quote').html(testimonial.testimonial || '');
  $('.client-name').html(testimonial.name || '');
});

.helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.testimonial-border {
  border: 1px solid #f39300;
}
.testimonials-border {
  border: 1px solid #f39300;
}
.col-md-7.col-md-offset-1.testimonial-box {
  background: #fff;
  padding: 0;
  border-radius: 4px;
}
.testimonial-box .row {
  margin: 0;
}
.row.client-info {
  background: white;
  padding: 5%;
  min-height: 285px;
}
.testimonial-box h3 {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.client-info .fa-quote-left {
  float: left;
  color: #f39300;
}
.client-info .fa-quote-right {
  float: right;
  color: #f39300;
}
p.client-name {
  font-weight: 400;
}

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>

<div class="col-md-7 col-md-offset-1 testimonial-box">
  <div class="row">
    <div class="col-sm-3" id="testimonial1">
      <span class="helper"></span>
      <img src="https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png" width="80">
    </div>
    <div class="col-sm-3" id="testimonial2">
      <span class="helper"></span>
      <img src="https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png" width="80">
    </div>
    <div class="col-sm-3" id="testimonial3">
      <span class="helper"></span>
      <img src="https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png" width="80">
    </div>
    <div class="col-sm-3" id="testimonial4">
      <span class="helper"></span>
      <img src="https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png" width="80">
    </div>
  </div>
  <div class="row">
    <div class="col-sm-3" id="testimonial5">
      <span class="helper"></span>
      <img src="https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png" width="80">
    </div>
    <div class="col-sm-3" id="testimonial6">
      <span class="helper"></span>
      <img src="https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png" width="80">
    </div>
    <div class="col-sm-3" id="testimonial7">
      <span class="helper"></span>
      <img src="https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png" width="80">
    </div>
    <div class="col-sm-3" id="testimonial8">
      <span class="helper"></span>
      <img src="https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png" width="80">
    </div>
  </div>
  <div class="row client-info">
    <div class="col-md-12">
      <i class="fa fa-quote-left"></i>
      <p class="client-quote">Client 1 Testimonial</p>
      <i class="fa fa-quote-right"></i>
      <p class="client-name">Client 1</p>
    </div>
  </div>
</div>

Sora · Accepted Answer · 2015-08-12 08:04:59Z

1

you can try this code :

$('.testimonial-box .col-sm-3').click(function(){
     $('.testimonial-box .col-sm-3').each(function () {
            $(this).removeClass("testimonial-border");
        });
  $(this).addClass("testimonial-border");
});

I did not test the code but it should work fine

answered Aug 12, 2015 at 8:04

Sora

2,55319 gold badges78 silver badges151 bronze badges

Comments

wilversings · Accepted Answer · 2015-08-12 08:09:15Z

i see if you select the tag with the testimonial-border class and then just remove that class, it works...

$('.testimonial-box .col-sm-3').click(function () {
var testimonial = $(this).attr('id');
$(".testimonial-border").removeClass("testimonial-border");
$(this).toggleClass('testimonial-border');
switch (testimonial) {
    case "testimonial1":
        $('.client-quote').html('Client 1 Testimonial');
        $('.client-name').html('Client 1');
        break;
    case "testimonial2":
        $('.client-quote').html('Client 2 Testimonial');
        $('.client-name').html('Client 2');
        break;
    case "testimonial3":
        $('.client-quote').html('Client 3 Testimonial');
        $('.client-name').html('Client 3');
        break;
    case "testimonial4":
        $('.client-quote').html('Client 4 Testimonial');
        $('.client-name').html('Client 4');
        break;
    case "testimonial5":
        $('.client-quote').html('Client 5 Testimonial');
        $('.client-name').html('Client 5');
        break;
    case "testimonial6":
        $('.client-quote').html('Client 6 Testimonial');
        $('.client-name').html('Client 6');
        break;
    case "testimonial7":
        $('.client-quote').html('Client 7 Testimonial');
        $('.client-name').html('Client 7');
        break;
    case "testimonial8":
        $('.client-quote').html('Client 8 Testimonial');
        $('.client-name').html('Client 8');
        break;
}

});

Sorin C · Accepted Answer · 2015-08-12 08:12:22Z

1

Try this:

var testimonialBoxes = $('.testimonial-box .col-sm-3');
var lastSelected = $( testimonialBoxes[0] );  // initialize with first element

testimonialBoxes.click(function () {

    var testimonial = $(this).attr('id');
    var $this = $( this );

    lastSelected.removeClass('testimonial-border');
    $this.addClass('testimonial-border');
    lastSelected = $this;

    .....................

edited Aug 12, 2015 at 8:12

answered Aug 12, 2015 at 8:03

Sorin C

99410 silver badges8 bronze badges

Comments

ImHigh · Accepted Answer · 2015-08-12 08:20:00Z

$('.testimonial-box .col-sm-3').click(function () {
$('.testimonial-box .col-sm-3').removeClass('testimonial-border');
var testimonial = $(this).attr('id');
$(this).toggleClass('testimonial-border');

switch (testimonial) {.....

Change .click() function and add the above code and it works..

$('.testimonial-box .col-sm-3').hover(function () {
    $(this).toggleClass('testimonials-border'); //Add orange border on hover
});
$('.testimonial-box .col-sm-3').click(function () {
    $('.testimonial-box .col-sm-3').removeClass('testimonial-border'); //added
    var testimonial = $(this).attr('id');
    $(this).toggleClass('testimonial-border'); //changed
    switch (testimonial) {
        case "testimonial1":
            $('.client-quote').html('Client 1 Testimonial');
            $('.client-name').html('Client 1');
            break;
        case "testimonial2":
            $('.client-quote').html('Client 2 Testimonial');
            $('.client-name').html('Client 2');
            break;
        case "testimonial3":
            $('.client-quote').html('Client 3 Testimonial');
            $('.client-name').html('Client 3');
            break;
        case "testimonial4":
            $('.client-quote').html('Client 4 Testimonial');
            $('.client-name').html('Client 4');
            break;
        case "testimonial5":
            $('.client-quote').html('Client 5 Testimonial');
            $('.client-name').html('Client 5');
            break;
        case "testimonial6":
            $('.client-quote').html('Client 6 Testimonial');
            $('.client-name').html('Client 6');
            break;
        case "testimonial7":
            $('.client-quote').html('Client 7 Testimonial');
            $('.client-name').html('Client 7');
            break;
        case "testimonial8":
            $('.client-quote').html('Client 8 Testimonial');
            $('.client-name').html('Client 8');
            break;
    }
});

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.testimonial-border {
    border:1px solid #f39300;
}
.testimonials-border {
    border:1px solid #f39300;
}
.col-md-7.col-md-offset-1.testimonial-box {
    background: #fff;
    padding: 0;
    border-radius: 4px;
}
.testimonial-box .row {
    margin: 0;
}
.row.client-info {
    background: white;
    padding: 5%;
    min-height:285px;
}
.testimonial-box h3 {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.client-info .fa-quote-left {
    float:left;
    color: #f39300;
}
.client-info .fa-quote-right {
    float:right;
    color: #f39300;
}
p.client-name {
    font-weight: 400;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="col-md-7 col-md-offset-1 testimonial-box">
    <div class="row">
        <div class="col-sm-3" id="testimonial1"> <span class="helper"></span>

            <img src="https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png" width="80">
        </div>
        <div class="col-sm-3" id="testimonial2"> <span class="helper"></span>

            <img src="https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png" width="80">
        </div>
        <div class="col-sm-3" id="testimonial3"> <span class="helper"></span>

            <img src="https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png" width="80">
        </div>
        <div class="col-sm-3" id="testimonial4"> <span class="helper"></span>

            <img src="https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png" width="80">
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3" id="testimonial5"> <span class="helper"></span>

            <img src="https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png" width="80">
        </div>
        <div class="col-sm-3" id="testimonial6"> <span class="helper"></span>

            <img src="https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png" width="80">
        </div>
        <div class="col-sm-3" id="testimonial7"> <span class="helper"></span>

            <img src="https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png" width="80">
        </div>
        <div class="col-sm-3" id="testimonial8"> <span class="helper"></span>

            <img src="https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png" width="80">
        </div>
    </div>
    <div class="row client-info">
        <div class="col-md-12"> <i class="fa fa-quote-left"></i>

            <p class="client-quote">Client 1 Testimonial</p> <i class="fa fa-quote-right"></i>

            <p class="client-name">Client 1</p>
        </div>
    </div>
</div>

Collectives™ on Stack Overflow

JQuery adding class on click issue

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related