Вход Регистрация
Скрипты для uKit 19.08.2017 26 4240
Спойлер для виджета "Текст"

Спойлер для виджета "Текст"

Максимальная информативность при ограниченном объёме текста — на сегодняшний день само собой разумеющееся требование к сайту, рекламирующему какую-либо продукцию. В конце концов, стену рекламного текста никто читать не будет.

Но как быть веб-дизайнеру, если без длинных текстов всё же нельзя обойтись? Совершенно очевидное решение — спрятать их под спойлеры! Вы можете озаглавить ваш текст так, чтобы дать читателю понять, какая информация в нём содержится. Если его эта информация не заинтересует, он попросту не станет открывать спойлер, и ему не придётся читать ненужный текст.

Пользователь, зайдя на сайт, будет видеть только подзаголовок вашего текста. При наведении на него мышкой курсор изменит вид. Только тогда, когда пользователь нажмёт на этот подзаголовок, он увидит полный текст, который вы спрятали под спойлер. При повторном нажатии на подзаголовок текст скроется обратно.

Этой возможности в uKit изначально нет, поэтому мы разработали специально для вас этот скрипт. Он легко встраивается на сайт, сделанный на основе конструктора uKit, и доступен в нескольких вариантах оформления. Мы уверены, что скрипт будет полезен для вас и ваших потенциальных клиентов.

 


Установка

1. Размещаем текст на вашем сайте. Вам необходимо разместить текст, при помощи виджета "Цитаты" (скриншот), верхнюю часть установить заголовок вашего спойлера, а ниже уже сам текст, который будет выпадать пример: скриншот.

2.Устанавливаем класс виджета. Вам нужно для каждого виджета задать свой собственный класс "s1, s2, s3" и так далее.
То есть у каждого виджета должен быть порядковый номер, пример: скриншот


3. Устанавливаем стилистику оформления будущего спойлера. Копируем ниже приведенный код: 
 

Код
<style>
  #body .ul-w-bloquote.ul-w-bloquote-design2 .ul-w-bloquote-text {
    padding: 10px 30px 0 30px;
}
  #body .ul-w-bloquote.ul-w-bloquote-design2 .ul-w-bloquote-author {
    padding: 20px 30px 32px 30px;
}
  #body .ul-w-bloquote.ul-w-bloquote-design2 .ul-w-bloquote-text:before {
    display: none;
  }
#body-fict .ul-w-bloquote-author {
    height: 0px!important;
    display: none;
}
#body-fict .ul-w-bloquote-author.note.simple_left_block {
    height: auto!important;
    display: block;
}
  #body-fict .ul-w-bloquote-author {
    -webkit-transition: height 0.3s ease, font-size 0.3s ease;
    -moz-transition: height 0.3s ease, font-size 0.3s ease;
    -ms-transition: height 0.3s ease, font-size 0.3s ease;
    -o-transition: height 0.3s ease, font-size 0.3s ease;
    transition: height 0.3s ease, font-size 0.3s ease;
}
  .ul-w-bloquote-custom-design1,
  .ul-w-bloquote-text {
    cursor: pointer;
}
  .ul-w-bloquote-design1 {
    background-color: white;
    margin-bottom: 10px;
    padding: 26px;
}
  #body .ul-w-bloquote.ul-w-bloquote-design1 .ul-w-bloquote-author p {
    color: black;
}
#body .ul-w-bloquote.ul-w-bloquote-design1 .ul-w-bloquote-text:before {
 display: none;
}
  #body.g-theme-site-2 #body-fict [data-theme-block*='"desktop":"g-theme-block-1"'] .ul-w-bloquote-design1:before {
 display: none;
}
  #body.g-theme-site-2 #body-fict [data-theme-block*='"desktop":"g-theme-block-1"'] .ul-w-bloquote-design1 .ul-w-bloquote-text:after, #body.g-theme-site-2 #body-fict [data-theme-block*='"desktop":"g-theme-block-1"'] .ul-w-bloquote-design1 .ul-w-bloquote-text:before {
 display: none;
}
  #body.g-theme-site-2 #body-fict [data-theme-block*='"desktop":"g-theme-block-1"'] .ul-w-bloquote-design1 {
    border-color: transparent !important;
}
#body .ul-w-bloquote.ul-w-bloquote-design1 .ul-w-bloquote-text p {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
    font-size: 20px;
}
  #body .ul-w-bloquote-design1 {
    margin-top: 0px;
}
  #body .ul-w-bloquote-design1 .ul-w-bloquote-text {
    padding-top: 0px;
    padding-bottom: 0px;
}
  .ul-w-bloquote-design1 {
    background-color: white;
    margin-bottom: 10px;
    padding: 10px;
}
  </style>

 

