Создать ответ 
Собственный спойлер для сайта
Автор Сообщение
7Lexus Не на форуме
Старший сержант
*

Сообщений: 45
У нас с: Aug 2012
Сообщение: #31
RE: Собственный спойлер для сайта
Здравствуйте. Это опять я )
Вот нарыл такой спойлер

Код:
<style>
body {font-family:verdana;}
.spoiler-wrap{
background: none repeat scroll 0 0 #E9E9E6;
border-color: #C3CBD1;
border-style: solid;
border-width: 2px 3px 3px 2px;
margin: 6px;
width: 90%;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;

}
.spoiler-head {
font-size: 11px;
line-height: 15px;
margin-left: 6px;
padding: 1px 14px 3px;
cursor: pointer;

}
.folded {
padding: 5px;
font-size: 14px;
font-weight: 600;
background: url("http://admshel.ru/includes/Scripts/plus.png") no-repeat scroll left center #d8e3e7 ;
display: block;
padding-left: 14px;
}
.unfolded {
padding: 5px;
font-size: 14px;
font-weight: 600;
background: url("http://admshel.ru/includes/Scripts/minus.png") no-repeat scroll left center #d8e3e7;
display: block;
padding-left: 14px;
}
.spoiler-body {
font-family:TimesNewRoman;
background: none repeat scroll 0 0 #F8FFF8;
border-top: 1px solid #C3CBD1;
padding: 10px;
line-height: 20px;
}
.link-text {
    padding: 1px 3px; /*Отступы внутри ссылки*/
    background-color: #d0f0ff; /*Цвет фона ссылки*/
font-family:Verdana;
text-decoration:none;
    font-size: 12px; /*Размер текста*/
    color: black; /*Цвет ссылки*/
    border-radius: 5px; /*Скругленные углы*/
    -webkit-border-radius: 5px; /*Скругленные углы*/
    -moz-border-radius: 5px;/*Скругленные углы*/
}

.link-text:hover {
cursor: pointer;
    background-color: #80c0ff; /*Цвет фона ссылки*/
color:black;
}
#note {
       background-color: #EEF;
       color: #4D4B4B;
          border: 1px solid #999999;
       border-radius: 10px 10px;
       -moz-border-radius: 10px 10px;
       -webkit-border-radius: 10px 10px;
       box-shadow: 2px 2px 3px #999;
      -webkit-box-shadow: 2px 2px 3px #999;
      -moz-box-shadow: 2px 2px 3px #999;
}
</style>

<script src="http://admshel.ru/includes/Scripts/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery('.spoiler-body').hide()
        jQuery('.spoiler-head').click(function(){
            jQuery(this).toggleClass("folded").toggleClass("unfolded").next().toggle()

        })
    })
</script>

<div class="spoiler-wrap">     
  <div class="spoiler-head folded"><span style="margin-left: 10px;">Формы справок о доходах</span></div>
    
  <div class="spoiler-body">Постановление Администрации от 24 сентября 2009 года № 408 <br> <a href="#" class="link-text" >СКАЧАТЬ - (документ Word 40 Кб)</a></div>
</div>
<div class="spoiler-wrap">     
  <div class="spoiler-head folded"><span style="margin-left: 10px;">Формы справок о доходах</span></div>
    
  <div class="spoiler-body">Постановление Администрации от 24 сентября 2009 года № 408 <br> <a href="#" class="link-text" >СКАЧАТЬ - (документ Word 40 Кб)</a></div>
</div>

Как тут сделать, чтобы было по принципу аккордеона? (открывая следующий спойлер, закрывается предыдущий)

Спасибо заранее!
18.04.2013 18:52:28
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #32
RE: Собственный спойлер для сайта
Чужой код конечно труднее править, но вроде что-то получилось:

Код:
<script type="text/javascript">
     jQuery(document).ready(function(){
         jQuery('.spoiler-body').hide()
         jQuery('.spoiler-head').click(function(){
             if (jQuery(this).hasClass("folded")) {
                 jQuery('.spoiler-head').addClass("folded").removeClass("unfolded").next().hide();
                 jQuery(this).removeClass("folded").addClass("unfolded").next().toggle();
                 }
             else jQuery('.spoiler-head').addClass("folded").removeClass("unfolded").next().hide();
         })
     })
</script>
19.04.2013 19:20:32
Найти все сообщения Цитировать это сообщение
7Lexus Не на форуме
Старший сержант
*

Сообщений: 45
У нас с: Aug 2012
Сообщение: #33
RE: Собственный спойлер для сайта
Потому что дело мастера боится!
Просто зашибись всё сделано!
20.04.2013 14:15:11
Найти все сообщения Цитировать это сообщение
nikkana Не на форуме
Рядовой
*

