Ссылка-якорь на содержимое аккордеона
Есть аккордеон сделанный на чистом 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: |
Pobedill,
а если вниз страницы ставить то в 10 раз меньше кода :lol: |
Pobedill,
<script> window.addEventListener('load', function() { location.hash && (document.querySelector(location.hash).checked = true) }); </script>строку 3 можно оставить из кода только если ставить скрипт в самый низ |
рони, добавил строчку и вставил перед </body>
<script> window.addEventListener('load', function() { var nodes = document.querySelectorAll('.tab'); location.hash && (document.querySelector(location.hash).checked = true) }); </script> Работает два метода. Спасибо огромное за помощь! На следующей неделе скину чаевые) |
Ошибочка... Почистил кэш... Первый способ не работает...
|
Pobedill,
так и не понял что у вас там не работает |
Всё нормально. Я просто хотел два скрипта объединить в один - добавив третью строчку с первого скрипта) А теперь вставил их по отдельности и всё работает. Единственное, не открывает когда аккордеон в аккордеоне...
|
Спасибо)
|
Часовой пояс GMT +3, время: 02:32. |