Форум: Раскрывающийся и скрывающийся блок при клике по ссылке

Просмотр темы

PHP-Fusion Russia » Веб-разработка » Javascript, ajax, jquery

Раскрывающийся и скрывающийся блок при клике по ссылке
spocher102	#1 Опубликовано 06.02.2016 18:13
Начинающий Сообщений: 16 Зарегистрирован: 22.01.2016 15:28	Всем привет! Помогите реализовать раскрывающийся и скрывающийся обратно блок при клике по ссылке. Есть сама ссылка и раскрывающийся блок: <a href="" id="pokazat">Показать контактную информацию:</a> <div id="contacts">Контактная информация:</div> (в css изначально display:none;) Получилось пока только раскрыть)) $(document).ready(function() { $('a#pokazat').click( function(event){ event.preventDefault(); { $('#contacts') .css('display', 'block') $('#pokazat') .css('display', 'none') }; }); }); Помогите допилить что бы при клике по ссылке <a href="" id="pokazat">Показать контактную информацию:</a> Блок раскрывался(Ну это получилось)-->Текст в ссылке менялся на "Скрыть контактную информацию"-->И при клике по "Скрыть контактную информацию" блок с самой информацией опять становился невидим, а ссылка опять "Показать контактную информацию:" Что бы работало по кругу)) Нажал показалась информация, нажал скрылась. Изменил(а) Polarfox, 06.02.2016 19:37


lucky	#2 Опубликовано 06.02.2016 18:32
Опытный пользователь Сообщений: 381 Зарегистрирован: 05.09.2012 10:20	html Код `<a href="#" id="pokazat">Показать контактную информацию:</a> <div id="contacts">Контактная информация:</div>` js, при условии, что подключена библиотека jquery Код `$(document).ready(function() { $('#pokazat').click(function(event) { event.preventDefault(); $('#contacts').slideToggle(); }); });`


spocher102	#3 Опубликовано 06.02.2016 18:41
Начинающий Сообщений: 16 Зарегистрирован: 22.01.2016 15:28	lucky написал: html Код `<a href="#" id="pokazat">Показать контактную информацию:</a> <div id="contacts">Контактная информация:</div>` js, при условии, что подключена библиотека jquery Код `$(document).ready(function() { $('#pokazat').click(function(event) { event.preventDefault(); $('#contacts').slideToggle(); }); });` Это классно! А как еще что бы название ссылки менялось? Когда скрыто поле было "Показать контактную информацию", а когда блок открыт то " Скрыть контактную информацию"


lucky	#4 Опубликовано 06.02.2016 18:56
Опытный пользователь Сообщений: 381 Зарегистрирован: 05.09.2012 10:20	js версия 2, Код `$(document).ready(function() { var pokazat = $('#pokazat'), contacts = $('#contacts'); pokazat.click(function(event) { event.preventDefault(); if(contacts.is(':visible')) { contacts.fadeOut(500); $(this).text('Показать контактную информацию:'); } else { contacts.fadeIn(500); $(this).text('Скрыть контактную информацию:'); } }); });` не проверял, может быть немного напутал если эффект скрытия не понравиться можно поменять, contacts.fadeIn(500); заменить на contacts.slideDown(); contacts.fadeOut(500); заменить на contacts.slideUp();


spocher102	#5 Опубликовано 06.02.2016 19:09
Начинающий Сообщений: 16 Зарегистрирован: 22.01.2016 15:28	Работает почти как надо, единственное при клике по "Скрыть контактную информацию" блок начинает скрываться, но потом опять автоматически раскрывается а ссылка не меняется на показать контактную информацию Объединено 06.02.2016 20:18: Помогите сделать что бы при клике ещё менялось название ссылки на "Скрыть контактную информацию" и обратно Изменил(а) spocher102, 06.02.2016 20:18


lucky	#6 Опубликовано 06.02.2016 20:42
Опытный пользователь Сообщений: 381 Зарегистрирован: 05.09.2012 10:20	у меня всё работает нормально, прикрепил файлы, сравнивайте со своим кодом lucky присоединено следующее:файл: Вы не можете видеть вложения в этой теме.


spocher102	#7 Опубликовано 06.02.2016 21:01
Начинающий Сообщений: 16 Зарегистрирован: 22.01.2016 15:28	Вообще отлично!!! Че то я тупил

Поделиться этой темой
Социальные закладки:
URL:
BBcode:
HTML:

Перейти на форум:

Темы	Форум	Ответов / Просмотров	Последние сообщения
Ошибка при создании панели →	Ошибки, баги	6 / 1513	29.01.2021 21:58
Почему при нажатии на кнопку срабатывает проверка полей? →	HTML и CSS	1 / 3979	05.11.2020 10:33
Работа разных тем оформления при разных разрешениях →	HTML и CSS	2 / 1398	05.03.2019 09:08
Возможно ли при помощи тестов (вопросов) проверить совместимость М и Ж? →	Разное	2 / 3033	04.11.2018 17:24
Проблема при установке →	Установка и настройка системы	11 / 4306	18.09.2018 14:28
Важно! 2 месяца бесплатно, при продлении или заказе dedicated сервера! Акция! →	Хостинг	0 / 1752	07.06.2018 04:37
как задать класс textarea при включенном TinyMCE? →	Темы оформления 7 версии	5 / 10857	14.11.2016 15:05
Forbidden 403 при попытке редактировать профиль →	Ошибки, баги	2 / 3307	20.07.2016 06:10
Ошибка при регистрации →	Ошибки, баги	49 / 30480	21.05.2016 12:48
Тема при установке системы →	Установка и настройка системы	5 / 4403	22.04.2016 06:16