Сообщений: 2
У нас с: Jul 2013
Сообщение: #34
RE: Собственный спойлер для сайта
Здравствуйте! Нашла на вашем сайте ваш чудный спойлер для сайта. Скажите, а как сделать, чтобы если несколько спойлеров на странице - при открытии одного, остальные сворачивались?
Вы кому то в комментариях советовали, как я поняла, сделать так:
Код:
<script type="text/javascript">
function open_close(id_spol) {
$("div[id^='spoiler']").hide('normal');
var obj = "";
if (document.getElementById) obj = document.getElementById(id_spol).style;
else if (document.all) obj = document.all[id_spol];
else if (document.layers) obj = document.layers[id_spol];
else return 1;

if (obj.display == "") obj.display = "none";
else if (obj.display != "none") obj.display = "none";
else obj.display = "block";
}
</script>


но у меня открывается и закрывается только один спойлер, остальные не открываются вообще((

Вот полный код:

Код:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function open_close(id_spol) {
$("div[id^='spoiler']").hide('normal');
var obj = "";
if (document.getElementById) obj = document.getElementById(id_spol).style;
else if (document.all) obj = document.all[id_spol];
else if (document.layers) obj = document.layers[id_spol];
else return 1;

if (obj.display == "") obj.display = "none";
else if (obj.display != "none") obj.display = "none";
else obj.display = "block";
}
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
  <td>
   <div class="spoiler_style" onClick="open_close('spoiler1')"
       style="background:#e7e7e7; border: 1px solid #4874a3; border-radius:5px;">
   <b>Спойлер1</b> (кликните для показа/скрытия)
   </div>
  </td>
</tr>
<tr bgcolor="#ffffff">
  <td>
   <div id="spoiler1" style="display:none; background:#F7F7F7">
   Здесь содержится все то, что должен скрывать спойлер.<br>
   Под спойлером может содержаться не только текст, но и картинки,<br>
   таблицы и другие элементы.<br>
   <img src="image/img_1.png" alt="Изображение под спойлером" width="250">
   </div>
  </td>
</tr>
<tr>
  <td>
   <div class="spoiler_style" onClick="open_close('spoiler1')"
       style="background:#e7e7e7; border: 1px solid #4874a3; border-radius:5px;">
   <b>Спойлер2</b> (кликните для показа/скрытия)
   </div>
  </td>
</tr>
<tr bgcolor="#ffffff">
  <td>
   <div id="spoiler2" style="display:none; background:#F7F7F7">
   Здесь содержится все то, что должен скрывать спойлер.<br>
   Под спойлером может содержаться не только текст, но и картинки,<br>
   таблицы и другие элементы.<br>
   <img src="image/img_1.png" alt="Изображение под спойлером" width="250">
   </div>
  </td>
</tr>


<tr>
  <td>
   <div class="spoiler_style" onClick="open_close('spoiler1')"
       style="background:#e7e7e7; border: 1px solid #4874a3; border-radius:5px;">
   <b>Спойлер3</b> (кликните для показа/скрытия)
   </div>
  </td>
</tr>
<tr bgcolor="#ffffff">
  <td>
   <div id="spoiler3" style="display:none; background:#F7F7F7">
   Здесь содержится все то, что должен скрывать спойлер.<br>
   Под спойлером может содержаться не только текст, но и картинки,<br>
   таблицы и другие элементы.<br>
   <img src="image/img_1.png" alt="Изображение под спойлером" width="250">
   </div>
  </td>
</tr>
</table>
</body>
</html>


Подскажите, что поправить??
28.07.2013 10:38:47
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #35
RE: Собственный спойлер для сайта
Вы были не внимательны. Т.к. во втором комментарии к теме Создаем свой собственный спойлер для сайта было написано:

Цитата:В функции открытия второго спойлера необходимо заменить onClick="open_close('spoiler1')" на onClick="open_close('spoiler2')".
Так же второму спойлеру необходимо дать новое имя - id="spoiler2"

Вы забыли у второго и третьего спойлера заменить параметры функций на spoiler2 и spoiler3 соответственно.
28.07.2013 11:20:57
Найти все сообщения Цитировать это сообщение
nikkana Не на форуме
Рядовой
*

Сообщений: 2
У нас с: Jul 2013
Сообщение: #36
RE: Собственный спойлер для сайта
(28.07.2013 11:20:57)Admin писал(а):  Вы были не внимательны. Т.к. во втором комментарии к теме Создаем свой собственный спойлер для сайта было написано:

Цитата:В функции открытия второго спойлера необходимо заменить onClick="open_close('spoiler1')" на onClick="open_close('spoiler2')".
Так же второму спойлеру необходимо дать новое имя - id="spoiler2"

Вы забыли у второго и третьего спойлера заменить параметры функций на spoiler2 и spoiler3 соответственно.

Большое спасибо!
28.07.2013 12:39:10
Найти все сообщения Цитировать это сообщение
7Lexus Не на форуме
Старший сержант
*

Сообщений: 45
У нас с: Aug 2012
Сообщение: #37
RE: Собственный спойлер для сайта
Здравствуйте!
Опять я со своими заморочками.

Как сделать, чтобы Заголовок аккордеона не подстраивался под текст, а был именно заданной ширины?

Код:
Код:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
.tube {
background: #0e1E3E;
color: #fff;
border-left: 2px solid #C71585;
margin-left: 20px;
padding: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.bl {
text-decoration: none;
background: #007E3E;
color: yellow;
padding: 0 15 0 15;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
</style>
<script>
var show;
function hidetxt(type){
param=document.getElementById(type);
if(param.style.display == "none") {
if(show) show.style.display = "none";
param.style.display = "block";
show = param;
}else param.style.display = "none"
}
</script>

<div>
<a onclick="hidetxt('div1'); return false;" href="#" rel="nofollow" class="bl">ССылка 1</a>
<div style="display:none;" id="div1" class="tube">
Здесь много много текста 1 Здесь много много текста 1 Здесь много много текста 1 Здесь много много текста 1 Здесь много много текста 1 Здесь много много текста 1 Здесь много много текста 1 Здесь много много текста 1 Здесь много много текста 1 Здесь много много текста 1 Здесь много много текста 1 Здесь много много текста 1 </div>
</div>
<div>
<a onclick="hidetxt('div2'); return false;" href="#" rel="nofollow" class="bl">ССылка 2</a>
<div style="display:none;" id="div2" class="tube">
Здесь много много текста 2
</div>
</div>
<div>
<a onclick="hidetxt('div3'); return false;" href="#" rel="nofollow" class="bl">ССылка 3</a>
<div style="display:none;" id="div3" class="tube">
Здесь много много текста 3
</div>
</div>
<div>
<a onclick="hidetxt('div4'); return false;" href="#" rel="nofollow" class="bl">ССылка 4</a>
<div style="display:none;" id="div4" class="tube">
Здесь много много текста 4
</div>
</div>

Заранее спасибо.
И, возможно ли, без JS сделать заглавие открытого блока другим цветом?
Визуально тут - admshel-forum.ucoz.ru/publ/menu/1-1-0-2
05.08.2013 06:24:37
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #38
RE: Собственный спойлер для сайта
Если я правильно понял задачу, то в стиль .bl нужно добавить пару строк:
Код:
display: block;
width: 200px;

По поводу смены заглавия открытого блока, думаю, без JavaScript не обойтись.
05.08.2013 19:07:02
Найти все сообщения Цитировать это сообщение
7Lexus Не на форуме
Старший сержант
*

Сообщений: 45
У нас с: Aug 2012
Сообщение: #39
RE: Собственный спойлер для сайта
(05.08.2013 19:07:02)Admin писал(а):  По поводу смены заглавия открытого блока, думаю, без JavaScript не обойтись.

Ну так-то непринципиально... Спасибо за очередную подсказку.
06.08.2013 09:27:28
Найти все сообщения Цитировать это сообщение
Goozer Не на форуме
Рядовой
*

Сообщений: 2
У нас с: Nov 2013
Сообщение: #40
RE: Собственный спойлер для сайта
Здравствуйте. Есть проблема. Решил использовать Ваш скрипт. Постарался немного подправить код, чтоб менялось фоновое изображение в заглавии спойлера.
Т.е. «+» переходил в «-». Но никак не могу понять, как правильно написать, чтоб у раскрытого блока сразу стоял знак минус. Как изменить код?

Сейчас он такой: _http://jsfiddle.net/Fk3Vh/8/


Прошу прощения, не в той теме написал. Я про этот спойлер http://usefulscript.ru/spoiler_smooth_opening.php
(Последний раз сообщение было отредактировано 28.11.2013 в 14:32:34, отредактировал пользователь Goozer.)
28.11.2013 14:11:57
Найти все сообщения Цитировать это сообщение
Создать ответ 


Переход:


Пользователи просматривают эту тему: 1 Гость(ей)


LiveInternet
© Copyright 2011-2024 by UsefulScript.ru