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


Как Сделать Спойлер

Автор NewUser777, 30 июля 2014 10:09

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

#1 NewUser777

NewUser777

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

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

Отправлено 30 Июль 2014 - 10:09

Как изменить этот спойлер чтобы вместе текста "Нажмите на спойлер" была картинка?
<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>

#2 Castiel

Castiel

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

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

Отправлено 30 Июль 2014 - 10:44

Просмотр сообщенияNewUser777 (30 Июль 2014 - 10:09) писал:

Как изменить этот спойлер чтобы вместе текста "Нажмите на спойлер" была картинка?
<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>

Можно попробовать использовать такой код
<div><div><input name="spoiler" type="image" src="http://i42.tinypic.com/nmkz6w.jpg" 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.src = 'http://i40.tinypic.com/2m6347t.png'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.src = 'http://i42.tinypic.com/nmkz6w.jpg'; }">
</div>
<div style="margin: 0px; padding:0px;">
<div style="display: none;">
$1
</div>
</div>
</div>

i42.tinypic.com/nmkz6w.jpg  ссылка на картинку, замените на свою

#3 NewUser777

NewUser777

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

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

Отправлено 30 Июль 2014 - 10:47

Просмотр сообщенияCastiel (30 Июль 2014 - 10:44) писал:

Можно попробовать использовать такой код
<div><div><input name="spoiler" type="image" src="http://i42.tinypic.com/nmkz6w.jpg" 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.src = 'http://i40.tinypic.com/2m6347t.png'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.src = 'http://i42.tinypic.com/nmkz6w.jpg'; }">
</div>
<div style="margin: 0px; padding:0px;">
<div style="display: none;">
$1
</div>
</div>
</div>

i42.tinypic.com/nmkz6w.jpg  ссылка на картинку, замените на свою
спасибо большое!

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

#4 Vaccina

Vaccina

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

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

Отправлено 31 Июль 2014 - 03:24

попробуйте использовать иные спойлеры:
http://forum.storela...нтент-странице/
http://forum.storela...траницу-товара/
http://forum.storela...вающийся-текст/

#5 NewUser777

NewUser777

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

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

Отправлено 31 Июль 2014 - 09:47

Просмотр сообщенияVaccina (31 Июль 2014 - 03:24) писал:

попробуйте использовать иные спойлеры:
http://forum.storela...нтент-странице/
http://forum.storela...траницу-товара/
http://forum.storela...вающийся-текст/
сделал вот так но как сделать по центру не знаю. Пробовал через <center> но он работает только внутри спойлера.

Просмотр сообщенияNewUser777 (31 Июль 2014 - 09:44) писал:

сделал вот так но как сделать по центру не знаю. Пробовал через <center> но он работает только внутри спойлера.
код 
<center>
<div onclick="$('#spoiler1').toggle(); return(false);" style="cursor: pointer;">
<p><strong><img src="http://st.gadgets-mir.ru/8/1253/632/D0m0e4L661i0J275.jpg" /></strong></p>
</div>
<div id="spoiler1" style="display: none;">
<p>&nbsp;</p>
<div class="toggle selected"><iframe allowtransparency="true" frameborder="0" height="163" scrolling="no" src="https://money.yandex.ru/embed/shop.xml?account=41001770800503&amp;quickpay=shop&amp;writer=seller&amp;targets={ORDER_NUM}&amp;targets-hint=&amp;default-sum={ORDER_SUM}&amp;button-text=01" width="450"></iframe></div>
<p>&nbsp;</p>
</div>
&nbsp;
<div onclick="$('#spoiler2').toggle(); return(false);" style="cursor: pointer;">
<p><strong><img src="http://st.gadgets-mir.ru/7/1260/432/Qiwi_Logo.jpg" /></strong></p>
</div>
<div id="spoiler2" style="display: none;">
<p>&nbsp;</p>
<div class="toggle selected"><iframe allowtransparency="true" frameborder="0" scrolling="no" src="https://w.qiwi.com/order/external/create.action?comm=test&amp;txn_id=0000&amp;from=270867&amp;summ={ORDER_SUM}&amp;successUrl=http%3A%2F%2Ftest.ru%3Fcurrency=RUB&amp;to=77779743534" style="height: 680px;width: 465px;"></iframe></div>
<p>&nbsp;</p>
</div>
&nbsp;
<div onclick="$('#spoiler3').toggle(); return(false);" style="cursor: pointer;">
<p><strong><img src="http://st.gadgets-mir.ru/6/1260/434/WM_Logo.png" /></strong></p>
</div>
<div id="spoiler3" style="display: none;">
<p><strong><span style="color:#A52A2A;">Внимание!</span><br />
<br />
В связи с большими комиссиями системы WebMoney мы принимаем только ручные платежи. &nbsp;<span style="font-size:14px;"><cite><a href="http://marketone.storeland.ru/page/FAQ-webmoney" onclick="window.open(this.href, '', 'resizable=no,status=no,location=no,toolbar=no,menubar=no,fullscreen=no,scrollbars=no,dependent=no'); return false;"><strong>​&nbsp;</strong></a><strong><a href="http://marketone.storeland.ru/page/FAQ-webmoney" target="_blank">Как совершить ручной платеж.</a></strong></cite></span><br />
&nbsp;<br />
Кошелек магазина:</strong><br />
<strong><span style="color: rgb(0, 0, 255);"><span style="font-family: Verdana, Arial, 'sans-serif normal'; font-size: 12px; line-height: 18px;">R203773297914</span></span></strong><br />
<br />
<strong>Сумма к оплате:</strong> {ORDER_SUM} руб.</p>
<hr /><br />
<i><strong>Спасибо за понимание!</strong></i><br />
&nbsp;
<div>
<div style="text-align: center;"><strong style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 16px; vertical-align: baseline; color: rgb(0, 0, 0); font-family: Helvetica, Arial, sans-serif; line-height: 16px; text-align: center;"><em style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; background-color: transparent;"><a href="http://my.webmoney.ru/purses.aspx" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; background-color: transparent; color: rgb(0, 153, 204); text-decoration: none;" target="_blank">Перейти на сайт</a></em></strong></div>
<div>&nbsp;<a href="https://my.webmoney.ru/purses.aspx" target="_blank"><img alt="" src="http://st.storeland.net/6/1218/101/webmoney.jpg" style="width: 150px; height: 66px;" /></a></div>
</div>
</div>
<br />
<br />
<br />
&nbsp;<br />
&nbsp;
<p>&nbsp;</p>
</center>

