CODEWITHSUNDEEP
javascriptjquery
mvasco
mvasco

Reputation: 5107

Identifying button by class

I am working on a web site to show customizable store products. There is button on every product info box like in the screenshot:

enter image description here

Every time the user clicks on the button Options, there appears information about customizable product options, like this:

enter image description here

Here you have the piece of code from the producto info box that manages the button Options:

 <div class ="oculto" id="customDiv'.$row["id"].'"  style="display:none;" class="answer_list" >
  <H3>Options</H3>
    
  </div>

And here you have the JavaScript piece of code that manages the toggle method:

 $(document).ready(function () {
    $(".customizable").click(function () {
      var product = $(this).attr("id");
      
      $(".oculto").toggle('slow', function() {
    // Animation complete.
  });
    });
  });

When the user clicks on the Options button, then the customizable options do appear in the Options div just below the Options tag, and when the user clicks on the button again, the customizable options do disappear.

My issue is that when the user clicks on product A Options button, all customizable options do appear for all products, not only for product A.

I don't know how to identify the Options button for every single product and make the toggle method active only for the clicked product Options button.

Upvotes: 1

Views: 78

Answers (1)

kiranvj
kiranvj

Reputation: 34107

By using $('.oculto') you are targetting all element in the page. You need to target only .oculto inside the product. Please try with below code.

$(this).children(".oculto").toggle('slow', function() { ... }

And I also see 2 class attributes, remove one. You can combine multiple classes seperated by space

 <div class ="oculto" id="customDiv'.$row["id"].'"  style="display:none;" class="answer_list" >

change to

 <div class ="oculto answer_list" id="customDiv'.$row["id"].'"  style="display:none;">

Upvotes: 1

Related Questions