CODEWITHSUNDEEP
javascript
Sybrentjuh
Sybrentjuh

Reputation: 287

Select parent element, THEN select next sibling

I am trying to make a button that selects the parent element, THEN selects the next sibling of this parent element and apply a style to it. All without ID's, so that I can iterate it unlimited.

My HTML:

<div>
  <h4>Vraag 1</h4>
    <div class="form-group row">
      <label class="col-sm-12 col-form-label">Wat is het hoofdingrediënt van het Texelse recept?</label>
      <div class="col-md-9 col-sm-12">
        <input type="text" class="form-control" placeholder="Vul hier uw antwoord in">
      </div>
    </div>

  <div class="form-group row col-sm-12">
    <button onclick="myFunction()">Volgende vraag</button>
  </div>
</div>

<div style="display: none;">
  <h4>Vraag 1</h4>
    <div class="form-group row">
      <label class="col-sm-12 col-form-label">Wat is het hoofdingrediënt van het Texelse recept?</label>
      <div class="col-md-9 col-sm-12">
        <input type="text" class="form-control" placeholder="Vul hier uw antwoord in">
      </div>
    </div>

    <div class="form-group row col-sm-12" style="display: none;">
      <button onclick="myFunction()">Volgende vraag</button>
    </div>

 </div>

As you can see I am creating multiple div parent containers, with a button in it which performs myFunction() onclick. So without using an ID i want to select the parent div, THEN the next sibling and change display: none; to display: block;.

My JS so far:

<script type="text/javascript">
   function myFunction(this) {
     var x = parentElement;
     x.nextSibling.style.display = "block";
   }
</script>

Is this possible with JS?

Upvotes: 1

Views: 548

Answers (1)

Mamun
Mamun

Reputation: 68933

At first you should pass this to the function so that you can refer that inside the function. Then you have to find the grand parent of the current element. Also, as nextSibling returns any kind of node, you should use nextElementSibling as this always return an element:

function myFunction(el) {
  var x = el.parentElement.parentElement;
  x.nextElementSibling.style.display = "block";
}
<div>
  <h4>Vraag 1</h4>
  <div class="form-group row">
    <label class="col-sm-12 col-form-label">Wat is het hoofdingrediënt van het Texelse recept?</label>
    <div class="col-md-9 col-sm-12">
      <input type="text" class="form-control" placeholder="Vul hier uw antwoord in">
    </div>
  </div>

  <div class="form-group row col-sm-12">
    <button onclick="myFunction(this)">Volgende vraag</button>
  </div>
</div>

<div style="display: none;">
  <h4>Vraag 1</h4>
  <div class="form-group row">
    <label class="col-sm-12 col-form-label">Wat is het hoofdingrediënt van het Texelse recept?</label>
    <div class="col-md-9 col-sm-12">
      <input type="text" class="form-control" placeholder="Vul hier uw antwoord in">
    </div>
  </div>

  <div class="form-group row col-sm-12" style="display: none;"> 
    <button onclick="myFunction()">Volgende vraag</button>
  </div>
</div>

Upvotes: 2

Related Questions