Перейдите в панель управления вашего сайта в раздел «Свой код» и установите эти стили. Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В <head>» и выберите необходимые страницы для показа. (скриншот). После чего, нажмите кнопочку "Сохранить"


4. Устанавливаем основной код. в этом же разделе добавляем второй код (скриншот):
 

Код
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $('.ul-w-bloquote-custom-design1.s1').on('click', function() {
  $('.ul-w-bloquote-custom-design1.s1 .ul-w-bloquote-author').toggleClass('simple_left_block');
});
  $('.ul-w-bloquote-custom-design1.s2').on('click', function() {
  $('.ul-w-bloquote-custom-design1.s2 .ul-w-bloquote-author').toggleClass('simple_left_block');
});  
  $('.ul-w-bloquote-custom-design1.s3').on('click', function() {
  $('.ul-w-bloquote-custom-design1.s3 .ul-w-bloquote-author').toggleClass('simple_left_block');
});  
  $('.ul-w-bloquote-custom-design1.s4').on('click', function() {
  $('.ul-w-bloquote-custom-design1.s4 .ul-w-bloquote-author').toggleClass('simple_left_block');
});  
  $('.ul-w-bloquote-custom-design1.s5').on('click', function() {
  $('.ul-w-bloquote-custom-design1.s5 .ul-w-bloquote-author').toggleClass('simple_left_block');
});  
  $('.ul-w-bloquote-custom-design1.s6').on('click', function() {
  $('.ul-w-bloquote-custom-design1.s6 .ul-w-bloquote-author').toggleClass('simple_left_block');
});  
  $('.ul-w-bloquote-custom-design1.s7').on('click', function() {
  $('.ul-w-bloquote-custom-design1.s7 .ul-w-bloquote-author').toggleClass('simple_left_block');
});  
  $('.ul-w-bloquote-custom-design1.s9').on('click', function() {
  $('.ul-w-bloquote-custom-design1.s9 .ul-w-bloquote-author').toggleClass('simple_left_block');
});  
  $('.ul-w-bloquote-custom-design1.s10').on('click', function() {
  $('.ul-w-bloquote-custom-design1.s10 .ul-w-bloquote-author').toggleClass('simple_left_block');
});  
  $('.ul-w-bloquote-custom-design1.s8').on('click', function() {
  $('.ul-w-bloquote-custom-design1.s8 .ul-w-bloquote-author').toggleClass('simple_left_block');
});  
  $('.ul-w-bloquote-custom-design1.s11').on('click', function() {
  $('.ul-w-bloquote-custom-design1.s11 .ul-w-bloquote-author').toggleClass('simple_left_block');
});  
  $('.ul-w-bloquote-custom-design1.s12').on('click', function() {
  $('.ul-w-bloquote-custom-design1.s12 .ul-w-bloquote-author').toggleClass('simple_left_block');
});  
  $('.ul-w-bloquote-custom-design1.s13').on('click', function() {
  $('.ul-w-bloquote-custom-design1.s13 .ul-w-bloquote-author').toggleClass('simple_left_block');
});  
  $('.ul-w-bloquote-custom-design1.s14').on('click', function() {
  $('.ul-w-bloquote-custom-design1.s14 .ul-w-bloquote-author').toggleClass('simple_left_block');
});  
  $('.ul-w-bloquote-custom-design1.s15').on('click', function() {
  $('.ul-w-bloquote-custom-design1.s15 .ul-w-bloquote-author').toggleClass('simple_left_block');
});  
  $('.ul-w-bloquote-custom-design1.s16').on('click', function() {
  $('.ul-w-bloquote-custom-design1.s16 .ul-w-bloquote-author').toggleClass('simple_left_block');
});  
  $('.ul-w-bloquote-custom-design1.s17').on('click', function() {
  $('.ul-w-bloquote-custom-design1.s17 .ul-w-bloquote-author').toggleClass('simple_left_block');
});  
  $('.ul-w-bloquote-custom-design1.s18').on('click', function() {
  $('.ul-w-bloquote-custom-design1.s18 .ul-w-bloquote-author').toggleClass('simple_left_block');
});  
  $('.ul-w-bloquote-custom-design1.s19').on('click', function() {
  $('.ul-w-bloquote-custom-design1.s19 .ul-w-bloquote-author').toggleClass('simple_left_block');
});
  $('.ul-w-bloquote-custom-design1.s20').on('click', function() {
  $('.ul-w-bloquote-custom-design1.s20 l-w-bloquote-author').toggleClass('simple_left_block');
});  
</script>


Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В конец <body>». (скриншот).
Сохраните код и опубликуйте ваш сайт.


