Ссылка-якорь на содержимое аккордеона
Есть аккордеон сделанный на чистом css, на чекбоксах. Как можно сделать ссылку-якорь на содержимое конкретной вкладки? Как заставить вкладку раскрываться? Сделал такую ссылку
<a href="#jacor">Якорь</a>
<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><a name="jacor"></a>
Сделать якорь, например, на эту информацию.
</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>
/**
* Компоненты аккордеона.
*/
.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 }
}
|
Pobedill,
вы хотите js? |
Pobedill,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.accordion{
margin: 1500px auto ;
}
.accordion_target{
display: none;
}
:target{
display: block;
}
[type="checkbox"]:checked + .accordion_target{
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function(){
})
</script>
</head>
<body>
<a href="#jacor">Якорь</a>
<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" id="jacor">
<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>
</body>
</html>
|
Забыл добавить стили. Добавил в первое сообщение. Посмотрите пожалуйста, что можно сделать.
|
Pobedill,
один раз открыть можно как показано выше -- если хотите и ссылку и checkbox тогда js |
Не могу найти на форуме и в гугле подобных скриптов... а отказываться от чекбоксов не хочется. Знать бы куда копать...
|
Цитата:
|
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>
|
Просто замечательно. Правда планировалось изначально для внешних ссылок. Это наверное невозможно?
|
Pobedill,
возможно... но тогда скрипт сократится в 5 раз :cray: :lol: |
| Часовой пояс GMT +3, время: 06:02. |