jQuery Transversing. It chooses another div

Question

I have a div.container div.button button and div.hidden

When I click the button I am able to highlight the div.container, but I also want to toggle the div.hidden.

However, I toggle the next div.hidden, not that one itself lol

$(function () {
    var $radioButtons = $('input[type="radio"]');
    $radioButtons.click(function () {
        $radioButtons.each(function () {
            $(this).parents().eq(3).toggleClass("checked", this.checked);
            $(this).parents().eq(3).children("div.tobehidden").toggleClass("hidden", this.checked);
        });
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="option2">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-1">
                <div class="radio">
                    <input id="radio-2" name="radio" type="radio" />
                    <label for="radio-2" class="radio-label"></label>
                </div>
            </div>
            <div class="col-md-4">
                <h3>Bamboo Stand</h3>
            </div>
            <div class="col-md-4">Pledge $25 or more</div>
            <div class="col-md-3"><span>101</span> left</div>
        </div>
        <div class="row">
            <div class="col-md-1"></div>
            <div class="col-md-11">
                <p>
                    You get an ergonomic stand made of natural bamboo. You've helped us launch our promotional campaign, and you’ll be added to a special Backer member list.
                </p>
            </div>
        </div>
        <div class="tobehidden hidden">
            <div class="row align-items-center p-4 top-border">
                <div class="col-md-8">Enter your pledge</div>
                <div class="col-md-2"><button class="white">$25</button></div>
                <div class="col-md-2"><button>Continue</button></div>
            </div>
        </div>
    </div>
</label>

<label for="option3">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-1">
                <div class="radio">
                    <input id="radio-3" name="radio" type="radio" />
                    <label for="radio-3" class="radio-label"> </label>
                </div>
            </div>
            <div class="col-md-4">
                <h3>Black Edition Stand</h3>
            </div>
            <div class="col-md-4">Pledge $75 or more</div>
            <div class="col-md-3"><span>64</span> left</div>
        </div>
        <div class="row">
            <div class="col-md-1"></div>
            <div class="col-md-11">
                <p>
                    You get a Black Special Edition computer stand and a personal thank you. You’ll be added to
                </p>
            </div>
        </div>

        <div class="tobehidden hidden">
            <div class="row align-items-center p-4 top-border">
                <div class="col-md-8">Enter your pledge</div>
                <div class="col-md-2"><button class="white">$75</button></div>
                <div class="col-md-2"><button>Continue</button></div>
            </div>
        </div>
    </div>
</label>

What I want is to click on that button and toggle the hidden class of that tobehidden div

Mohamed-Yousef · Accepted Answer · 2021-06-22T20:38:49.110

1st: You need to take a look at Is <div> inside <label> block correct?

2nd: I changed <label for="">...</label> to <div class="label">...</div>

3rd: Note: When using closest,parents,find be aware that any html tag should has a close tag <></>

$(function() {
  var $radioButtons = $('input[type="radio"]');

  $radioButtons.on('change' ,function() {
    const this_container = $(this).closest('.label').find('.container');
    const this_tobehidden = $(this).closest('.label').find("div.tobehidden");
  $('.container').not(this_container).removeClass('checked');
  this_container.addClass('checked');
  $("div.tobehidden").not(this_tobehidden).addClass('hidden');
    this_tobehidden.removeClass('hidden');
  });
});

.container.checked{
  background : #666;
}
.tobehidden.hidden{
  display : none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="label">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-md-1">
        <div class="radio">
          <input id="radio-2" name="radio" type="radio" />
          <label for="radio-2" class="radio-label"></label>
        </div>
      </div>
      <div class="col-md-4">
        <h3>Bamboo Stand</h3>
      </div>
      <div class="col-md-4">Pledge $25 or more</div>
      <div class="col-md-3"><span>101</span> left</div>
    </div>
    <div class="row">
      <div class="col-md-1"></div>
      <div class="col-md-11">
        <p>
        You get an ergonomic stand made of natural bamboo. You've helped us launch our promotional campaign, and you’ll be added to a special Backer member list.
        </p>
      </div>
     </div>
  </div>
  <div class="tobehidden hidden">
    <div class="row align-items-center p-4 top-border">
      <div class="col-md-8">Enter your pledge</div>
      <div class="col-md-2">
        <button class="white">$25</button>
      </div>
      <div class="col-md-2">
        <button>Continue</button>
      </div>
    </div>
  </div>
</div>
<div class="label">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-md-1">
        <div class="radio">
          <input id="radio-2" name="radio" type="radio" />
          <label for="radio-2" class="radio-label"></label>
        </div>
      </div>
      <div class="col-md-4">
        <h3>Bamboo Stand</h3>
      </div>
      <div class="col-md-4">Pledge $25 or more</div>
      <div class="col-md-3"><span>101</span> left</div>
    </div>
    <div class="row">
      <div class="col-md-1"></div>
      <div class="col-md-11">
        <p>
        You get an ergonomic stand made of natural bamboo. You've helped us launch our promotional campaign, and you’ll be added to a special Backer member list.
        </p>
      </div>
     </div>
  </div>
  <div class="tobehidden hidden">
    <div class="row align-items-center p-4 top-border">
      <div class="col-md-8">Enter your pledge</div>
      <div class="col-md-2">
        <button class="white">$25</button>
      </div>
      <div class="col-md-2">
        <button>Continue</button>
      </div>
    </div>
  </div>
</div>

jQuery Transversing. It chooses another div

1 Answers1