qiwi
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Аккордеон на css и jquery

Аккордеон на css и jquery
Просмотров: 1353  Скачан: 208 раз  Комментариев в теме: 0

На данный момент имеется множество различных аккордеонов на css или jquery, в данном примере представлен один из вариантов его реализации. Аккордеон это довольно практичный вариант для вывода информации на сайте и будет весьма удобен для вывода текста и изображения.

Шаг 1 - создание разметки

 

HTML

<div class="cont">
    <div class="akordeon" id="buttons">
        <div class="akordeon-item expanded">
            <div class="akordeon-item-head">
                <div class="akordeon-item-head-container">
                    <div class="akordeon-heading">Слоеное озеро – где это?</div>
                </div>
            </div>
            <div class="akordeon-item-body">
                <div class="akordeon-item-content">
                    <p>А знаете ли вы, что в России имеется «слоеное» озеро? За тысячелетие существование озера Могильное, расположенного на острове Кильдин в Мурманской области, в нем сложился уникальный баланс между пресной и соленой водой, что, собственно, и создает несколько слоев в озере. Причина такого удивительного строения озера Могильное — проток морской воды через перемычку в виде вала в южной части озера.</p>
                    <p>В нижнем слое водоема, расположенном над вязким илистым дном, – большая концентрация сероводорода, поэтому жизнь в нем отсутствует. Второй слой отличается особой красотой, которую придают ему пурпурные бактерии, обитающие здесь и окрашивающие воду в летнее время в розоватый цвет. Бактерии служат щитом: они поглощают сероводород и не пропускают его в слои, находящиеся выше.</p>
                    <p>Третий слой представлен солёной водой, где содержание соли около 32%. Четвертый слой содержит смесь солёной и пресной воды. А вот уже поверхностный четырех-пятиметровый слой – это прозрачная пресная вода.</p>
                    <img style="border:none;margin:5px;" src="images/2.jpg" />
                    <p>Действительно, озеро Могильное по праву называется гидрологическим памятником природы.</p>
                </div>
            </div>
        </div>
        <div class="akordeon-item">
            <div class="akordeon-item-head">
                <div class="akordeon-item-head-container">
                    <div class="akordeon-heading">Самый известный естественный маяк</div>
                </div>
            </div>
            <div class="akordeon-item-body">
                <div class="akordeon-item-content">
                <img id="social-media-share" width="150px" height="100px" style="border:none;float:left;margin-right:10px;" src="images/1.jpg" />
                <p>А знаете ли вы, где находится самый известный естественный маяк? Моряки всего мира знают вулкан Ицалко (или Исалько), расположенный у берегов Центральной Америки, высотой около 2000 метров. А известен он тем, что каждые восемь минут здесь раздаётся подземный гул и над кратером вулкана возвышается клуб дыма, который растет, превращаясь в столб высотой до 300 метров – это изливается магма. Такие извержения здесь случаются в течение двухсот лет. Поэтому он является надежным ориентиром в любую погоду, в любое время дня и ночи.<p>
                </div>
            </div>
        </div>
        <div class="akordeon-item">
            <div class="akordeon-item-head">
                <div class="akordeon-item-head-container">
                   <div class="akordeon-heading">По часовой стрелке</div>
                </div>
            </div>
            <div class="akordeon-item-body">
                <div class="akordeon-item-content">
                    <p>А знаете ли вы, что принцип, вследствие которого стрелки часов передвигаются, как вы наверняка угадали – по часовой стрелке – был «унаследован» часами от их «солнечных» собратьев. Если вы строили когда-нибудь солнечные часы, скажем, втыкая палочку в землю, вы знаете, что именно «по часовой стрелке» идет стрелка-тень в таких часах. Но не все так просто! Интересно здесь то, что на самом деле вышесказанное верно только, если мы говорим о горизонтальных часах. Между тем, для вертикально-расположенных солнечных часов правильным движением будет «против часовой стрелки» . Поэтому, когда пришло время механических часов, некоторые часовщики делали и такие, правда во много раз реже – зато теперь они достопримечательности: самыми известными, пожалуй, являются часы Мюнстерского Собора.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/Akordeon.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('#buttons').akordeon({ toggle: true, itemsOrder: [2, 0, 1] });
    $('#button').akordeon();
});
</script>
Материалы по теме:

Таблица тарифных плановТаблица тарифных планов

Таблица тарифных планов нужна любому крупному проекту, если у вас успешный проект, то вам рано или поздно, понадобиться вывести ваши собственные тариф...

Слайдер на css3 и jqueryСлайдер на css3 и jquery

Очень красивый слайдер с мини навигацией внизу, в навигации виден текст (комментария к слайдеру, названия открытой картинки, предыдущей и следующей), ...

Широкоформатный слайдер (видео, изображение, текст)Широкоформатный слайдер (видео, изо...

Отличный слайдер с богатым набором функций, можно использовать (видео, изображение, текст)....

Скроллер картинокСкроллер картинок

Красивый скроллер для вашего сайта, имеет возможность прокручиваться как в левую сторону, так и в правую......

Слайдер картинок на JqueryСлайдер картинок на Jquery

Отличный слайдер картинок для вашего сайта с поддержкой слайд-шоу, также в слайдере имеются две кнопки......

Адаптивная карусель, плагин jQuery «Elastislide»Адаптивная карусель, плагин jQuery ...

Красивая адаптивная карусель для вашего сайта, а если быть точнее, то это плагин «Elastislide», особенности такого плагина, заключаются в умении адапт...

Круговой слайдерКруговой слайдер css3

Если вы хотите эффектно представить какой либо продукт на своём сайте, но не знаете как это можно сделать. В таком случае представляю красивый слайдер...
Интересные публикации:

Кнопка Download на css3Кнопка Download на css3

Красивая кнопка на css3, при наведении курсора мыши на кнопку, она раскрывается, за тем уже виден сам подтекст....

DecadenceDecadence

Очень красивый универсальный шаблон Decadence на историческую тему, построенный на HTML5, в шаблоне имеется выпадающее меню......

Слайд эффект с помощью JavaScriptСлайд эффект с помощью JavaScript

Эффект в виде слайда, реализован с помощью javascript...

Шаблон Desire Night ClubШаблон Desire Night Club

HTML шаблон ночного клуба, на главной странице располагается привлекательный слайдер, есть галерея, видео проигрыватель, заготовлена контактная форма ...

DeTube v1.3DeTube v1.3

DeTube - отличная wordpress тема для тех кто хочет сделать видео-портал, блог или журнал видео новостей....

30 анимационных кнопок на CSS330 анимационных кнопок на CSS3

Неплохие анимационные кнопки на css3, имеются 30 кнопок, в том числе и 3D....

Горизонтальное LavaLamp менюГоризонтальное LavaLamp меню

Меню с красивым эффектом, суть в том, когда вы перемешаете курсор мыши по навигации, ползунок будет плавно......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.0/5( Голосов 8 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить