一次仅隐藏/显示一个DIV的功能

Question

I currently have a JavaScript that is looking at a SharePoint list, and pulling back all of the items that meet the criteria in the REST call.

It currently creates DIVs and appends them to a wrapper DIV. The intention of the button is to show/hide the sub-DIVs.

Right now, when I click any of the buttons that are produced, it expands all of the hidden divs. What I'm trying to accomplish is to be able to click each respective button and have its nested div show/hide.

Here is my code:

 var listName = "announcement"; var titleField = "Title"; var tipField = "Quote"; var dateFieldFrom = "DateFrom"; var dateFieldTo = "DateTo"; var category = "category"; var noteField = "note"; var query = "/_api/Web/Lists/GetByTitle('" + listName + "')/items?$select=" + titleField + "," + dateFieldTo + "," + dateFieldFrom + "," + category + "," + noteField + "," + tipField; var today = new Date(); var btnClass = "toggle" todayString = today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate(); //This is the query filter string where we compare the values in the 2 date fields against the current date query += "&$filter=('" + todayString + "' ge " + dateFieldFrom + " ) and (" + dateFieldTo + " ge '" + todayString + "')";; var call = $.ajax({ url: _spPageContextInfo.webAbsoluteUrl + query, type: "GET", dataType: "json", headers: { Accept: "application/json;odata=verbose" } }); call.done(function(data, textStatus, jqXHR) { var divCount = data.d.results.length; for (var i = 0; i < divCount; i++) { var tip = data.d.results[i][tipField]; //this is where it looks at the quote field to determine what quote to place in the current dynamically created DIV var cat = data.d.results[i][category]; //this is where it looks at the category field to determine what color to style the background of the current dynamically created DIV var message = data.d.results[i][noteField]; var ID = "NewDiv-" + i var PID = "P-" + i var BID = "btn-" + i // Create Message DIV var element = document.createElement("div"); //This is the creation of the dynamic DIV element.id = ID //This is assigning a DIV an ID element.appendChild(document.createTextNode(tip)); // Create Inner message DIV var innerDiv = document.createElement("div"); // Create a <div> element//New Code innerDiv.id = PID innerDiv.appendChild(document.createTextNode(message)); // Create button to show/hide the div var btn = document.createElement("BUTTON"); btn.id = BID btn.appendChild(document.createTextNode("show/hide message below")); btn.className = btnClass // Append Inner DIVs document.getElementById('wrapper').appendChild(element); //This is the parent DIV element that all newly created DIVs get created into document.getElementById(ID).appendChild(btn); // Append the button to the newly created DIV document.getElementById(ID).appendChild(innerDiv); //This is the message that appears after the newly created DIVs if (cat == 'Information') { document.getElementById(ID).style.backgroundColor = '#d9edf7'; //Blue Color document.getElementById(PID).style.backgroundColor = '#d9edf7'; //Blue Color document.getElementById(PID).style.margin = '3px'; document.getElementById(BID).style.backgroundColor = '#d9edf7'; document.getElementById(BID).style.border = 'none'; innerDiv.className = "alert alert-info" element.className = "alert alert-info" } if (cat == 'Warning') { document.getElementById(ID).style.backgroundColor = '#fcf8e3'; //Orange Color document.getElementById(PID).style.backgroundColor = '#fcf8e3'; //Orange Color document.getElementById(PID).style.margin = '3px'; document.getElementById(BID).style.backgroundColor = '#fcf8e3'; document.getElementById(BID).style.border = 'none'; innerDiv.className = "alert alert-warning" element.className = "alert alert-warning" } if (cat == 'Critical') { document.getElementById(ID).style.backgroundColor = '#f2dede'; //Red Color document.getElementById(PID).style.backgroundColor = '#f2dede'; //Red Color document.getElementById(PID).style.margin = '3px'; document.getElementById(BID).style.backgroundColor = '#f2dede'; document.getElementById(BID).style.border = 'none'; innerDiv.className = "alert alert-danger" element.className = "alert alert-danger" } } // The below variables and for loop ensure that all sub messages are initially hidden, until the show/hide button is clicked var curDiv var curID for (var i = 0; i < divCount; i++) { curID = "P-" + i curDiv = document.getElementById(curID) curDiv.style.display = 'none'; } // The function below is to assign an event to the button to show/hide the sub message var f = function(a) { var cDiv for (var z = 0; z < divCount; z++) { cDiv = "P-" + z var div = document.getElementById(cDiv); if (div.style.display !== 'none') { div.style.display = 'none'; } else { div.style.display = 'block'; } } return false; } var elems = document.getElementsByClassName("toggle"); var idx for (var i = 0, len = elems.length; i < len; i++) { elems[i].onclick = f; } }); 

 <div id="wrapper" class="header"> </div> 

Answer 1

You can replace all of this - which loops over all divs

// The function below is to assign an event to the button to show/hide the sub message
  var f = function(a) {
    var cDiv
    for (var z = 0; z < divCount; z++) {
      cDiv = "P-" + z
      var div = document.getElementById(cDiv);
      if (div.style.display !== 'none') {
        div.style.display = 'none';
      } else {
        div.style.display = 'block';
      }
    }
    return false;
  }
  var elems = document.getElementsByClassName("toggle");
  var idx
  for (var i = 0, len = elems.length; i < len; i++) {
    elems[i].onclick = f;
  }

with this, it delegates the click on the button in the wrapper and toggles the next object after the button

$('#wrapper').on("click",".toggle",function(e) { // notice the delegation
  e.preventDefault(); // in case you forget type="button"
  $(this).next().toggle();
});

Like this:

 $(function() { $('#wrapper').on("click", ".toggle", function(e) { e.preventDefault(); $(this).next().toggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="wrapper"> <div id="NewDiv-0" class="alert alert-info" style="background-color: rgb(217, 237, 247);">Debbie Teng joins PD Tax!******** <button id="btn-0" class="toggle" style="background-color: rgb(217, 237, 247); border: none;">show/hide message below</button> <div id="P-0" class="alert alert-info" style="background-color: rgb(217, 237, 247); margin: 3px; display: none;">yadayada1​</div> </div> </div> 

Answer 2

You're assigning all of your buttons the same onclick function event handler, and that function loops through all the divs and shows them or hides them.

An alternative approach would be to have the event handler toggle only the specific div that's associated with the button.

When you first create the button, you can assign an event handler to it immediately and pass in a reference to the div you want to hide:

var innerDiv = document.createElement("div");
innerDiv.id = PID
innerDiv.appendChild(document.createTextNode(message));
var btn = document.createElement("BUTTON");
// Immediately-invoked function expression to attach event handler to inner div:
(function(d){
    btn.onclick = function(){ f(d); };
})(innerDiv);

Then just update your f function to accept as a parameter the div you want to toggle.

// The function below is to assign an event to the button to show/hide the sub message
function f(div){
    if (div.style.display !== 'none') {
        div.style.display = 'none';
    } else {
        div.style.display = 'block';
    }
    return false;
}

You can then remove the last few lines of code where you're assigning the buttons to the elems collection and looping through it to attach an onclick function.