стрелки вниз, верх при раздвижение блоков
Добрый день Друзья! я новичок, есть определенный код и js все работает хорошо, но может кто подскажет как добавить сюда стрелки навигации на каждый блок стрелка вниз что бы развернуть блок и стрелка вверх когда нужно свернуть блок! огромное спасибо если кто поможет! данный код можно посмотреть по ссылке http://jemand.ru/raskryvayushhiesya-...na-javascript/
|
Ссылке, которая раскрывает блок стрелку можно добавить как псевдо-элемен.
При изменении состояния видимости контента шапке добавлять/удалять какой-нибудь класс. В css добавить правило, которое будет разворачивать стрелку, если класс у шапки присутствует.
<div>Click me</div>
<style>
div{
padding:10px;
position:relative;
}
div:after{
content:'Arrow';
position:absolute;
top:10px;
right:20px;
}
div.some-class:after{
transform:rotate(180deg);
}
</style>
<script>
document.querySelector('div').onclick=function(){
this.classList.toggle('some-class')
};
</script>
|
Спасибо!, а более проще ни как нельзя например в сам js скрипт как то вставить изображение или даже просто так ↑↓ или + - или ^
|
<div>Click me <span>+</span></div>
<style>
div{
padding:10px;
position:relative;
}
</style>
<script>
document.querySelector("div").onclick =e=> e.target.children[0].textContent = e.target.children[0].textContent === '+'?'-':'+';
</script>
|
Цитата:
|
спасибо вечером буду пробовать)
|
открывашка по индексу js
dima018,
остальные 300+ открывашек, лежат на форуме, там наверняка есть и этот вариант :lol:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.header {
width: 508px;
color: #fff;
font-family: Georgia;
font-size: 14px;
}
.header {
position: relative;
width: 488px;
border: 2px solid #3F3F3F;
padding: 8px;
font-weight: bold;
margin-top: 5px;
cursor: pointer;
background: url(http://jemand.ru/examples/images/raskryvayushhiesya-bloki-div-na-javascript/header.png);
text-align: center;
}
.header:hover {
background: url(http://jemand.ru/examples/images/raskryvayushhiesya-bloki-div-na-javascript/header_over.png);
color: #B7B7B7;
}
.content {
overflow: hidden;
transition: height 1s;
height: 0;
}
.text {
width: 474px;
border: 2px solid #3F3F3F;
border-top: none;
padding: 15px;
text-align: left;
background: #7F7F7F;
}
.header:after{
position: absolute;
top: 5px;
right: 5px;
content: "\25BC";
color: #fff;
}
.header.open:after{
content: "\25B2";
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var header = [].slice.call(document.querySelectorAll(".header"), 0);
var content = [].slice.call(document.querySelectorAll(".content"), 0);
header.forEach(function(item, i) {
item.addEventListener("click", function() {
header.forEach(function(el, k) {
i == k ? el.classList.toggle("open") : el.classList.remove("open");
var text = content[k];
var height = el.classList.contains("open") ? text.scrollHeight : 0;
text.style.height = height + "px";
});
});
});
});
</script>
</head>
<body>
<div class="header" id="1-header">Первый блок</div>
<div class="content" id="1-content">
<div class="text">
Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока.
</div>
</div>
<div class="header" id="2-header">Второй блок</div>
<div class="content" id="2-content">
<div class="text">
Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока.
</div>
</div>
<div class="header" id="3-header">Третий блок</div>
<div class="content" id="3-content">
<div class="text">
Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока.
</div>
</div>
<div class="header" id="4-header">Четвертый блок</div>
<div class="content" id="4-content">
<div class="text">
Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока.
</div>
</div>
<div class="header" id="5-header">Пятый блок</div>
<div class="content" id="5-content">
<div class="text">
Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока.
</div>
</div>
</body>
</html>
|
О Спасибо большое))) то что нужно!!!
|
открывашка по индексу независимые блоки js
dima018,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.header {
width: 508px;
color: #fff;
font-family: Georgia;
font-size: 14px;
}
.header {
position: relative;
width: 488px;
border: 2px solid #3F3F3F;
padding: 8px;
font-weight: bold;
margin-top: 5px;
cursor: pointer;
background: url(http://jemand.ru/examples/images/raskryvayushhiesya-bloki-div-na-javascript/header.png);
text-align: center;
}
.header:hover {
background: url(http://jemand.ru/examples/images/raskryvayushhiesya-bloki-div-na-javascript/header_over.png);
color: #B7B7B7;
}
.content {
overflow: hidden;
transition: height 1s;
height: 0;
}
.text {
width: 474px;
border: 2px solid #3F3F3F;
border-top: none;
padding: 15px;
text-align: left;
background: #7F7F7F;
}
.header:after{
position: absolute;
top: 5px;
right: 5px;
content: "\25BC";
color: #fff;
}
.header.open:after{
content: "\25B2";
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var header = [].slice.call(document.querySelectorAll(".header"), 0);
var content = [].slice.call(document.querySelectorAll(".content"), 0);
header.forEach(function(item, i) {
item.addEventListener("click", function() {
item.classList.toggle("open");
var text = content[i];
var height = item.classList.contains("open") ? text.scrollHeight : 0;
text.style.height = height + "px";
});
});
});
</script>
</head>
<body>
<div class="header" id="1-header">Первый блок</div>
<div class="content" id="1-content">
<div class="text">
Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока.
</div>
</div>
<div class="header" id="2-header">Второй блок</div>
<div class="content" id="2-content">
<div class="text">
Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока.
</div>
</div>
<div class="header" id="3-header">Третий блок</div>
<div class="content" id="3-content">
<div class="text">
Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока.
</div>
</div>
<div class="header" id="4-header">Четвертый блок</div>
<div class="content" id="4-content">
<div class="text">
Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока.
</div>
</div>
<div class="header" id="5-header">Пятый блок</div>
<div class="content" id="5-content">
<div class="text">
Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока.
</div>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 19:37. |