Скрываем/отображаем часть текста в CEWP с помощью jQuery

Сегодня я расскажу, как я решал задачу по скрытию/отображению части текста в веб-части «Редактор контента». В общем, на страницу, которая состоит из веб-частей нужно было разместить объявление, позже объявление для пользователей увеличилось в объеме (стало много текста) и я решил скрыть часть текста с помощью кнопки «Скрыть /показать весь текст»

Использовал такой скрипт:

<script type="text/javascript" language="javascript">

function ShowWeb()

{

if (document.getElementById("Toggle").style.display == "block")

         {

           document.getElementById("Toggle").style.display = "none";

         }

         else

         {

           document.getElementById("Toggle").style.display = "block";

         } 

}

</script>

<input name="Button1" type="button" value="Скрыть/Показать весь текст" onclick="ShowWeb()">

Задача была решена, но работало все как-то резко и не красиво…

Я решил переработать код и использовать Jquery. Потом я понял, что лучше использовать две кнопки, одна «Показать весь текст», а другая «Скрыть».

Теперь я расскажу, как я все сделал:

1. Добавляем на страницу «Редактор контента» (или Content Editor Web Part - CEWP)

2. Добавляем  весть наш текст в веб-часть

3. Заходим в режим редактирования HTML

4. Добавляем в самый низ код

<script src="/Style%20Library/jquery-1.10.2.js" type="text/javascript"></script>

<button id="hider" onclick="return false" style="display: none">Скрыть текст</button>

<button id="shower" onclick="return false">Показать весь текст</button>

<script language="javascript" type="text/javascript">

$( "#hider" ).click(function() {

  $( "#Toggle" ).hide("slow");

  $( "#shower" ).show();

  $( "#hider" ).hide();

  });

$( "#shower" ).click(function() {

  $( "#Toggle" ).show( "slow" );

  $( "#hider" ).show();

  $( "#shower" ).hide();

});

</script>

Если Вы заметили, я положил файл jQuery в библиотеку сайта, но можно подгружать и из интернета (на мой взгляд, не самый лучший способ)

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

5. Теперь нужно указать какой текст скрываем, а какой оставляем, для скрытия текста необходимо в теге <div> указать

  id="Toggle" style="display: none"

Вот и все!!!