Перейти к содержимому


Спойлер На Контент-Странице

Автор a_podarkov, 15 авг. 2013 19:32

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 50

#1 a_podarkov

a_podarkov

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 74 сообщений

Отправлено 15 Август 2013 - 19:32

Можно ли в Контент-странице использовать spoiler, чтоб скрыть описание пунктов на странице, оставить только названия самих пунктов ? http://ateljepodarkov.ru/

#2 sengun

sengun

    Активный участник

  • Модератоpы
  • 1 139 сообщений
  • ГородНижний Новгород

Отправлено 15 Август 2013 - 19:42

Просмотр сообщенияa_podarkov (15 Август 2013 - 19:32) писал:

Можно ли в Контент-странице использовать spoiler, чтоб скрыть описание пунктов на странице, оставить только названия самих пунктов ? http://ateljepodarkov.ru/
Можно, для этого воспользуйтесь структурой типа 
<details>
<summary>Текст</summary>
<p>XXXXXX XXXXXXX XXXXXXX</p>
</details>
Где между <summary> и </summary> текст, отображаемый при закрытом спойлере, а все, что между </summary> и </details> отображается в области открытого спойлера.

Этот тег работает только в chrome.
Видимо, лучше использовать такой вариант:
<div onclick="$('#spoiler1').toggle(); return(false);" style="cursor: pointer;">
<p><strong>текст</strong></p>
</div>
<div id="spoiler1" style="display: none;">
<p>текст при нажатии</p>
</div>

Сообщение отредактировал sengun: 15 Август 2013 - 19:51

#3 a_podarkov

a_podarkov

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 74 сообщений

Отправлено 15 Август 2013 - 20:03

Просмотр сообщенияsengun (15 Август 2013 - 19:42) писал:

Можно, для этого воспользуйтесь структурой типа 
<details>
<summary>Текст</summary>
<p>XXXXXX XXXXXXX XXXXXXX</p>
</details>
Где между <summary> и </summary> текст, отображаемый при закрытом спойлере, а все, что между </summary> и </details> отображается в области открытого спойлера.

Этот тег работает только в chrome.
Видимо, лучше использовать такой вариант:
<div onclick="$('#spoiler1').toggle(); return(false);" style="cursor: pointer;">
<p><strong>текст</strong></p>
</div>
<div id="spoiler1" style="display: none;">
<p>текст при нажатии</p>
</div>
Спасибо!
По умолчанию спойлеры всегда открыты??? У меня так.
И работает это только в Хроме.

#4 sengun

sengun

    Активный участник

  • Модератоpы
  • 1 139 сообщений
  • ГородНижний Новгород

Отправлено 15 Август 2013 - 20:14

Просмотр сообщенияa_podarkov (15 Август 2013 - 20:03) писал:

Спасибо!
По умолчанию спойлеры всегда открыты??? У меня так.
И работает это только в Хроме.
Я изменил предыдущее сообщение. Действительно, тег <summary> работает только в хроме. Попробуйте второй предложенный вариант
<div onclick="$('#spoiler1').toggle(); return(false);" style="cursor: pointer;">
<p><strong>текст</strong></p>
</div>
<div id="spoiler1" style="display: none;">
<p>текст при нажатии</p>
</div>

#5 a_podarkov

a_podarkov

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 74 сообщений

Отправлено 16 Август 2013 - 10:24

Спасибо! Все получилось, только вы забыли предупредить, что нужно менять цифру для следующих пунктов после каждого spoiler

#6 denisSemenets

denisSemenets

    Пользователь

  • Пользователи
  • PipPip
  • 25 сообщений

Отправлено 28 Февраль 2014 - 06:11

а в какое место вставлять этот тег?
<div onclick="$('#spoiler1').toggle(); return(false);" style="cursor: pointer;">
<p><strong>текст</strong></p>
</div>
<div id="spoiler1" style="display: none;">
<p>текст при нажатии</p>
</div>

#7 Taisia

Taisia

    Активный участник

  • Модератоpы
  • 1 289 сообщений

Отправлено 28 Февраль 2014 - 07:22

В то место где вы хотите что бы был спойлер.
для того что бы мы могли более детально вам ответить вам нужно сказать где именно на вашей странице вы хотите спрятать текст ? (прикрепите скриншот)

