Show/Hide Unique Divs

Question

I have 3 main divs (exactly same format). What I am looking to do is have the 'ratingclick' button display the DIV box below it's respective div.

e.g. Ratings button 1 opens the unique Div below it.

HTML:

  <div class="feature">1 
  <div class="ratingclick"><a onclick="RatingsBox()">Ratings</a></div>
 <div class="ratingsboxDIV"> This is Div 1 </div></div>
 ----------  
 <div class="feature">2 
  <div class="ratingclick"><a onclick="RatingsBox()">Ratings</a></div>
<div class="ratingsboxDIV"> This is Div 2 </div></div>
  ---------
<div class="feature">3
<div class="ratingclick"><a onclick="RatingsBox()">Ratings</a></div>
    <div class="ratingsboxDIV"> This is Div 3 </div></div>

Javascript:

function RatingsBox() {
var x = document.getElementById("ratingsboxDIV");
x.style.display === "none";

 if (x.style.display === "block") {
       x.style.display = "none";
   } else {
      x.style.display = "block";
    }
}

#ratingsboxDIV {
display:none;
min-height:300px;
background-color:white;
padding: 10px;
width: 80%;
margin: auto;
margin-top: 0px;
max-width: 800px;
 }

Answer 1

This is a solution using jquery. It will find the next sibling that has the class .ratingsboxDIV and show/hide it, after clicking on any element with class .ratingclick.

We can find all siblings that follow the clicked element by using .nextAll(".classname"), this allows you to place other elements between if necessary. If we follow this with .first() we prevent it from toggling all subsequent siblings that have this class (your code suggests they may not be in separate parent elements, although I would recommend this).

You could simplify the jquery line to $(this).next().toggle(); but it wouldn't be as specific / versatile.

$(".ratingclick").click( function() {

    $(this).nextAll(".ratingsboxDIV").first().toggle(); 

});

.ratingsboxDIV {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="feature">1 
    <div class="ratingclick">Ratings</div>
    <div class="ratingsboxDIV">This is Div 1</div>
</div>
 ----------  
<div class="feature">2 
    <div class="ratingclick">Ratings</div>
    <div class="ratingsboxDIV">This is Div 2 </div>
</div>
  ---------
<div class="feature">3
    <div class="ratingclick">Ratings</div>
    <div class="ratingsboxDIV">This is Div 3</div>
</div>

Answer 2

Try this!

https://codepen.io/seunggabi/pen/aQxZZK

  function RatingsBox(no) {
    var list = document.getElementsByClassName("ratingsboxDIV");

  Array.prototype.forEach.call(list, function(item, index) {
    // because of toggle
    if(index+1 === no) {
      return;
    }
      item.style.display = "none";
    });

    var target = document.getElementById("ratingsboxDIV"+no);
    target.style.display = target.style.display === "block" ? "none" : "block";
  }

.ratingsboxDIV {
  display: none;
  min-height: 300px;
  background-color: white;
  padding: 10px;
  width: 80%;
  margin: auto;
  margin-top: 0px;
  max-width: 800px;
}

<div class="feature">1 
<div class="ratingclick"><a onclick="RatingsBox(1)">Ratings</a></div>
<div id="ratingsboxDIV1" class="ratingsboxDIV"> This is Div 1 </div></div>
----------  
<div class="feature">2 
<div class="ratingclick"><a onclick="RatingsBox(2)">Ratings</a></div>
<div id="ratingsboxDIV2" class="ratingsboxDIV"> This is Div 2 </div></div>
---------
<div class="feature">3
<div class="ratingclick"><a onclick="RatingsBox(3)">Ratings</a></div>
<div id="ratingsboxDIV3" class="ratingsboxDIV"> This is Div 3 </div></div>

Answer 3

Here is a quick jQuery solution.

$(function() {
  function ratingsBox(e) {
    e.preventDefault();
    var x = $(this);
    x.parent().next().toggleClass("hidden");
  }

  $(".ratingclick a").click(ratingsBox);
});

.ratingsboxDIV {
  min-height: 300px;
  background-color: white;
  padding: 10px;
  width: 80%;
  margin: auto;
  margin-top: 0px;
  max-width: 800px;
}

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="feature">1
  <div class="ratingclick"><a href="#">Ratings</a></div>
  <div class="ratingsboxDIV hidden">This is Div 1</div>
</div>
----------
<div class="feature">2
  <div class="ratingclick"><a href="#">Ratings</a></div>
  <div class="ratingsboxDIV hidden">This is Div 2</div>
</div>
---------
<div class="feature">3
  <div class="ratingclick"><a href="#">Ratings</a></div>
  <div class="ratingsboxDIV hidden">This is Div 3</div>
</div>

On Click event, we prevent the link from performing it's default action. We then can make use of .toggleClass() to easily add or remove a class. This allows us to show or hide the next div. To select the next div, we use .parent() and then .next().

Hope that helps.

Answer 4

One approach might be to feed the click event into the RatingsBox function so that you can distinguish the button that the user is clicking and then toggle visibility of the respective .ratingsboxDIV element:

function RatingsBox(event) {
   
var ratingsBox = event.currentTarget // Get the current button
.parentNode                          // Get parent of button
.parentNode                          // Get grandparent of button
.querySelector('.ratingsboxDIV');    // Get the ratings box
  
// Toggle visibility of the div via inline styles
if (ratingsBox.style.display !== "none") {
    ratingsBox.style.display = "none";
} else {
    ratingsBox.style.display = "block";
}
}

#ratingsboxDIV {
display:none;
min-height:300px;
background-color:white;
padding: 10px;
width: 80%;
margin: auto;
margin-top: 0px;
max-width: 800px;
 }

<div class="feature">1 
  <!-- Pass event to RatingsBox -->
  <div class="ratingclick"><a onclick="RatingsBox(event)">Ratings</a></div>
  <div class="ratingsboxDIV"> This is Div 1 </div>
</div>
----------  
<div class="feature">2 
  <!-- Pass event to RatingsBox -->
  <div class="ratingclick"><a onclick="RatingsBox(event)">Ratings</a></div>
  <div class="ratingsboxDIV"> This is Div 2 </div>
</div>
---------
<div class="feature">3
  <!-- Pass event to RatingsBox -->
  <div class="ratingclick"><a onclick="RatingsBox(event)">Ratings</a></div>
  <div class="ratingsboxDIV"> This is Div 3 </div>
</div>