Is it possible to target the "dropdown-toggle" open status via custom code?

Design help Custom code
1

Hi folks,

is it possible to target the open dropdown toggle status and target its class and change a css definition?
I have a url check and want to change the background color of the dropdown toggle to a certain value, depending on its url.

The url grab function is working and i can manually change styles on different elements, but not the dropdown.

I inserted
$(“.sub-drop-toggle.w–open”).css(“background-color”, “#003d8f”);
But it does not change anything…

Sadly i cant provide a public share link but since its all about custom code that wouldnt help a lot…

Cheers
Daniel

2

You don’t need JavaScript for this.

Use CSS instead

.w-dropdown.w--open {
  background-color: red !important;
}

Also, feel free to contact me for further code help and/or customization of third-party plugins

3

well its more complicated. I have a “collection page template” which runs a script, that defines what element is called as a url and gives then a certain font or attribute to different elements because they need to have a different font as their corporate styling a.s.o.

But anyway …its working for
“.sub-drop-toggle” but not when i add the “w–open” class to it…it then just ignores the entry completely.

$(“.sub-drop-toggle”).css(“background-color”, “#003d8f”); = fine
$(“.sub-drop-toggle.w–open”).css(“background-color”, “#003d8f”); = not working

4

That’s because it’s the wrong way to do it.

.sub-drop-toggle.w--open DOES NOT exist when the page is loaded, so you cannot set the style on an element that isn’t selected. The correct way is to override the style using CSS.

5

so there is no way of using it on my page cause i differentiate between three different style settings…
what about if i define the style within the css as a different class and then add or remove the corresponding class after page load?

6

Without knowing what you have done, it is difficult to advise.

7

Yea, fault was that the event was not created yet. So therefore I had to listen to the click event on the element itself and then add the correspondend class to it…

  $("#sub-navi").click(function() {
    var click = $(this).data('clicks');
    if (click) {
      $(this).removeClass("bg-col-1");
      } else {
      $(this).addClass("bg-col-1");
      }      
      $(this).data('clicks', !click); 
  });
8

I m trying to style one page template that includes three different style settings with looking how the url ends, and then change the color correspondingly

1 collection page template =

www.xyz.com/client/clientA     -> gets e.g. blue bg-color
www.xyz.com/client/clientB     -> gets e.g. green bg-color
www.xyz.com/client/clientC     -> gets e.g. yellow bg-color

script looks for last ending of the url =

if variable equals “clientA” then addClass “blue” to the dropdown toggle
and so on…

9 
$("#sub-navi").click(function() {
  var click = $(this).data('clicks');
  if (click) {
    $(this).removeClass("bg-col-1");
  } else {
    $(this).addClass("bg-col-1");
  }      
  $(this).data('clicks', !click); 
});

is a convoluted way of doing this:

$("#sub-navi").click(function() {
  $(this).toggleClass("bg-col-1");
});
10

So, expanding from my CSS example above, what’s stopping you from doing this?

.w-dropdown.blue.w--open {
  background-color: blue !important;
}
.w-dropdown.green.w--open {
  background-color: green !important;
}
.w-dropdown.yellow.w--open {
  background-color: yellow !important;
}

or even this?

.w-dropdown.clientA.w--open {
  background-color: blue !important;
}
.w-dropdown.clientB.w--open {
  background-color: green !important;
}
.w-dropdown.clientC.w--open {
  background-color: yellow !important;
}
11

Yeah its working perfectly, thanks