#8 Ser

Ser

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 103 сообщений

Отправлено 25 Март 2014 - 07:28

Народ подскажите куда вставлять эти кода для скрытия описания на странице каталога, надо скрывать текст описания в каталоге??

Прикрепленные изображения

  • Каталог.jpg

#9 Castiel

Castiel

    Активный участник

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 25 Март 2014 - 08:20

Просмотр сообщенияSer (25 Март 2014 - 07:28) писал:

Народ подскажите куда вставлять эти кода для скрытия описания на странице каталога, надо скрывать текст описания в каталоге??

Здравствуйте, редактируем шаблон Товары
Находим
  {% IF CATEGORY_DESCRIPTION || CATEGORY_SEO_DESCRIPTION_SHORT || CATEGORY_SEO_DESCRIPTION_LARGE %}
		<div class="box htmlDataBlock">
		  <div onclick="$('#spoiler1').toggle(); return(false);" style="cursor: pointer;">
	  <p><strong>Описание каталога</strong></p>
		</div>
		<div id="spoiler1" style="display: none;">
		<p>Показать описание</p>
	   </div>
		 <div class="box-content">
				  {% IF CATEGORY_DESCRIPTION %}
		  {CATEGORY_DESCRIPTION}
		{% ENDIF %}
	  
	   
		<!-- Короткое SEO описание категории -->
		{% IF CATEGORY_SEO_DESCRIPTION_SHORT %}
		  {CATEGORY_SEO_DESCRIPTION_SHORT}
		{% ENDIF %}
	   
		{% IF CATEGORY_SEO_DESCRIPTION_LARGE %}
		  {CATEGORY_SEO_DESCRIPTION_LARGE}
		{% ENDIF %}
	  </div>
	</div>
  {% ENDIF %}

Заменяем на
<div onclick="$('#spoiler1').toggle(); return(false);" style="cursor: pointer;" >
	<p class="product-filter"><strong>Описание каталога</strong></p>
  </div>
  <div id="spoiler1" style="display: none;">
  {% IF CATEGORY_DESCRIPTION || CATEGORY_SEO_DESCRIPTION_SHORT || CATEGORY_SEO_DESCRIPTION_LARGE %}
		<div class="box htmlDataBlock">
		  <div onclick="$('#spoiler1').toggle(); return(false);" style="cursor: pointer;">
	  <p><strong>Описание каталога</strong></p>
		</div>
		<div id="spoiler1" style="display: none;">
		<p>Показать описание</p>
	   </div>
		 <div class="box-content">
				  {% IF CATEGORY_DESCRIPTION %}
		  {CATEGORY_DESCRIPTION}
		{% ENDIF %}
	  
	   
		<!-- Короткое SEO описание категории -->
		{% IF CATEGORY_SEO_DESCRIPTION_SHORT %}
		  {CATEGORY_SEO_DESCRIPTION_SHORT}
		{% ENDIF %}
	   
		{% IF CATEGORY_SEO_DESCRIPTION_LARGE %}
		  {CATEGORY_SEO_DESCRIPTION_LARGE}
		{% ENDIF %}
	  </div>
	</div>
  {% ENDIF %}
  </div>

#10 Ser

Ser

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 103 сообщений

Отправлено 25 Март 2014 - 20:48

О Супер, спасибо.

Еще поправить надо, выделение и повторяющийся спойлер убрать, все на рисунке написал, подскажите.

Прикрепленные изображения

  • Споллер.jpg

#11 daria_dnk

daria_dnk

    Активный участник

  • Модератоpы
  • 482 сообщений

Отправлено 25 Март 2014 - 22:56

Просмотр сообщенияSer (25 Март 2014 - 20:48) писал:

О Супер, спасибо.

