CODEWITHSUNDEEP
javascripthtml
Brucie
Brucie

Reputation: 61

Targeting parents elements next sibling in vanilla JS

Forgive my ignorance, I'll try to be as clear as possible. I'm trying to modify an existing JS function that adds a class to a parent element. I would like to modify it to add the same class to a sibling of the parent, in this case the aside '.footnote-right-col'.

I have tried a good number of ways but this is beyond me. I'm not sure if I need to create a new function and call it separately, or if I can simply add a new variable to this function. I presume the way I would target the parent is via getParent.nextSibling

As is JS

  open: function (el) {
      this.footnote.el = getParent(el, '.footnote-container')
      var popover = this.footnote.popover()

      this.footnote.el.classList.add('is-open')
      this.sizeFootnote()

      popover.classList.remove('is-hidden')

      this.positionFootnote()
      popover.classList.add('is-visible')
      window.addEventListener("resize", self.resize.bind(self))
    },

Rendered HTML

<div class="footnote-container open-down">
   <button class="footnote-button" title="view footnote #1">...</button>
   <aside class="footnote-popover is-hidden">...</aside>
</div>
<aside class="footnote-right-col is-hidden">...</aside>

Upvotes: 2

Views: 1303

Answers (1)

ekr990011
ekr990011

Reputation: 744

this.footnote.el.nextElementSibling Should get you .footnote-right-col element if I am understanding how you set things. If this.footnote.el is the <div class="footnote-container open-down"> element then my answer works. Once you have that div you can just call the .nextElementSibling

EDIT: ok so cool if this.footnote.el is the button then simply do this: this.footnote.el.parentElement.nextElementSibling and you should have it!

So to add the class: this.footnote.el.parentElement.nextElementSibling.classList.add('is-open')

Upvotes: 1

Related Questions