Jump to content

Спойлер

viliksar

By viliksar,
in Practise Templates

 Share

Recommended Posts

viliksar Explorer

viliksar

Posted
Posted (edited)

Переношу сайт на ворд пресс. И возникла трудность, не могу найти скрипт который отвечает за кнопку спойлера РАСКРЫТЬ. Целиком код копирую с question.html, но не работает

Edited by viliksar
Link to comment
Share on other sites
DivMan Explorer

DivMan

Posted
Posted (edited) 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
span{
  display: inline-block;
  margin-right: 10px;
}

.content{
  width: 130px;
}

.none{
  display: none;
}
    </style>
</head>
<body>
    <span class='tab'>Tab1</span><span class='tab'>Tab2</span><span class='tab'>Tab3</span>

<div class="content">
  <div class="c">aaaa a aaaaa  aaaaaa a a a a aaaaaa  aaaaaa aaaaa</div>
  <div class="c none">bbbb bbbb bbbbb bbbb bbbb bbbbb bbbb bbbbb bbbb bbbbb</div>
  <div class="c none">ccc ccccc cccccc ccccc cccccc ccccc ccccc</div>
</div>

<script>

var tabs = document.querySelectorAll('.tab')
var con = document.querySelectorAll('.c')

for (var i = 0; i < tabs.length; i++) {
  tabs.addEventListener('click', function(e) {
    for (var k = 0; k < tabs.length; k++) {
      if (this == tabs[k]) {
        con[k].classList.remove('none');
      } else {
        con[k].classList.add('none');
      }
    }
  })
}

</script>
</body>
</html>

  


  <a href="#"class="button">Как совершается поминовение согласно поданной записке?</a>
 
  <div class="block">Принимаются поминальные записки только о крещенных православных.<br><br>

В Церкви нет классификации степени «силы» того или иного вида поминовения, которое во многом зависит от церковной и духовной жизни подающего поминальную записку. Условный размер возможного пожертвования влияет только на период поминовения (единоразово, 40 дней, полгода , 1 год, 5 лет, 10 лет).</div>

  <a href="#"class="button">Подскажите, как можно побороть грусть?</a>
 
  <div class="block"> 
Грусть – светское понятие духовного состояния печали, за которой следует более тяжкий плен уныния. Причины грусти или печали множественные, духовные и материальные, вольные либо невольные – однако все они предполагают собою путь удаления человека от единения с Господом.</div>
a {
  text-decoration: none;
  color: black;
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
}

.block {margin-bottom: 10px;}
var buttons = document.querySelectorAll('.button');
var blocks = document.querySelectorAll('.block');

var hideBlocks = function(el) {
    el.forEach(function(el) {
        el.style.display = 'none';
  });
};

hideBlocks(blocks);
buttons.forEach(function(el, index) {
	el.onclick = function(e) {
  	e.preventDefault();
  	hideBlocks(blocks);
    blocks[index].style.display = 'block';
  };
});

 

Edited by DivMan
Link to comment
Share on other sites
viliksar Explorer

viliksar

Posted
  • Author
Posted (edited)
23 минуты назад, DivMan сказал:

Что по другому?

Bootstrap подключил к ворд пресс, но внешний вид отображается по другому

ориг

пример

 

скажите чего не хватает?

Edited by viliksar
Link to comment
Share on other sites
Даниил Виттманн Explorer

Даниил Виттманн

Posted
Posted
33 минуты назад, viliksar сказал:

Bootstrap подключил к ворд пресс, но внешний вид отображается по другому

ориг

пример

 

скажите чего не хватает?

http://bootstrap-3.ru/components.php#list-group-custom-content Если собрался пользоваться bootstrap`ом - учи css стили. И версию правильную устанавливай. А тут спойлер 

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept