Спойлер На Контент-Странице
#1
Отправлено 15 Август 2013 - 19:32
#2
Отправлено 15 Август 2013 - 19:42
a_podarkov (15 Август 2013 - 19:32) писал:
<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
Отправлено 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
Отправлено 15 Август 2013 - 20:14
a_podarkov (15 Август 2013 - 20:03) писал:
По умолчанию спойлеры всегда открыты??? У меня так.
И работает это только в Хроме.
<div onclick="$('#spoiler1').toggle(); return(false);" style="cursor: pointer;"> <p><strong>текст</strong></p> </div> <div id="spoiler1" style="display: none;"> <p>текст при нажатии</p> </div>
#5
Отправлено 16 Август 2013 - 10:24
#6
Отправлено 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
Отправлено 28 Февраль 2014 - 07:22
для того что бы мы могли более детально вам ответить вам нужно сказать где именно на вашей странице вы хотите спрятать текст ? (прикрепите скриншот)
#9
Отправлено 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>
#11
Отправлено 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> </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
Отправлено 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> </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
Отправлено 18 Февраль 2015 - 15:03
Но что-то не выходит у меня. Получается один способ оплаты под спойлером, а второй открытый и не сворачивается.
И еще в первом варианте оплаты, ссылки которые вели на определенные страницы, теперь не работают, хотя судя по коду, они прописаны.
Помогите пожалуйста исправить.
#14
Отправлено 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
Отправлено 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
Отправлено 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
Отправлено 19 Январь 2016 - 05:01
#18
Отправлено 20 Январь 2016 - 02:19
Vaccina (19 Январь 2016 - 05:01) писал:
Как сделать спойлер подобного вида:
http://saytum.ru/pro...nie_sajtov_ceny
Взято с форума
http://www.cyberforu...read558251.html
и там есть где то ответ но я запутался в комментариях
#19
Отправлено 20 Январь 2016 - 06:45
<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
Отправлено 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 анонимных