Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.02.2018, 12:12
Новичок на форуме
Отправить личное сообщение для dima018 Посмотреть профиль Найти все сообщения от dima018
 
Регистрация: 12.02.2018
Сообщений: 4

стрелки вниз, верх при раздвижение блоков
Добрый день Друзья! я новичок, есть определенный код и js все работает хорошо, но может кто подскажет как добавить сюда стрелки навигации на каждый блок стрелка вниз что бы развернуть блок и стрелка вверх когда нужно свернуть блок! огромное спасибо если кто поможет! данный код можно посмотреть по ссылке http://jemand.ru/raskryvayushhiesya-...na-javascript/
Ответить с цитированием
  #2 (permalink)  
Старый 12.02.2018, 12:23
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,791

Ссылке, которая раскрывает блок стрелку можно добавить как псевдо-элемен.
При изменении состояния видимости контента шапке добавлять/удалять какой-нибудь класс.
В 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>
Ответить с цитированием
  #3 (permalink)  
Старый 12.02.2018, 12:35
Новичок на форуме
Отправить личное сообщение для dima018 Посмотреть профиль Найти все сообщения от dima018
 
Регистрация: 12.02.2018
Сообщений: 4

Спасибо!, а более проще ни как нельзя например в сам js скрипт как то вставить изображение или даже просто так ↑↓ или + - или ^
Ответить с цитированием
  #4 (permalink)  
Старый 12.02.2018, 12:49
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<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>
Ответить с цитированием
  #5 (permalink)  
Старый 12.02.2018, 12:55
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,791

Сообщение от dima018
а более проще ни как нельзя
Куда еще проще...
Ответить с цитированием
  #6 (permalink)  
Старый 12.02.2018, 12:59
Новичок на форуме
Отправить личное сообщение для dima018 Посмотреть профиль Найти все сообщения от dima018
 
Регистрация: 12.02.2018
Сообщений: 4

спасибо вечером буду пробовать)
Ответить с цитированием
  #7 (permalink)  
Старый 12.02.2018, 13:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,115

открывашка по индексу js
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>
Ответить с цитированием
  #8 (permalink)  
Старый 12.02.2018, 13:43
Новичок на форуме
Отправить личное сообщение для dima018 Посмотреть профиль Найти все сообщения от dima018
 
Регистрация: 12.02.2018
Сообщений: 4

О Спасибо большое))) то что нужно!!!
Ответить с цитированием
  #9 (permalink)  
Старый 12.02.2018, 21:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,115

открывашка по индексу независимые блоки 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение позиции блоков при увеличении изображения vyrtime Общие вопросы Javascript 2 14.10.2011 12:24
как на javascript сделать что-б при на жатии на стрелочки, в низ- в верх verstun Общие вопросы Javascript 1 06.10.2011 21:19
выборка в php при прокрутке страницы вниз Tchort Events/DOM/Window 4 11.08.2011 17:38
Два блока div разъезжаются при скроллинге окна браузера. call007 jQuery 0 03.04.2011 16:21
Проблема при скрытии блоков в Опере InviS (X)HTML/CSS 1 20.03.2011 12:43