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

Автор темы: spocher102
ID темы: 2648
Информация:
Тема содержит 7 сообщения, была просмотрена 7814 раз.  Имеются прикрепленные файлы.
Просмотр темы
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:

Перейти на форум:
Похожие темы
Топ 5 пользователей форума
Zaxap Zaxap (1,090)   Vova Vova (877)   Pisatel Pisatel (678)   util util (666)   SchreiBear SchreiBear (625)