How to I select the DIV element next to my BUTTON element

Question

I have 3 boxes, all with a 'click for more info' button. I want to write as minimal JS as possible as I am unsure how many potential boxes I will have therefore do not want to write a separate function for each.

When I click the button on the first box it displays more info for the first box. When I click the button on the second box, it displays more info on the first box...

I have tried to find a solution to select buttons 'sibling'.

 $("button").click(function() { var x = document.getElementById("moreInfo"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; }; }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section class="prices"> <div class="row"> <h2 class="prices-wp">Our Packages</h2> </div> <div class="row"> <div class="col span-1-of-3"> <div class="price-box js--wp-3"> <div> <h3>Lake District</h3> <p class="price">£350+ <span>BEST OFFER</span></p> <p class="price-description">Perfect for those who know what they want</p> <button>Click for more</button> </div> <div id="moreInfo"> <ul> <li><i class="far fa-dot-circle icon-small"></i>We do this</li> <li><i class="far fa-dot-circle icon-small"></i>We do this</li> <li><i class="far fa-dot-circle icon-small"></i>We do this</li> <li><i class="far fa-dot-circle icon-small"></i>We do this</li> <li><i class="far fa-dot-circle icon-small"></i>We do this</li> <li><a href="contactus.php" class="btn-full price-btn-full">Yes please!</a></li> </ul> </div> </div> </div> <div class="col span-1-of-3"> <div class="price-box"> <div> <h3>Wales</h3> <p class="price">£250+ <span>Discounts available via Facebook</span></p> <p class="price-description">Great for people who love sheep</p> <button>Click for more</button> </div> <div id="moreInfo"> <ul> <li><i class="far fa-dot-circle icon-small"></i>We do this</li> <li><i class="far fa-dot-circle icon-small"></i>We do this</li> <li><i class="far fa-dot-circle icon-small"></i>We do this</li> <li><i class="far fa-dot-circle icon-small"></i>We do this</li> <li><i class="far fa-dot-circle icon-small"></i>We do this</li> <li><a href="contactus.php" class="btn-ghost price-btn-ghost">Book now</a></li> </ul> </div> </div> </div> <div class="col span-1-of-3"> <div class="price-box"> <div> <h3>D of E</h3> <p class="price">£150+<span></span></p> <p class="price-description">Perfect cadets</p> <button>Click for more</button> </div> <div id="moreInfo"> <ul> <li><i class="far fa-dot-circle icon-small"></i>We do this</li> <li><i class="far fa-dot-circle icon-small"></i>We do this</li> <li><i class="far fa-dot-circle icon-small"></i>We do this</li> <li><i class="far fa-dot-circle icon-small"></i>We do this</li> <li><i class="far fa-dot-circle icon-small"></i>We do this</li> <li><a href="contactus.php" class="btn-ghost price-btn-ghost">Book now</a></li> </ul> </div> </div> </div> <div class="row more-info"> <p>For more information on each package, click <a href="#" class="packageInfo" target="_blank">here</a>.<br><br>(This could contain a document with more in-depth prices)</p> </div> </div> </section> 

I want the button to only show the related box's extra info.

Answer 1

The attribute id must be unique in a document, use class instead. You can target the specific element through parent() and next() and then toggle the class :

 $("button").click(function() { var x = $(this).parent().next(); x.toggleClass('moreInfo'); }); 

 .moreInfo{ display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section class="prices"> <div class="row"> <h2 class="prices-wp">Our Packages</h2> </div> <div class="row"> <div class="col span-1-of-3"> <div class="price-box js--wp-3"> <div> <h3>Lake District</h3> <p class="price">£350+ <span>BEST OFFER</span></p> <p class="price-description">Perfect for those who know what they want</p> <button>Click for more</button> </div> <div class="moreInfo"> <ul> <li><i class="far fa-dot-circle icon-small"></i>We do this</li> <li><i class="far fa-dot-circle icon-small"></i>We do this</li> <li><i class="far fa-dot-circle icon-small"></i>We do this</li> <li><i class="far fa-dot-circle icon-small"></i>We do this</li> <li><i class="far fa-dot-circle icon-small"></i>We do this</li> <li><a href="contactus.php" class="btn-full price-btn-full">Yes please!</a></li> </ul> </div> </div> </div> <div class="col span-1-of-3"> <div class="price-box"> <div> <h3>Wales</h3> <p class="price">£250+ <span>Discounts available via Facebook</span></p> <p class="price-description">Great for people who love sheep</p> <button>Click for more</button> </div> <div class="moreInfo"> <ul> <li><i class="far fa-dot-circle icon-small"></i>We do this</li> <li><i class="far fa-dot-circle icon-small"></i>We do this</li> <li><i class="far fa-dot-circle icon-small"></i>We do this</li> <li><i class="far fa-dot-circle icon-small"></i>We do this</li> <li><i class="far fa-dot-circle icon-small"></i>We do this</li> <li><a href="contactus.php" class="btn-ghost price-btn-ghost">Book now</a></li> </ul> </div> </div> </div> <div class="col span-1-of-3"> <div class="price-box"> <div> <h3>D of E</h3> <p class="price">£150+<span></span></p> <p class="price-description">Perfect cadets</p> <button>Click for more</button> </div> <div class="moreInfo"> <ul> <li><i class="far fa-dot-circle icon-small"></i>We do this</li> <li><i class="far fa-dot-circle icon-small"></i>We do this</li> <li><i class="far fa-dot-circle icon-small"></i>We do this</li> <li><i class="far fa-dot-circle icon-small"></i>We do this</li> <li><i class="far fa-dot-circle icon-small"></i>We do this</li> <li><a href="contactus.php" class="btn-ghost price-btn-ghost">Book now</a></li> </ul> </div> </div> </div> <div class="row more-info"> <p>For more information on each package, click <a href="#" class="packageInfo" target="_blank">here</a>.<br><br>(This could contain a document with more in-depth prices)</p> </div> </div> </section> 

Answer 2

this.parentNode.nextSibling获取moreInfo类div元素。