how to toggle css attribute with stimulus js

Question

i am having issues targeting css attribute with stimulus.js

i want to toggle display flex to none and flex when i click the icon

display:flex 

#css

.dropnav{
  display:flex
}

#hide_controller

......
static targets = [ "hide" ]
static classes =["display"]
        
connect() {
this.hideTarget.classList.add(this.displayClass)}
toggle(){
 this.hideTarget.classList.toggle(this.displayClass)}
.....

#html

 ....
  <li class="nav_items" data-controller="toggle" > 
      <a href=""  data-action="toggle#toggle" ><i class="far fa-user-circle fa-2x "></i></a>
                            
          <div class="dropnav" data-toggle-display-class="display" data-toggle-target="hide">
                 <a href="" class="drop_down_items" ></a>
                  <a href="" class="drop_down_items">Links</a>
                    .......  

error message

Error: Missing attribute "data-toggle-display-class"

where do i add the class? thanks

Answer 1

data-toggle-display-class="display" should go on same element where the controller is defined. So in your case:

<li class="nav_items"
    data-controller="toggle"
    data-toggle-display-class="display"> 
  <a href="" data-action="toggle#toggle" >
    <i class="far fa-user-circle fa-2x "></i>
  </a>                 
  <div class="dropnav" data-toggle-target="hide">
    <a href="" class="drop_down_items" ></a>
    <a href="" class="drop_down_items">Links</a>
  </div>
</div>

And then in your css you hide or show element like:

.nav_items {
  .dropnav {
    display: none;
  }
  &.display {
    .dropnav {
      display: flex;
    }
  }
}