getElementsByClassName onclick with toggle does not work

Question

getElementsByClassName does not work. Here is my code.

$(document).ready(function() {
  $('.parent<?php echo $product['product_id']; ?>').on("click",function(){
 
       if( document.getElementsByClassName('sub-nav').style.display == 'block' )
       document.getElementsByClassName('sub-nav').style.display = "none";

       $(haid<?php echo $product['product_id']; ?>).toggle();
       $(haid<?php echo $product['product_id']; ?>).siblings().find(".sub-nav").hide();
      });
});

I have separate buttons with unique generated ID and I want to search them by class. What I am trying to do is when button A is clicked the button B to hide. The toggle does not function because it cannot find the unique ID for the other button.

if getElementsByClassName finds that there is display:block just to replace it with display:none; and go on with the opening of the clicked button.

Is `haid` a variable? Just wondering, because you don't have quotes in your selectors: `$(haid)`. Also, why mix vanilla JS and JQuery? I feel you'd be better off using a JQuery class selector, rather than `getElementsByClassName`. — Tyler Roper, Oct 22 '16 at 22:03
If haid is an ID, then you must select it by doing `$("#haid")` - notice the `#` and the quotes. — Tyler Roper, Oct 22 '16 at 22:06
@Santi the haid function is working. It is to toggle the div to show. the getElementsByClassName does not — Toni Velkoff, Oct 22 '16 at 22:09
Why are you mixing javascript and Jquery? Instead getElementsByClassName use $(".name").css("property","value"); or whatever — ii7scw, Oct 22 '16 at 22:09
@Cgdl tried but still does not work `if($(".sub-nav").css("display","block")) $(".sub-nav").css("display","none");` — Toni Velkoff, Oct 22 '16 at 22:20
I'm just saying that you should be consistent in your code with either Jquery or Javascript beacuse mixing it causes you reading troubles — ii7scw, Oct 22 '16 at 22:26

score 0 · Answer 1 · answered Oct 22 '16 at 22:37

0

i did it. Thank you guys!

 if($(".sub-nav").css("display","block")) {
  $(".sub-nav").css("display","none");
  } else {
  $(".sub-nav").css("display","block");}

answered Oct 22 '16 at 22:37

Toni Velkoff

11
1

getElementsByClassName onclick with toggle does not work

1 Answers1