Пример переключения jQuery для отображения и скрытия контента
The requirement: нам нужно показывать сворачиваемое содержимое, когда мы нажимаем кнопку «Показать», и скрывать сворачиваемое содержимое, когда мы нажимаем кнопку «Скрыть».
The solution: функция jQuerytoggle().
Демо: нажимает кнопку «показать».
1. Складное содержимое
Ниже приведен пример HTML для сворачиваемого контента:
Use jQuery toggle to hide/show collapse content
Элемент «div» в<div id="collapse1" style="display:none"> выше скрыт. Чтобы показать содержимое, когда мы нажали кнопку «Показать», нам нужно создать событие щелчка для кнопки «Показать», как показано ниже:
$('.nav-toggle').click(function(){
//logic to show/hide collapsable content
});
2. Получить селектор
Получить селектор свернутого контента из атрибута href:
var collapse_content_selector = $(this).attr('href');
3. Переключить для отображения и скрытия
Использует переключатель jQuery, чтобы показать / скрыть сворачиваемое содержимое, как показано ниже:
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function(){
if($(this).css('display')=='none'){
toggle_switch.html('Show');//change the button label to be 'Show'
}else{
toggle_switch.html('Hide');//change the button label to be 'Hide'
}
});
4. Полный пример
jQuery toggle to display and hide content
jQuery toggle() to hide/show collapse content
Скачать исходный код
Скачать -jQuery-toggle-to-display-hide-content.zip (1кб)