Вед-дев, Сео, Манимейкинг

Показать или скрыть div при нажатии на ссылку

<a id="open-close" href="#">Кнопка</a>
<div id="block-links">Ваш контент</div>

$(document).ready(function() {
  $('#open-close').show();
  $('#block-links').hide();

  $('#open-close').click(function(event) {
    event.preventDefault(); // Для того чтобы при нажатии на ссылку не кидало вверх
    $('#block-links').slideToggle();
  });
});


Комментарии (13)

подскажите пожалуйста, а как сделать что бы при открытии контейнера, страница опускалась вниз, к нему?

Можете попробовать эту библиотеку demos.flesler.com/jquery/scrollTo/

Добрый вечер!
Не подскажите, а как можно проверить статус скрыто/раскрыто? Чтобы при обновлении страницы или переходе на другую, статус оставался раскрытым.

Добрый вечер) можно, нужно лишь дать каждой ссылке (элементу меню) уникальный ID и при нажатии, сохранять этот ID используя $.cookie().

Вот тут есть пример: http://jsfiddle.net/9GbST/

В вашем случае - вы делаете это для меню?

Да, для меню. Ох, куки - муки...) Полагаю, это можно реализовать только с их помощью?

Попробуйте посмотреть в сторону модулей: dhtml_menu или jquery_menu (drupal.org/project/название модуля)

Спасибо! Попробую через cookie сперва, а если нет, то возьмусь за модули.

Подскажите пожалуйста как при нажатии на ссылку еще и заменить ее название. Например было ПОКАЗАТЬ, а когда показали стало СКРЫТЬ

Все разобрался:
$(document).ready(function() {
$('#open-close').show();
$('#block-links').hide();
var flag = 0;
$('#open-close').click(function(event) {
if (flag == 0) {
event.preventDefault();
$('#open-close').text("Спрятать");
$('#block-links').slideToggle();
flag = 1;
} else {
$('#open-close').text("Показать");
$('#block-links').slideToggle();
flag = 0;
}
});
});

$(document).ready(function() {
  $('#open-close').show();
  $('#block-links').hide();
  var flag = 0;
  $('#open-close').click(function(event) {
  event.preventDefault();
  if (flag == 0) {
    $(this).text("Показать");
    $('#block-links').show();
    flag = 1;
  } else {
    $(this).text("Спрятать");
    $('#block-links').hide();
    flag = 0;
  }
});
});

Ваш код верен) Можно использовать (this) и вы местами перепутали "Показать" и "Спрятать"

Благодарю, все получилось. Единственный момент - в проклятом IE скрипт не работает. При нажатии на ссылку просто перебрасывает вверх страницы, div не показывается. Может, подскажете какой-нибудь костыль для IE? Заранее спасибо за ответ.

Уточнение: не работает в IE 8, в девятке все нормально.

$(document).ready(function() {
$('.open-close').show();
$('.block-links').hide();

$('.open-close').click(function(event) {
event.preventDefault(); // Для того чтобы при нажатии на ссылку не кидало вверх

$(event.target).next().slideToggle();
});
});
Если блоков для закрытия больше чем один, то этот код будет их вам открывать по одному, а не всем скопом сразу

Подписаться

Подписка на RSS-лента последние записи из Блога

Комменты

  • Olzhas 11 месяцев 2 дня назад
    Спасибо. С Новым Годом! 
  • Den 11 месяцев 3 недели назад
    В первой функции, при создании переменной $li_previous нужно поменять '←' с NULL, в $li_next сделать тоже самое. 
  • Гость 11 месяцев 4 недели назад
    Если все ровно так как было описано, то нет никаких сомнений что домен увел сам регистратор. Потому что вероятность того 
  • Валерий 1 год 3 недели назад
    да можно делать импорт-экспорт только лишь в оболочке на входя на mysql сервер 
  • admin 1 год 3 недели назад
    Валерий, а зачем вам именно так делать экспорт? Если я не ошибаюсь, то там нет какой-либо команды чтобы сделать экспорт 
  • Валерий 1 год 3 недели назад
    захожу на mysql через ssh по команде  
  • admin 1 год 3 недели назад
    Добрый вечер, какой у вас клиент? 
  • Валерий 1 год 3 недели назад
    Здравстуйте, есть команда чтобы сделать экспорт базы внутри mysql клиента? 
  • Eduard 1 год 1 месяц назад
    Видать, домен хороший был. Заявление пробывали писать на мошенника? 
  • Stas 1 год 2 месяца назад
    Ошибка в ключе квантификатора - replace(/будешь|пить/ig, "хлеб"); Указать -g для прохода по всем совпадениям!