Еще поправить надо, выделение и повторяющийся спойлер убрать, все на рисунке написал, подскажите.
Добрый день!
1) в шаблоне main.css добавьте строки
.product-filter-new {padding:15px 10px 15px 10px;background-color:#ffffff;-webkit-border-radius: 5px;-moz-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;border-bottom:4px solid #e1e1e1;margin-bottom:15px;box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);-webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);*border: solid 1px #e1e1e1;border: solid 1px #e1e1e1\0/;float: left;width: 97%;}
.product-filter-new :hover {color:#ff0551;background-color: #EDF17D;padding: 10px 28px 10px 20px;}
В шаблоне Товары замените строчку
<p class="product-filter"><strong>Характеристика ткани</strong></p>
на
<p class="product-filter-new"><strong>Характеристика ткани {CATEGORY_NAME}</strong></p>
2)  В шаблоне Товары замените блок 
<div onclick="$('#spoiler1').toggle(); return(false);" style="cursor: pointer;">
		 <p><strong>Описание каталога</strong></p>
			 </div>
			 <div id="spoiler1" style="display: none;">
			 <p>Показать описание</p>
		 </div>
на
<div onclick="$('#spoiler1').toggle(); return(false);" style="cursor: pointer;">
		 <p><strong>&nbsp</strong></p>
			 </div>

в файле main.css замените строку
#content .box .box-content {border-bottom:4px solid #e1e1e1;box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);-webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1); padding:20px 10px;background-color:#ffffff;-webkit-border-radius: 5px;-moz-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;margin-bottom: 5px;*border: solid 1px #e1e1e1;border: solid 1px #e1e1e1\0/;position: relative;}
на
#content .box .box-content {margin-top: 50px; border-bottom:4px solid #e1e1e1;box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);-webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1); padding:20px 10px;background-color:#ffffff;-webkit-border-radius: 5px;-moz-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;margin-bottom: 5px;*border: solid 1px #e1e1e1;border: solid 1px #e1e1e1\0/;position: relative;}

#12 Ser

Ser

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 103 сообщений

Отправлено 25 Март 2014 - 23:34

Просмотр сообщенияdaria_dnk (25 Март 2014 - 22:56) писал:

Добрый день!
1) в шаблоне main.css добавьте строки
.product-filter-new {padding:15px 10px 15px 10px;background-color:#ffffff;-webkit-border-radius: 5px;-moz-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;border-bottom:4px solid #e1e1e1;margin-bottom:15px;box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);-webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);*border: solid 1px #e1e1e1;border: solid 1px #e1e1e1\0/;float: left;width: 97%;}
.product-filter-new :hover {color:#ff0551;background-color: #EDF17D;padding: 10px 28px 10px 20px;}
В шаблоне Товары замените строчку
<p class="product-filter"><strong>Характеристика ткани</strong></p>
на
<p class="product-filter-new"><strong>Характеристика ткани {CATEGORY_NAME}</strong></p>
2)  В шаблоне Товары замените блок 
<div onclick="$('#spoiler1').toggle(); return(false);" style="cursor: pointer;">
		 <p><strong>Описание каталога</strong></p>
			 </div>
			 <div id="spoiler1" style="display: none;">
			 <p>Показать описание</p>
		 </div>
на
<div onclick="$('#spoiler1').toggle(); return(false);" style="cursor: pointer;">
		 <p><strong>&nbsp</strong></p>
			 </div>

в файле main.css замените строку
#content .box .box-content {border-bottom:4px solid #e1e1e1;box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);-webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1); padding:20px 10px;background-color:#ffffff;-webkit-border-radius: 5px;-moz-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;margin-bottom: 5px;*border: solid 1px #e1e1e1;border: solid 1px #e1e1e1\0/;position: relative;}
на
#content .box .box-content {margin-top: 50px; border-bottom:4px solid #e1e1e1;box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);-webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1); padding:20px 10px;background-color:#ffffff;-webkit-border-radius: 5px;-moz-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;margin-bottom: 5px;*border: solid 1px #e1e1e1;border: solid 1px #e1e1e1\0/;position: relative;}



Супер Спасибо!!!

#13 shopyuliya

shopyuliya

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 90 сообщений

Отправлено 18 Февраль 2015 - 15:03

Здравствуйте. Разместила спойлер на странице Оплата.
Но что-то не выходит у меня. Получается один способ оплаты под спойлером, а второй открытый и не сворачивается.
И еще в первом варианте оплаты, ссылки которые вели на определенные страницы, теперь не работают, хотя судя по коду, они прописаны.
Помогите пожалуйста исправить.

#14 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 21 Февраль 2015 - 03:48

Если вы хотите реализовать два и более спойлеров необходимо дублировать блоки, пример:
<div onclick="$('#spoiler1').toggle(); return(false);">
Заголовок 1
</div>
<div id="spoiler1" style="display: none;">
Показать описание 1
</div>

<div onclick="$('#spoiler2').toggle(); return(false);">
Заголовок 2
</div>
<div id="spoiler2" style="display: none;">
Показать описание 2
</div>


<div onclick="$('#spoiler3').toggle(); return(false);">
Заголовок 3
</div>
<div id="spoiler3" style="display: none;">
Показать описание 3
</div>

#15 shopyuliya

shopyuliya

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 90 сообщений

Отправлено 21 Февраль 2015 - 10:10

Просмотр сообщенияVaccina (21 Февраль 2015 - 03:48) писал:

Если вы хотите реализовать два и более спойлеров необходимо дублировать блоки, пример:
<div onclick="$('#spoiler1').toggle(); return(false);">
Заголовок 1
</div>
<div id="spoiler1" style="display: none;">
Показать описание 1
</div>

<div onclick="$('#spoiler2').toggle(); return(false);">
Заголовок 2
</div>
<div id="spoiler2" style="display: none;">
Показать описание 2
</div>


<div onclick="$('#spoiler3').toggle(); return(false);">
Заголовок 3
</div>
<div id="spoiler3" style="display: none;">
Показать описание 3
</div>
большое спасибо, помогло.

#16 Smailer

Smailer

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 661 сообщений
  • ГородВолгоград

Отправлено 19 Январь 2016 - 04:26

Так раз на эту тему ссылаются то в дополнение..
Как сделать спойлер подобного вида:

Вот ещё хороший кнопочный вариант

<div class="spoil">

<div class="smallfont"><input type="button" value="Нажмите что бы открыть или закрыть спойлер" class="input-button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Свернуть'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Текст спойлера'; }"/>
</div>

<div class="alt2">

<div style="display: none;">
Текст внутри спойлера
</div>

</div>

</div>
-------
css



alt2{ margin: 0px;  padding: 6px;  border: 1px inset;}
smallfont{margin-bottom:2px;}
spoil{margin:10px; margin-top:5px;}

#17 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 19 Январь 2016 - 05:01

Перефразируйте пожалуйста вопрос, так как немного не понятно в чем возникают затруднения, ведь примеры выше готовых решений и достаточно тексты изменить.

#18 Smailer

Smailer

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 661 сообщений
  • ГородВолгоград

Отправлено 20 Январь 2016 - 02:19

Просмотр сообщенияVaccina (19 Январь 2016 - 05:01) писал:

Перефразируйте пожалуйста вопрос, так как немного не понятно в чем возникают затруднения, ведь примеры выше готовых решений и достаточно тексты изменить.

Как сделать спойлер подобного вида:
http://saytum.ru/pro...nie_sajtov_ceny

Изображение

Взято с форума
http://www.cyberforu...read558251.html
и там есть где то ответ но я запутался в комментариях

#19 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 20 Январь 2016 - 06:45

По сути, что на скриншоте достигается стилями CSS, поэтому можно брать основу спойлера на форуме или если по вашей ссылке пример брать:
<style>
div.cli {display:none;margin-left:20px;}
div.clion {display:block;padding:5px;}
</style>
<script type="text/javascript">
   
$(document).ready(function(){
	$('a.cli').click(function(){
		if($(this).parent().next('div').hasClass("clion")){
			$('div.cli').removeClass("clion");
		}
		else{
		$('div.cli').removeClass("clion");
		$(this).parent().next('div').addClass("clion");
		}
	});

});
</script>
<p><a href="javascript:void(0);" class="cli">Маршрут</a></p>

<div class="cli">
<p> Возможность отследить на карте маршрут движения автомобиля позволит вам оценить оптимальность маршрута грузоперевозчика, предотвратить "левые" рейсы, сократить простои и пробег автомобилей.</p>
</div>

<p><a href="javascript:void(0);" class="cli">Маршрут2</a></p>

<div class="cli">
<p> Возможность отследить на карте маршрут движения автомобиля позволит вам оценить оптимальность маршрута грузоперевозчика, предотвратить "левые" рейсы, сократить простои и пробег автомобилей.</p>
</div>

А остальное достигнуть уже стилями, можно расположить данный блок или через "источник" в описании страницы или в шаблоне Страница следующим образом:
{% IF PAGE_NAME= Заголовок страницы %}
<style>
div.cli {display:none;margin-left:20px;}
div.clion {display:block;padding:5px;}
</style>
<script type="text/javascript">
   
$(document).ready(function(){
	$('a.cli').click(function(){
		if($(this).parent().next('div').hasClass("clion")){
			$('div.cli').removeClass("clion");
		}
		else{
		$('div.cli').removeClass("clion");
		$(this).parent().next('div').addClass("clion");
		}
	});

});
</script>
<p><a href="javascript:void(0);" class="cli">Маршрут</a></p>

<div class="cli">
<p> Возможность отследить на карте маршрут движения автомобиля позволит вам оценить оптимальность маршрута грузоперевозчика, предотвратить "левые" рейсы, сократить простои и пробег автомобилей.</p>
</div>

<p><a href="javascript:void(0);" class="cli">Маршрут2</a></p>

<div class="cli">
<p> Возможность отследить на карте маршрут движения автомобиля позволит вам оценить оптимальность маршрута грузоперевозчика, предотвратить "левые" рейсы, сократить простои и пробег автомобилей.</p>
</div>
{% ENDIF %}

То есть добавив условие, чтобы табы отображались на конкретной странице.  После его установки, укажите пожалуйста url на нее, чтобы помогли по стилизации(можно без указания домена).

#20 Smailer

Smailer

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 661 сообщений
  • ГородВолгоград

Отправлено 20 Январь 2016 - 07:30

То-есть так: ?

<style>
div.cli {display:none;margin-left:20px;}
div.clion {display:block;padding:5px;}
</style>
<script type="text/javascript">

$(document).ready(function(){
$('a.cli').click(function(){
if($(this).parent().next('div').hasClass("clion")){
$('div.cli').removeClass("clion");
}
else{
$('div.cli').removeClass("clion");
$(this).parent().next('div').addClass("clion");
}
});

});
</script>
<p><a href="javascript:void(0);" class="cli">Маршрут</a></p>

<div class="cli">
<p> Возможность отследить на карте маршрут движения автомобиля позволит вам оценить оптимальность маршрута грузоперевозчика, предотвратить "левые" рейсы, сократить простои и пробег автомобилей.</p>
</div>

<p><a href="javascript:void(0);" class="cli">Маршрут2</a></p>

<div class="cli">
<p> Возможность отследить на карте маршрут движения автомобиля позволит вам оценить оптимальность маршрута грузоперевозчика, предотвратить "левые" рейсы, сократить простои и пробег автомобилей.</p>
</div>

Это мы кидаем в main.css


А это мы кидаем или в источник или в шаблоны > HTML

{% IF PAGE_NAME= Заголовок страницы %}
<style>
div.cli {display:none;margin-left:20px;}
div.clion {display:block;padding:5px;}
</style>
<script type="text/javascript">

$(document).ready(function(){
$('a.cli').click(function(){
if($(this).parent().next('div').hasClass("clion")){
$('div.cli').removeClass("clion");
}
else{
$('div.cli').removeClass("clion");
$(this).parent().next('div').addClass("clion");
}
});

});
</script>
<p><a href="javascript:void(0);" class="cli">Маршрут</a></p>

<div class="cli">
<p> Возможность отследить на карте маршрут движения автомобиля позволит вам оценить оптимальность маршрута грузоперевозчика, предотвратить "левые" рейсы, сократить простои и пробег автомобилей.</p>
</div>

<p><a href="javascript:void(0);" class="cli">Маршрут2</a></p>

<div class="cli">
<p> Возможность отследить на карте маршрут движения автомобиля позволит вам оценить оптимальность маршрута грузоперевозчика, предотвратить "левые" рейсы, сократить простои и пробег автомобилей.</p>
</div>
{% ENDIF %}

Но если так, то у меня какая то белиберда получается)
"После его установки, укажите пожалуйста url" - тут я не очень понял какую ссылку указывать если посути все находиться на тойже странице. или вы имели ввиду якорь?

Можете показать как это должно выглядеть что бы в итоге мы получили

Изображение
Обратно в Другое


Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Пластик
  5. → Другое
  6. Privacy Policy