Open closest Details element onclick

user_4969162 0
Viewed 683

I'd like to have a button that opens the closest details element (above button) without using ID. I've tried variations of the following code and search every thread but can't figure it out

function openDetail(detailsElement) {
    detailsElement.setAttribute("open");
}
<details>
    <summary>Summary 1</summary>
    Test 1
</details>
<button onclick="openDetail(closest)">button</button>
<details>
    <summary>Summary 2</summary>
    Test 2
</details>
<button onclick="openDetail(closest)">button</button>

html jquery javascript
4 Answers

You can use .prev() to get previous element from button .

Demo Code :

function openDetail(detailsElement) {
  $(detailsElement).prev().attr('open','open')
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<details>
  <summary>Summary 1</summary>
  Test 1
</details>
<button onclick="openDetail(this)">button</button>

<details>
  <summary>Summary 2</summary>
  Test 2
</details>
<button onclick="openDetail(this)">button</button>

user_106064000 
const details = document.querySelectorAll("details");

function openDetail(detailPosition) {
  const pos = details[detailPosition - 1];
  pos.open = !pos.open;
}
    
<details>
<summary>Summary 1</summary>
  Test 1
</details>
<button onclick="openDetail(1)">button</button>
user_149545030

You need to use the previousElementSibling property here and then use setAttribute for open true. Please check below code:

function openDetail(e) {
    const closet = e.previousElementSibling;
    closet.setAttribute("open", true);
}
<details>
    <summary>Summary 1</summary>
    Test 1
</details>
<button onclick="openDetail(this)">button</button>
<details>
    <summary>Summary 2</summary>
    Test 2
</details>
<button onclick="openDetail(this)">button</button>

user_85378930

Could you please check this?

$(document).ready(function(){
  $("button").click(function(){
   
    var id = $(this).attr("target-id");
     console.log(id)
    var key = "#" + id;
     var item = $('' + key + '').attr("open",true)
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<details id="one">
<summary>Summary 1</summary>
Test 1
</details>
 <button target-id="one">button</button>
 
 <details id="two">
<summary>Summary 2</summary>
Test 2
</details>
 <button target-id="two"  >button</button>

user_81935210
Related