Наверх
 

Навигация
Опрос
Какие виды уроков Вы хотите видеть на сайте?
Битрикс
DLE
CSS
Joomla
Wordpress
Все для хостинга
Все для фотошопа
Другое

База уроков » » » Красивый accordion с вкладками

Красивый accordion с вкладками

10 янв 2014 | Комментариев: 0 | Просмотров: 1110
 

 

Эффект разворачивающейся панели состоящей из вкладок.
 
Разметка HTML
Наш макет HTML несколько отличается от стандарта. А именно использованием стиля display:block, который делает первую вкладку развернутой при загрузке страницы, а не свернутой.
 
<div id="accordion">
	    <h2 class="current">Первая панель</h2>     
	    <div class="pane" style="display:block">        
	         ...контент...    
	    </div>    
	    <h2>Вторая панель</h2>    
	    <div class="pane">
	         ...контент...
	    </div>
	    <h2>Третья панель</h2>    
	    <div class="pane">
	        ...контент...
	    </div>
	</div>
 
javascript
$(function() { 
	$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null});
	});
 
 
 
 

Скачать файл Скачек: 12 | Размер: 58,62 Kb

Демо-версия


Теги: аккардеон

Ссылка на новость:

    html-cсылка на публикацию
    BB-cсылка на публикацию
    Прямая ссылка на публикацию

ЕЩЕ НА ЭТУ ТЕМУ:

Красивый эффект анимации для галереи

Красивый эффект анимации для галереи

Эффект, который позволит преобразить вашу галерею фотографий, с помощью библиотеки Raphael и jQuery. Нужно создать три файла: index.html, default.css, init.js
Zoomy - красивый эффект лупы на изображении

Zoomy - красивый эффект лупы на изображении

Эффект лупы достигается благодаря использованию простого jQuery плагина Zoomy. Вам понадобятся две копии одного и того же изображения - первая - копия
Красивая анимация заголовка изображения

Красивая анимация заголовка изображения

Красивый эффект анимации при наведении на картинку, у которой по верх отображается ее название.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.