how to hide and show with data-id Attribute onclick button in jquery-CodePudding

When I click on a button with the code below it worked fine for one button.

With css(id) I can do it for one row but if I am using a loop and I want to show the data according to the button or data-id Attribute of that particular button, I don't know how to do it with data-id Attribute or any other method.

For one button with css(id) I can easily do that but the method where I am using foreach with button (viewFullDetails functions) it is working but for first row even when I click on second button the first button is hiding/showing not the second button. so what should I do to display and hide data of a row with button related to that row?

function viewFullDetails() {
  var x = document.getElementById("showme");
  if (x.style.display === "none") {
    x.style.display = "block";
    document.getElementById("showMoreLess").innerHTML = "View Less";
  } else {
    x.style.display = "none";
    document.getElementById("showMoreLess").innerHTML = "View More";
  }
}

 

<button id="showMoreLess" data-order-id="${detailInfo.id}"  onclick="viewFullDetails()">View More</button>

Here i can't use Css(id) to target that button

let html = 
    `<div >
     <div >
     <p >ID:</p>
     <p >${data.id}</p>
     <p >${data.coin}</p>
     </div>
    
     <div >
     <p >PNL</p>
     <p > &nbsp; ${data.group_pnl} (-0.66%)</p>
     </div>
    
    <div >
    <ul >`;

detailInfos.forEach(detailInfo => {
  if (detailInfo.group_id == ordersDetails) {
    let htmlSegment = `<li  ng-repeat="itembx">
      <div >
        <p >${detailInfo.openedAt}</p>
        <div >
          <p >${detailInfo.type}</p>
          <button id="showMoreLess" data-order-id="${detailInfo.id}"  onclick="viewFullDetails()">View More</button>
        </div>
      </li>`
    html  = htmlSegment;
  }
});
html  = `</ul></div></div>`;
let container = document.querySelector('.orders-details-info');
container.innerHTML = html;

CodePudding user response：

Here is how to make more buttons

const orderUL = document.querySelector('.orders-details-info');
const groupDetail = detailInfos
  .filter(detailInfo => detailInfo.group_id == ordersDetails)
if (groupDetail.length) orderUL.innerHTML = groupDetail
  .map(detailInfo => `<li  ng-repeat="itembx">
      <div >
        <p >${detailInfo.openedAt}</p>
        <div >
          <p >${detailInfo.type}</p>
          <button type="button" data-order-id="${detailInfo.id}" 
          >View More</button>
        </div>
      </li>`).join("");

do NOT add to innerHTML

.orders-details-info should be the UL

Then you can delegate

orderUL.addEventListener("click",function(e) {
  const btn = e.target.closest("button")
  if (btn) viewOrderDetails(btn.dataset.orderId)
})

CodePudding user response：

You can toggle button text and a "target" visibility Example:

/* not used 
function viewFullDetails() {
  var x = document.getElementById("showme");
  if (x.style.display === "none") {
    x.style.display = "block";
    document.getElementById("showMoreLess").innerHTML = "View Less";
  } else {
    x.style.display = "none";
    document.getElementById("showMoreLess").innerHTML = "View More";
  }
}
*/
var toggleThings = {
  more: {
    name: "more",
    value: "more",
    newText: "View More"
  },
  less: {
    name: "less",
    value: "less",
    newText: "View Less"
  }
};
//console.log(toggleThings);
function toggleOff(me, forceTo) {
  let targetPrior = document.querySelector('.toggle-target[data-isvisible="show"]');
  if (typeof targetPrior != "undefined" && !targetPrior == null) {
    console.log("one found");
    targetPrior.dataset.isvisible = "hide";
  }
  const dataAttrMap = me.dataset;
  let t = dataAttrMap.toggleTarget;
  let myTarget = document.querySelector('[data-target="'   t   '"]');
  if (!!myTarget) {
    myTarget.dataset.isvisible = "hide";
  }
  const currentValue = dataAttrMap.moreLess;
  let newThing = toggleThings[currentValue].value == toggleThings.less.value ? toggleThings.more : toggleThings.less;

  // force toggle it OFF
  if (typeof forceTo === "string") {
    newThing = toggleThings[forceTo];
  } else {
    toggleAllOff();
  }
  me.innerHTML = newThing.newText;
  dataAttrMap.moreLess = newThing.value;
  document.querySelector(".results").textContent = "";
}

function toggleMe(me) {

  let targetPrior = document.querySelector('.toggle-target[data-isvisible="show"]');
  if (!!targetPrior) {
    targetPrior.dataset.isvisible = "hide";
  }
  const dataAttrMap = me.dataset;
  let t = dataAttrMap.toggleTarget;
  let myTarget = document.querySelector('[data-target="'   t   '"]');
  if (!!myTarget && targetPrior != myTarget) {
    myTarget.dataset.isvisible = "show";
  } else {
    console.log("no target"   t);
  }

  const currentValue = dataAttrMap.moreLess;
  let newThing = toggleThings[currentValue].value == toggleThings.less.value ? toggleThings.more : toggleThings.less;



  me.innerHTML = newThing.newText;
  dataAttrMap.moreLess = newThing.value;
  const results = document.querySelector(".results");
  results.textContent = newThing.value;
}

const actionButtons = document.querySelectorAll(".viewDetailOrderButton");
actionButtons.forEach(btn => btn.addEventListener('click', event => {
  const me = event.target;
  toggleMe(me);
}));

function toggleAllOff() {
  actionButtons.forEach(btn => toggleOff(btn, toggleThings.more.value));
}
toggleAllOff();

[data-more-less="more"] {
  color: #4444ff;
}

[data-more-less="less"] {
  color: #224444;
}

.results {
  border: 1px solid green;
  margin: 1rem;
}

.toggle-target {
  display: none;
}

div.toggle-target[data-isvisible="show"] {
  display: block;
}

<button data-order-id="${detailInfo.id}" data-more-less="more"  data-toggle-target="content-1">Change Me</button>
<button data-order-id="${detailInfo.id}"  data-more-less="more" data-toggle-target="content-2">>View More</button>
<button data-order-id="34"  data-more-less="more">View More</button>
<button data-order-id="47"  data-more-less="more" data-toggle-target="happydays">View More</button>
<div ></div>
<div  data-target="content-1">Button 1</div>
<div  data-target="content-2">Button 2</div>
<div  data-target="content-3">Button 3</div>
<div  data-target="happydays">Button 4 Happy Days</div>