Форум

dima018 · #1 (**permalink**) 12.02.2018, 12:12

Добрый день Друзья! я новичок, есть определенный код и js все работает хорошо, но может кто подскажет как добавить сюда стрелки навигации на каждый блок стрелка вниз что бы развернуть блок и стрелка вверх когда нужно свернуть блок! огромное спасибо если кто поможет! данный код можно посмотреть по ссылке http://jemand.ru/raskryvayushhiesya-...na-javascript/

Nexus · #2 (**permalink**) 12.02.2018, 12:23

Ссылке, которая раскрывает блок стрелку можно добавить как псевдо-элемен.
При изменении состояния видимости контента шапке добавлять/удалять какой-нибудь класс.
В 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>

dima018 · #3 (**permalink**) 12.02.2018, 12:35

Спасибо!, а более проще ни как нельзя например в сам js скрипт как то вставить изображение или даже просто так ↑↓ или + - или ^

j0hnik · #4 (**permalink**) 12.02.2018, 12:49

<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>

Nexus · #5 (**permalink**) 12.02.2018, 12:55

Сообщение от dima018

а более проще ни как нельзя

Куда еще проще...

dima018 · #6 (**permalink**) 12.02.2018, 12:59

спасибо вечером буду пробовать)

рони · #7 (**permalink**) 12.02.2018, 13:01

dima018,
остальные 300+ открывашек, лежат на форуме, там наверняка есть и этот вариант

<!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>

dima018 · #8 (**permalink**) 12.02.2018, 13:43

О Спасибо большое))) то что нужно!!!

рони · #9 (**permalink**) 12.02.2018, 21:29

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>

Форум

Справочник

Discord чат

Курсы javascript