Установить сторонний код на ваш сайт, вы можете на тарифе «Про». Ознакомиться с тарифом вы можете на следующей странице: blog-ru.ukit.com/updates/tariffs. Также отмечу, что вы можете обратиться в службу поддержки uKit за помощью в установке кода на тарифах «Премиум» и выше, через раздел «Помощь» (скриншот). 
Демо страница Написать автору статьи Донат автору
Похожие материалы:
Всего комментариев: 261 2 »
avatar
0 Спам
1
Спасибо за виджет. Возникли вопросы по установке:
1. Есть ли возможность применить его для определённого блока на странице?
2. При установке текста "Заголовок 4" Все буквы становятся прописными. Как сделать первые буквы прописными, остальные строчными?
avatar
0
2
1. Такой возможности в скрипте нет.
2. Вам нужно выделить необходимые слова и выбрать нужное оформление.
avatar
0 Спам
3
Не работает уже..
avatar
0
4
Этот скрипт обновлен в связи новым виджетом текса, переустановите его, должно все работать.
avatar
1 Спам
5
Работает, спасибо!
avatar
0 Спам
6
Здравствуй. Выбрал вариант 3 . Сначала работал нормально, но потом потерялась теневая  линия ( которым заголовок обрамлен). Как можно исправить?
avatar
0
7
Адрес страницы, где можно увидеть описанную вами ситуацию
avatar
0 Спам
8
Здравствуй. 
Спасибо за отзыв. Уже исправлена
avatar
0 Спам
9
Добрый день!
По второму варианту поправку сделайте пож
Отступ между заголовком и текстом слишком большой, можете уменьшить?
avatar
0 Спам
10
сделал все по инструкции, почему-то сначала работал скрипт, а потом после смены шаблона сайта перестал работать. тогда я заново установил код, но все равно не работает. сайт https://narodnaya-mebel.ru/ блок "ответы на частые вопросы"
avatar
0 Спам
11
проверил, на белом фоне блока скрипт работает, когда меняю белый на картинку, то перестает работать! сайт https://narodnaya-mebel.ru/ блок "ответы на частые вопросы"
avatar
0
12
Сейчас я вижу, что блок работает корректно, на фоне с картинкой
C новым виджетом "Текст" бывает такое, там меняется стилистика, и нужно заново оформлять весь виджет.
avatar
0 Спам
13
Добрый день! есть ли решение или сколько такое будет стоить для скрытия таблиц (прайса) или целового блока с картинкой и таблицей?
avatar
0
16
Планируется похожее решение у нас, следите за обновлениями
avatar
0 Спам
14
Почему именно H4 - рушится структура заголовков на сайте и длинные заголовки - плохо для SEO
avatar
0
15
Можно и с другим заголовком это проделать
H4 взят в качестве примера.
avatar
0 Спам
17
Я имею ввиду, что использовать для этого заголовок (h2, h3, h4) - плохо для SEO
avatar
0
18
Никто и не заставляет, и как я говорил ранее H4 взят в качестве примера
Можете такое организовать и на обычном тексте: https://screenshot.ukit.com/src/goalov2/2018-10-28-15-31-43.png
avatar
0 Спам
19
А что в скрипте изменить, что бы он работал с другим тэгом?
avatar
0
20
Ничего, только нужно будет задавать новую стилистику оформления.
avatar
0 Спам
21
Я в шоке, работает с любым видом текстового блока =)
avatar
0
22
Можно по ID блока скрипт сделать. Что бы не применялся ко всем текстам.
В самом начале скрипта указать ID
$('#ul-id-0-116 .ul-wysivig-editor > *, #ul-id-0-116 .ul-widget-wysiwyg > *').each(function(i) {

Даже в карточках товара или магазина можно, к примеру описание товара.
Магазин: http://много-инструмента30.рф
 <script>
require(['jquery'], function($) {
$(document).ready(function() {
$('.ul-w-productCard > *').each(function(i) {
if ($(this).children('*:eq(0)').html() != '' && $(this).attr('class') != 'tab_block') {
// данные ребенка 
var spo_zag = $(this).children('*:eq(0)').clone(),
spo_css_bold = $(this).children('*:eq(0)').css('fontWeight'),
spo_css_i = $(this).children('*:eq(0)').css('fontStyle');
$(this).children('*:eq(0)').remove();
var spo_th_html = $.trim($(this).html());
if ((spo_css_bold == 'bold' || spo_css_bold == '700') && spo_css_i != 'italic' && spo_th_html != '') {
$(this).attr('data-block', 'block' + i + '').html('<p class="ttxt" style="display:none;">' + spo_th_html + '</p>');
spo_zag.addClass('zagolovok').prependTo('*[data-block="block' + i + '"]');
$(this).addClass('shBlock');
} else {
$(this).attr('data-block', 'block' + i + '');
spo_zag.prependTo('*[data-block="block' + i + '"]');
}
}
});
// Клик по спойлеру 
$('body').on('click', '.zagolovok', function() {
$('.shBlock.active .ttxt').toggle('fast');
// если нажат не по открытому
if (!$(this).parent().hasClass('active')) {
$('.shBlock.active').removeClass('active');
$(this).parent().addClass('active');
$(this).parent().children('.ttxt').toggle('fast');
} else {
$('.shBlock.active').removeClass('active');
}
});
});
});
</script>

Карточка товара: https://gifts-dk.ru/
<script>
require(["jquery"], function(t) {
t(document).ready(function() {
t(".ul-widget-goods.default .ul-goods-view-item .ul-goods-view-descr> *").each(function(a) {
if ("" != t(this).children("*:eq(0)").html() && "tab_block" != t(this).attr("class")) {
var e = t(this).children("*:eq(0)").clone(),
l = t(this).children("*:eq(0)").css("fontWeight"),
s = t(this).children("*:eq(0)").css("fontStyle");
t(this).children("*:eq(0)").remove();
var c = t.trim(t(this).html());
"bold" != l && "700" != l || "italic" == s || "" == c ? (t(this).attr("data-block", "block" + a), e.prependTo('*[data-block="block' + a + '"]')) : (t(this).attr("data-block", "block" + a).html('<p class="ttxt" style="display:none;">' + c + "</p>"), e.addClass("zagolovok").prependTo('*[data-block="block' + a + '"]'), t(this).addClass("shBlock"))
}
};), t("body").on("click", ".zagolovok", function() {
t(".shBlock.active .ttxt").toggle("fast"), t(this).parent().hasClass("active") ? t(".shBlock.active").removeClass("active") : (t(".shBlock.active").removeClass("active"), t(this).parent().addClass("active"), t(this).parent().children(".ttxt").toggle("fast"))
};)
};)
};)
</script>

Стилями только немного поправить, а так работает норм))
Войдите:
avatar