How to check a specific checkbox in a pure CSS Accordion via URL?-CodePudding

I use a pure CSS Accordion to present my content. The Accordion works with normal checkboxes. Now I want to implement, that by sending a simple link, a single checkbox entry will be checked and with the help of an anchor the browser should jump to that entry and show the specific content to the reader.

The whole thing should be done preferably without a scripting or programming language, but after a lot of research I think that at least JavaScript will be required (it must run on the client side, so no PHP or similar).

I have searched and tested a lot but unfortunately I have not found any suitable solution that would work.

```
<!DOCTYPE html>
<html>
<head>
  <title>My example Website</title>
</head>
<body>

<style>

body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
input {
display: none;
}
label {
display: block;    
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color:black;
}
label::after {
content: ' ';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked   label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input   label   .content {
display: none;
}
input:checked   label   .content {
display: block;
}
</style>

<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>

<div >

  My Content 1

</div>
</div>

<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>

<div >

  My Content 2

</div>
</div>

<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>

<div >

  My Content 3

</div>

</body>
</html>
```

CodePudding user response：

You're correct that JavaScript is required. I have provided a solution, but I haven't tested it, because it's not possible to test in the snippet. It should select the relevant checkbox when a hash tag is detected in the URL that corresponds with a checkbox ID.

So you would use some time https://www.website.com/#title1

// Check if URL of browwser window has hash tag
if (location.hash) {
  // Get URL hash tag
  const hash = window.location.hash;
  // Select checkbox with ID of hashtag
  const checkbox = document.querySelector(hash);
  // Check if checkbox exists
  if(checkbox) {
    // Set selected checkbox as checked
    checkbox.checked = true;
  }
}

body {
  font-size: 21px;
  font-family: Tahoma, Geneva, sans-serif;
  max-width: 550px;
  margin: 0 auto;
  background-color: black;
}
input {
  display: none;
}
label {
  display: block;    
  padding: 8px 22px;
  margin: 0 0 1px 0;
  cursor: pointer;
  background: #181818;
  border: 1px solid white;
  border-radius: 5px;
  color: #FFF;
  position: relative;
}
label:hover {
  background: white;
  border: 1px solid white;
  color:black;
}
label::after {
  content: ' ';
  font-size: 22px;
  font-weight: bold;
  position: absolute;
  right: 10px;
  top: 2px;
}
input:checked   label::after {
  content: '-';
  right: 14px;
  top: 3px;
}
.content {
  background: #DBEECD;
  background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
  background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
  background: linear-gradient(to top left, #DBEECD, #EBD1CD);
  padding: 10px 25px 10px 25px;
  border: 1px solid #A7A7A7;
  margin: 0 0 1px 0;
  border-radius: 1px;
}
input   label   .content {
  display: none;
}
input:checked   label   .content {
  display: block;
}

<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>

<div >
  My Content 1
</div>

<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>

<div >
  My Content 2
</div>

<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>

<div >
  My Content 3
</div>