Забыли пароль?
Запросите новый здесь.

Автор темы: spocher102
ID темы: 2648
Информация:
Тема содержит 7 сообщения, была просмотрена 6373 раз.  Имеются прикрепленные файлы.
Просмотр темы
PHP-Fusion Russia » Веб-разработка » Javascript, ajax, jquery
 Распечатать тему
Раскрывающийся и скрывающийся блок при клике по ссылке
spocher102
Всем привет!
Помогите реализовать раскрывающийся и скрывающийся обратно блок при клике по ссылке.

Есть сама ссылка и раскрывающийся блок:

<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
html
Скачать исходники  Код
<a href="#" id="pokazat">Показать контактную информацию:</a>
<div id="contacts">Контактная информация:</div>




js, при условии, что подключена библиотека jquery
Скачать исходники  Код
$(document).ready(function() {
  $('#pokazat').click(function(event) {
    event.preventDefault();
    $('#contacts').slideToggle();
  });
});


 
spocher102
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
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
Работает почти как надо, единственное при клике по "Скрыть контактную информацию" блок начинает скрываться, но потом опять автоматически раскрывается а ссылка не меняется на показать контактную информацию

Объединено 06.02.2016 20:18:
Помогите сделать что бы при клике ещё менялось название ссылки на "Скрыть контактную информацию" и обратно
Изменил(а) spocher102, 06.02.2016 20:18
 
lucky
у меня всё работает нормально, прикрепил файлы, сравнивайте со своим кодом
lucky присоединено следующее:файл:
Вы не можете видеть вложения в этой теме.
 
spocher102
Вообще отлично!!! Че то я тупил
 

Поделиться этой темой
Социальные закладки: Vkontakte Odnoklassniki Mail.ru Facebook Google Tweet This
URL:
BBcode:
HTML:

Перейти на форум:
Похожие темы
Темы Форум Ответов / Просмотров Последние сообщения
Возможно ли при помощи тестов (вопросов) проверить совместимость М и Ж?  →  Разное 2 / 843 04.11.2018 17:24
Проблема при установке  →  Установка и настройка системы 11 / 2018 18.09.2018 14:28
Важно! 2 месяца бесплатно, при продлении или заказе dedicated сервера! Акция!  →  Хостинг 0 / 395 07.06.2018 04:37
как задать класс textarea при включенном TinyMCE?  →  Темы оформления 7 версии 5 / 9174 14.11.2016 15:05
Forbidden 403 при попытке редактировать профиль  →  Ошибки, баги 2 / 2601 20.07.2016 06:10
Ошибка при регистрации  →  Ошибки, баги 49 / 27853 21.05.2016 12:48
Тема при установке системы  →  Установка и настройка системы 5 / 3157 22.04.2016 06:16
Как "подружить" PHP Fusion и Facebook? Несовпадение кодировки при перепосте!  →  Ошибки, баги 11 / 22402 07.03.2016 11:26
При добавлении вложения начинается дублирование сообщений  →  Ошибки, баги 1 / 960 26.02.2015 08:58
Список с checkbox. Как отметить дочерний ceckbox при выборе родительского?  →  Javascript, ajax, jquery 6 / 5547 08.02.2015 10:17
Топ 5 пользователей форума
Alex Alex (1,198)   Zaxap Zaxap (1,078)   Vova Vova (877)   Pisatel Pisatel (678)   util util (666)