Сообщений в теме: 4

[Shiftea]

http://ladoors.ru/page/aristoinfo в конце страницы вы увидите фразу "Вертикальная рамка Aristo" при нажатии на неё открывается скрытый текст.

Теперь вопросы:
1) При открывании скрытого текста появляется кликабельное слово "скрыть" которое собственно и скрывает текст обратно, а можно ли продублировать его функцию и на самом названии "Вертикальная рамка Aristo"? Т.е. мы открываем скрытый текст через "Вертикальная рамка Aristo" и что б закрывали тоже "Вертикальная рамка Aristo" этим.
2) Будет 6 таких скрытых текстов на одной странице и возможно ли сделать так... допустим открываем первый скрытый текст, прочли его и нам требуется открыть второй ( или третий не важно) и при открывании второго скрытого текста, что бы первый (открытый скрытый текст) автоматически закрывался (в первоначальный вид возвращался"?
3) Вертикальныя рамка Aristo изначально настроена на зеленый цвет, как сделать так, что бы стиль после открытия и закрытия не менялся на стандартный черный?
Огромное спасибо за ответ как всегда =D

[sengun]

Shiftea (17 Январь 2014 - 14:46) писал:

http://ladoors.ru/page/aristoinfo в конце страницы вы увидите фразу "Вертикальная рамка Aristo" при нажатии на неё открывается скрытый текст.

Теперь вопросы:
1) При открывании скрытого текста появляется кликабельное слово "скрыть" которое собственно и скрывает текст обратно, а можно ли продублировать его функцию и на самом названии "Вертикальная рамка Aristo"? Т.е. мы открываем скрытый текст через "Вертикальная рамка Aristo" и что б закрывали тоже "Вертикальная рамка Aristo" этим.
2) Будет 6 таких скрытых текстов на одной странице и возможно ли сделать так... допустим открываем первый скрытый текст, прочли его и нам требуется открыть второй ( или третий не важно) и при открывании второго скрытого текста, что бы первый (открытый скрытый текст) автоматически закрывался (в первоначальный вид возвращался"?
3) Вертикальныя рамка Aristo изначально настроена на зеленый цвет, как сделать так, что бы стиль после открытия и закрытия не менялся на стандартный черный?
Огромное спасибо за ответ как всегда =D

Здравствуйте.
Попробуем решить все три вопроса разом.
Если вы откроете страницу в админке, на которой расположен этот спойлер (данная конструкция так называется) и в поле "Описание" нажмете кнопку "Источник", то сможете найти код спойлера:

<div id="grad_text">
<p>Вертикальная рамка Aristo</p>
<p><img alt="" src="http://st.ladoors.ru/2/936/993/railUpper.png" style="width: 132px; height: 131px;" /></p>
</div>
<div id="grad_bg">&nbsp;</div>
<div id="grad_but"><span style="color:#00cc33;"><em><span style="font-size:18px;">Вертикальная рамка Aristo</span></em></span></div>
<style type="text/css">#grad_text {
height: 0px;/* высота блока с текстом*/
overflow: hidden; }
#grad_bg {
position: relative;
height: 100px;
margin-top: -100px;
background: -moz-linear-gradient(rgba(255,255,255,0), #fff);
z-index: 2;
}
#grad_but { cursor: pointer; }
</style>
<script>
$(document).ready(function(){
$('#grad_but').click(function(){
if ($(this).text() == "Свернуть") {
$(this).text("Вертикальная рамка Aristo");
$('#grad_bg').css('display','block');
$('#grad_text').css('height', '0px');
}
else {
$(this).text("Свернуть");
$('#grad_bg').css('display','none');
$('#grad_text').css('height', 'auto');
}
});
});
</script>

Его надо будет удалить.
На его место будем вставлять только блоки с текстом. Стили и скрипты соответственно раскидаем по своим местам (main.css и main.js).
На примере вертикальной рамки Aristo, блок кода текста будет таким:

<div class="grad_but" onclick="spoiler('1');">
<p style="color:#00cc33; font-size:18px;">Вертикальная рамка Aristo</p>
</div>
<div id="grad_text1" class="hidden">
<p>
<img alt="" src="http://st.ladoors.ru/2/936/993/railUpper.png" style="width: 132px; height: 131px;" />
</p>
<p class="tog">
Свернуть
</p>
</div>

Если у вас будет 6 спойлеров, то таких блоков должно быть, соответственно 6. В этом коде в первой строке

div class="grad_but" onclick="spoiler('1');">

указывается на то, что при нажатии на этот текст скрываться/появляться будет блок с идентификатором grad_text1, который указан в строке 4

<div id="grad_text1" class="hidden">

Строка

<p style="color:#00cc33; font-size:18px;">Вертикальная рамка Aristo</p>

это текст, на который надо нажимать.
Далее код

<p>
<img alt="" src="http://st.ladoors.ru/2/936/993/railUpper.png" style="width: 132px; height: 131px;" />
</p>

уникален для каждого блока, это то, что выводится и скрывается.
Ну и дописка

<p class="tog">
Свернуть
</p>

это кнопка "Свернуть" в конце каждого такого спойлера.

Пример кода для 2х спойлеров:

<div class="grad_but" onclick="spoiler('1');">
<p style="color:#00cc33; font-size:18px;">Вертикальная рамка Aristo</p>
</div>
<div id="grad_text1" class="hidden">
<p>
<img alt="" src="http://st.ladoors.ru/2/936/993/railUpper.png" style="width: 132px; height: 131px;" />
</p>
<p class="tog">
Свернуть
</p>
</div>

<div class="grad_but" onclick="spoiler('2');">
<p style="color:#00cc33; font-size:18px;">Еще одна вертикальная рамка Aristo</p>
</div>
<div id="grad_text2" class="hidden">
<p>
<img alt="" src="ссылка на другую картинку" style="width: 132px; height: 131px;" />
<div>Может здесь еще текст будет</div>
</p>
<p class="tog">
Свернуть
</p>
</div>

Думаю, логика понятна.

Осталось добавить в конец main.css такие стили

.hidden {
display: none;
}
.tog, .grad_but { cursor: pointer; }

А в конец main.js такой код

function spoiler (textId) {
for (i = 1; i <= 6; i++) {
if (i != textId)
	 $('#grad_text'+i).css('display', 'none');
}
$('#grad_text'+textId).toggle();
}
$(document).ready(function(){
$('.tog').click(function(){
$(this).parent().toggle();
})
})

Здесь в строке

for (i = 1; i <= 6; i++) {

6 - количество спойлеров.

[Shiftea]

Огромнешее спасибо!!!

[Serg83]

помогите разобраться....
сделал сначала ссылки для разворота на название полей и даже все работало.

переделал на "Подробнее" в каждом пункте и теперь раскрывается только первый блок из 4-х... пробовал "подробнее" по разному называть в разных пунктах доставки, не помогло...

аще  не понимаю, почему так...

[Сake]

Вы можете использовать следующую инструкцию для реализации спойлеров - в ваш файл стилей css добавьте код

.spoiler .toggle {
  display: none;
}

далее в конец файла main.js добавьте код

$(function() {
  $('.spoiler a[href="#"]').click(function() {
	$(this).closest('.spoiler').children('.toggle').slideToggle();
	return(false);
  });
});

и в любом шаблоне или описании страницы используйте каркас html кода

<div class="spoiler">
  <a href="#">Текст подробнее...</a>
  <div class="toggle">Текст отображаемый</div>
</div>

или так

<div class="spoiler">
  <span>Текст <a href="#">Подробнее...</a></span>
  <div class="toggle">Текст отображаемый</div>
</div>