#6 Castiel

Castiel

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

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

Отправлено 31 Июль 2014 - 09:51

Просмотр сообщенияNewUser777 (31 Июль 2014 - 09:47) писал:

сделал вот так но как сделать по центру не знаю. Пробовал через <center> но он работает только внутри спойлера.

код 
<center>
<div onclick="$('#spoiler1').toggle(); return(false);" style="cursor: pointer;">
<p><strong><img src="http://st.gadgets-mir.ru/8/1253/632/D0m0e4L661i0J275.jpg" /></strong></p>
</div>
<div id="spoiler1" style="display: none;">
<p> </p>
<div class="toggle selected"><iframe allowtransparency="true" frameborder="0" height="163" scrolling="no" src="https://money.yandex.ru/embed/shop.xml?account=41001770800503&amp;quickpay=shop&amp;writer=seller&amp;targets={ORDER_NUM}&amp;targets-hint=&amp;default-sum={ORDER_SUM}&amp;button-text=01" width="450"></iframe></div>
<p> </p>
</div>

<div onclick="$('#spoiler2').toggle(); return(false);" style="cursor: pointer;">
<p><strong><img src="http://st.gadgets-mir.ru/7/1260/432/Qiwi_Logo.jpg" /></strong></p>
</div>
<div id="spoiler2" style="display: none;">
<p> </p>
<div class="toggle selected"><iframe allowtransparency="true" frameborder="0" scrolling="no" src="https://w.qiwi.com/order/external/create.action?comm=test&amp;txn_id=0000&amp;from=270867&amp;summ={ORDER_SUM}&amp;successUrl=http%3A%2F%2Ftest.ru%3Fcurrency=RUB&amp;to=77779743534" style="height: 680px;width: 465px;"></iframe></div>
<p> </p>
</div>

<div onclick="$('#spoiler3').toggle(); return(false);" style="cursor: pointer;">
<p><strong><img src="http://st.gadgets-mir.ru/6/1260/434/WM_Logo.png" /></strong></p>
</div>
<div id="spoiler3" style="display: none;">
<p><strong><span style="color:#A52A2A;">Внимание!</span><br />
<br />
В связи с большими комиссиями системы WebMoney мы принимаем только ручные платежи. <span style="font-size:14px;"><cite><a href="http://marketone.storeland.ru/page/FAQ-webmoney" onclick="window.open(this.href, '', 'resizable=no,status=no,location=no,toolbar=no,menubar=no,fullscreen=no,scrollbars=no,dependent=no'); return false;"><strong>​ </strong></a><strong><a href="http://marketone.storeland.ru/page/FAQ-webmoney" target="_blank">Как совершить ручной платеж.</a></strong></cite></span><br />
<br />
Кошелек магазина:</strong><br />
<strong><span style="color: rgb(0, 0, 255);"><span style="font-family: Verdana, Arial, 'sans-serif normal'; font-size: 12px; line-height: 18px;">R203773297914</span></span></strong><br />
<br />
<strong>Сумма к оплате:</strong> {ORDER_SUM} руб.</p>
<hr /><br />
<i><strong>Спасибо за понимание!</strong></i><br />

<div>
<div style="text-align: center;"><strong style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 16px; vertical-align: baseline; color: rgb(0, 0, 0); font-family: Helvetica, Arial, sans-serif; line-height: 16px; text-align: center;"><em style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; background-color: transparent;"><a href="http://my.webmoney.ru/purses.aspx" style="margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: baseline; background-color: transparent; color: rgb(0, 153, 204); text-decoration: none;" target="_blank">Перейти на сайт</a></em></strong></div>
<div> <a href="https://my.webmoney.ru/purses.aspx" target="_blank"><img alt="" src="http://st.storeland.net/6/1218/101/webmoney.jpg" style="width: 150px; height: 66px;" /></a></div>
</div>
</div>
<br />
<br />
<br />
<br />

<p> </p>
</center>

Здравствуйте, в описании страницы вместо
<center>
Используйте
<div style="text-align: center;width: 680px;">

и в самом конце вместо
</center>
заменить на
</div>

Код в итоге
Скрытый текст

#7 NewUser777

NewUser777

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

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

Отправлено 31 Июль 2014 - 09:58

Спасибо большое за помощь!
Обратно в Общие вопросы


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

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

  1. Форум владельцев интернет-магазинов
  2. → Повышение продаж, продвижение
  3. → Общие вопросы
  4. Privacy Policy