Приветствую Вас Гость • Регистрация • Вход
Суббота, 19.10.2019
Главная » 2014 » Апрель » 17 » Открытие и закрытие спойлера посредствами JS,,jQuery и CSS
22:41
Открытие и закрытие спойлера посредствами JS,,jQuery и CSS
Запостю я пожалуй сегодня еще один пост на тему javascript.
Как то вспомнилось искал давненько себе способ закрытия и открытия спойлера на сайт,что бы не делать лишних переходов.
Сегодня попросили показать на одном из форумов как это реально организовать и какая досада мне пришлось выдирать этот способ из кода одного из моих сайтов,по причине того,что немного подзабыл как это сделать.
Выход с положения нашел вот таким простеньким способом с помощью JS,jQuery и CSS.
Нужно всего навсего прописать между тегами
Код
<body></body>
Подключаем стили
Код
<style type="text/css">.spoiler_body {display:none; cursor:help;}</style>
Подключаем библиотеку jquery
Код
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script>
Подключаем скрипт закрытия и открытия спойлера
Код
<script type='text/javascript'> $(document).ready(function(){  $('.spoiler_links').click(function(){  $(this).parent().children('div.spoiler_body').toggle('normal');  return false;  }); }); </script>
На этом пока все.Дальше прописываем где на нужно вывести спойлер
Код
<a href="" class="spoiler_links">По типу (+)открыть спойлер</a> <div class="spoiler_body"> Кликнув по ссылке (+)открыть спойлер мы открываем полный текст который откроется на той же странице и так же кликув по этой ссылке мы его и свернем </div></div>
На этом все... В итоге мы получаем вот что: (+)открыть спойлер
Кликнув по ссылке (+)открыть спойлер мы открываем полный текст который откроется на той же странице и так же кликув по этой ссылке мы его и свернем.
А вот и наш спойлер ахах...хах...
А кто сказал что он должен быть иным???
Категория: Javasсript | Просмотров: 1116 | Добавил: Samosval |Теги: спойлер для сайта |Рейтинг: 0.0/0


Всего комментариев: 0
avatar
    Яндекс.Метрика
Сайт создан в системе uCozЯндекс.Метрика