Pobedill, в href указать нужный checkbox
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
/**
* Компоненты аккордеона.
*/
.accordion {
margin: 0;
margin-bottom: 1.5rem;
padding: 0;
list-style: none;
}
.accordion_item {
border-bottom: 1px solid #5a95fd;
}
.accordion_item:last-of-type {
border-bottom: none;
}
/**
* Элемент label который запускает открыть/закрыть.
*/
.accordion_trigger {
display: block;
background-color: #007ccf;
color: #ddd;
font-weight: bold;
cursor: pointer;
padding: 1.5rem;
}
/**
* элементы radio/checkbox всегда должны быть скрыты
* c помощью нулевых значений свойства clip
*/
.accordion_toggle {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/**
* скрытое содержание аккордеона
* c помощью нулевых значений свойства clip
*/
.accordion_target {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
background-color: #ddd;
color: #444;
}
/**
* когда переключатель checked на radio/checkbox, показать содержимое аккордеона.
*/
.accordion_toggle:checked + .accordion_target{
position: static;
overflow: visible;
width: auto;
height: auto;
margin: auto;
clip: auto;
padding: 1.5rem;
/* задержка появления функция анимации */
-webkit-animation:fadeIn ease-in 0.7s;
-moz-animation:fadeIn ease-in 0.7s;
animation:fadeIn ease-in 0.7s;
}
/* анимация при появлении блоков с содержанием */
@-moz-keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1 }
}
@-webkit-keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1 }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1 }
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var nodes = document.querySelectorAll('.tab');
[].forEach.call( nodes, function(a) {
var id = a.getAttribute('href')
a.addEventListener('click', function create() {
document.querySelector(id).checked = true;
});
});
});
</script>
</head>
<body>
<a href="#toggle-05" class="tab">Якорь</a>
<p style="height: 500px"></p>
<ul class="accordion">
<li class="accordion_item">
<label class="accordion_trigger" for="toggle-05">Заголовок панели 1</label>
<input type="checkbox" class="accordion_toggle" id="toggle-05" />
<div class="accordion_target">
<p>
Сделать якорь, например, на эту информацию.
</p>
</div>
</li>
<li class="accordion_item">
<label class="accordion_trigger" for="toggle-06">Заголовок панели 2</label>
<input type="checkbox" class="accordion_toggle" id="toggle-06" />
<div class="accordion_target">
<p>
Здесь размещаете любое содержание...
</p>
</div>
</li>
</ul>
<p style="height: 1500px"></p>
</body>
</html>