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

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}" class="viewDetailOrderButton" onclick="viewFullDetails()">View More</button>

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

 async function renderViewDetails(data, dataTableOrders) {
    let ordersDetails = data.group_id;
    var detailInfos = dataTableOrders;

let html = 
        `<div class="viewDetailModal">
         <div class="detailButtonModal">
         <p class="viewOrderId">ID:</p>
         <p class="orderdetailsid viewOrderId">${data.id}</p>
         <p class="coinviewDetail">${data.coin}</p>
         </div>

         <div class="detailButtonModal">
         <p class="orderPnl">PNL</p>
         <p class="ordersPnlDetails"> &nbsp; ${data.group_pnl} </p>
         </div>

         <div class="rb-container">
         <ul class="rb">`;
               

    detailInfos.forEach(detailInfo => {
        if(detailInfo.group_id == ordersDetails) {
        let htmlSegment = `
          <li class="rb-item timelimeVertical" ng-repeat="itembx">
            <div class="tradingOrdersInfo">
            <p class="orderDetailDate">${detailInfo.openedAt}</p>
    
            <div class="tradeOrderType">
            <p class="viewDetailOrderType">${detailInfo.type}</p>
            <button id="showMoreLess_${detailInfo.id}" 
             data-order-id="${detailInfo.id}" 
             class="viewDetailOrderButton">View 
             More</button>
            </div>
    
                            
            <div id="showme_${detailInfo.id}" style="display:none";>
    
            <div class="tradeOrderEntry">
            <div>
            <p class="orderDetailQuantity">Quantity:</p>
            <p class="orderDetailQuantityValue">${detailInfo.volume}</p>
           </div>
           <div class="tradeOrdervaluePrice">
           <p class="orderPnlInner"> &nbsp; ${detailInfo.group_pnl}</p>
           <p class="pnlInnerLabel">PNL</p>
           </div>
           </div>
    
           <div class="tradeOrderEntry tradeOrderEntryValue">
           <div>
           <p class="detailEntryValue">$${detailInfo.entry}</p>
           <p class="detailEntryValue entryOpa">Entry Price</p>
           </div>
    
           <div class="tradeOrdervaluePrice">
           <p class="detailCloseValue">$1690</p>
           <p class="viewCloseLabel">Close Price</p>
           </div>
           </div>
    
           <div class="tradeOrderEntry tradeOrderEntryValue">
           <div>
           <p class="detailEntryValue entryOpa ">TP Target</p>
           <p class="detailEntryValue entryOpa">Entry Target</p>
           </div>
    
           <div>
           <p class="detailEntryValueR viewPadd">1% <span class="viewHit">Hit</span> | 5% <span class="viewHit">Hit</span> | 10%</p>
           <p class="detailEntryValueR"> 40% | 20% | 30% </p>
           </div>
           </div>
    
    
           <div class="tradeOrderEntry tradeOrderEntryValue">
           <div>
           <p class="detailEntryValue entryOpa">Expire</p>
           </div>
    
           <div>
           <p class="detailEntryValueR viewPadd">Date - Time</p>
           </div>
                            </div>
    
    
          <div class="tradeOrderEntry tradeOrderEntryValue">
          <div>
          <p class="detailEntryValue entryOpa">Comment</p>
          </div>
    
         <div>
         <p class="detailEntryValueR viewPadd">Stop: 0.0009111</p>
         <p class="detailEntryValueR viewPadd">Minute: 0.000021</p>
         <p class="detailEntryValueR viewPadd">Current: 0.0002121</p>
         <p class="detailEntryValueR viewPadd">Profit: 0.97</p>
            </div>
         </div>
    
         <div class="tradeOrderEntryValue buttonsInfo">
         <button class="editedButton commonBtnStyle">
         <img src="img/edit-dropdown.png" />Edit</button>
                                
           <button class="cancelledButton commonBtnStyle">
           <img src="img/cross1.png" />Cancel</button>
                                
           <button class="resumedButton commonBtnStyle">
           <img src="img/pause-dropdown.png" />Pause/Resume</button>
                                
           <button class="exittedButton commonBtnStyle">
           <img src="img/exitted.png" />Force Exit</button>
           
           </div>
                            
          </div>
    
          </div>
          </li>`
                                          
        html += htmlSegment;
        }
        });
        html +=  `</ul></div></div>`;
       

     

    let container = document.querySelector('.orders-details-info');
    container.innerHTML = html;

    $(document).ready(function() {
        $('.viewDetailOrderButton').on('click', function(){
            var testId = $(this).attr('id');
           
            
        // $('.tradeOrderType').find("[data-id='" + testId + "']");
            viewFullDetails(testId);
        });
      });
    
      
      function viewFullDetails(testId){
        var x = document.getElementById("showme");
        console.log(128, x);
        if (x.style.display === "none") {
            x.style.display = "block";
            document.getElementById(testId).innerHTML="View Less";
        } else {
            x.style.display = "none";
            document.getElementById(testId).innerHTML="View More";
        }                     
      }
}

Solution 1:^[1]

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 class="rb-item timelimeVertical" ng-repeat="itembx">
      <div class="tradingOrdersInfo">
        <p class="orderDetailDate">${detailInfo.openedAt}</p>
        <div class="tradeOrderType">
          <p class="viewDetailOrderType">${detailInfo.type}</p>
          <button type="button" data-order-id="${detailInfo.id}" 
          class="viewDetailOrderButton">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)
})

Solution 2:^[2]

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

var toggleThings = {
  more: {
    name: "more",
    value: "more",
    newText: "View More"
  },
  less: {
    name: "less",
    value: "less",
    newText: "View Less"
  }
};

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	mplungjan
Solution 2

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

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]