JQuery - Toggle Elements based on data attribute with the same class

Question

EDIT: It seems like JQuery is hiding all elements on my page below the reviews after the toggling button is clicked. Any ideas to why this might be?

On my page, I have a bunch of buttons which correspond to an instructor. And I have reviews, which contain an instructor. By default, all reviews are shown. When one of the buttons is clicked, I want to show only the reviews for that instructor. And when it is clicked off, I want to show all the reviews again, or if another instructor button was pressed, I want to show the reviews for that.

HTML for Instructor Buttons

  <button class="ui basic small button instructor-button" id="Instructor A">
    Instructor A
  </button>

  <button class="ui basic small button instructor-button" id="Instructor B">
    Instructor B
  </button>

HTML for Reviews

<div class="reviews">
   <div class="review" data-instructor="Instructor A">
    // elements for review
   </div>
      <div class="review" data-instructor="Instructor B">
    // elements for review
   </div>
</div>

This is the JQuery that I've attempted

$('.instructor-button').click(function() {
      var instructor = this.id;
      $('.review[data-instructor!="' + instructor + '"]').toggle()
    });

This works but only when the first review is the one I selected, otherwise it hides all the reviews. Any idea on how to go about doing this?

The issue seems to be the use of space within the id. The id cannot contain a space. Try to replace the space with an underscore. Please see the answer here: https://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html. — Eisenheim, Sep 18 '19 at 19:42

score 2 · Answer 1 · answered Sep 18 '19 at 19:46

You can hide one and show the other on the same click

    $('.instructor-button').click(function() {
       var instructor = this.id;
       $('.review[data-instructor!="' + instructor + '"]').hide();
       $('.review[data-instructor="' + instructor + '"]').show();
    });

epascarello · Answer 2 · 2019-09-18T19:59:37.133

Hide them all and show the one that was picked

$('.instructor-button').click(function() {

  // check if button is active
  var button = $(this).toggleClass("active");
  var isActive = button.is(".active")

  //remove any other button that may have been active
  $('.instructor-button').not(button).removeClass("active")
  
  // get what was clicked
  var instructor = button.data("toggles")
  
  // get all the reviews
  var reviews = $('.review[data-instructor]')
  // get the reviews that were clicked
  var current = reviews.filter('[data-instructor="' + instructor + '"]')

  // show hide all the reviews based on active state
  reviews.toggle(!isActive)
  // if active show those items
  if (isActive) {
    current.show()
  }
 
});

.instructor-button.active {
  background-color: lime
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="ui basic small button instructor-button" data-toggles="Instructor A">
    Instructor A
  </button>

<button class="ui basic small button instructor-button" data-toggles="Instructor B">
    Instructor B
  </button>

<div class="reviews">
  <div class="review" data-instructor="Instructor A">
    // elements for review A
  </div>
  <div class="review" data-instructor="Instructor B">
    // elements for review B
  </div>
</div>

This once again, only works if the instructor I choose is the first one. — express_v2, Sep 18 '19 at 19:34

score 0 · Answer 3 · answered Sep 18 '19 at 19:42

0

Hide them all and show review with the right id.

$('.instructor-button').click(function() {
    var instructor = this.id;
    $('.review').hide()
    $('.review[data-instructor="' + instructor + '"]').show()
  });

answered Sep 18 '19 at 19:42

Johnny Da Costa

373
2
14

Unfortunately this only works when the instructor selected is the one in the first review, otherwise, it is hiding them all. – express_v2 Sep 18 '19 at 19:43
You need to change the buttons id `id="Instructor_A` to `id="Instructor A"` the same with B – Johnny Da Costa Sep 18 '19 at 19:57

score 0 · Answer 4 · answered Sep 18 '19 at 19:45

What you have missed is to re-enable an instructors review when changing buttons. The final code will be:

var lastInstructor = undefined
$('.instructor-button').click(function() {
    var instructor = this.id;
    $('.review[data-instructor!="' + instructor + '"]').toggle()

    if(lastInstructor != instructor)
      $('.review[data-instructor="' + instructor + '"]').show()
    lastInstructor = instructor
});

score 0 · Answer 5 · answered Sep 18 '19 at 19:46

Have you tried to use Bootstrap for your project? It seems that what you want to use is the "accordion" effect. Check it out! It expands when you click on it and contracts when you click on it again.

.accordion-card{
 box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.5);
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 8px;
  border-top: 1px solid $gray-light;
  border-left: 3px solid $gray-light;
  border-right: 1px solid $gray-light;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<div class="accordion-card" 
     data-toggle="collapse" 
     href="#collapseText">                
  <span class="toggle-icon down"></span>
  Instructor A [more...]
  <div id="collapseText" class="panel-collapse collapse in">
    Everything about the instructor A goes here.
    Bla Bla bla bla bla
    Bla Bla bla bla bla
    Bla Bla bla bla bla
    Bla Bla bla bla bla
    Bla Bla bla bla bla
    Bla Bla bla bla bla
  </div>
</div>

Thanks for the suggestion, but I'm actually using Semantic UI for this project so that unfortunately won't work. — express_v2, Sep 18 '19 at 20:00

score 0 · Answer 6 · answered Sep 18 '19 at 19:49

Use this: Check: Codepan

$('.instructor-button').click(function() {
  var instructor = this.id;
  if($('.review[data-instructor!="' + instructor + '"]').is(":hidden")) {
    $('.review').show();
  } else{
    $('.review').hide();
    $('.review[data-instructor="' + instructor + '"]').toggle();
  }
});

JQuery - Toggle Elements based on data attribute with the same class

6 Answers6