RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

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

Аккордеон на css и jquery
Просмотров: 1276  Скачан: 201 раз  Комментариев в теме: 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

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

JQuery плагин с навигацией в виде слайдераJQuery плагин с навигацией в виде с...

JQuery плагин «Easy Paginate» созданный для удобного оформления контента на сайте, он очень прост в установке....

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

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

Стильный слайдер на jQuery «Mobilyslider»Стильный слайдер на jQuery «Mobilys...

Стильный слайдер на jquery, а если быть точнее, то это плагин «MobilySlider» имеющий размер всего в 5kb, слайдер довольно привлекательный с виду, име...

Kenburner слайдерKenburner слайдер

Сочетание в слайдере красивого дизайна, анимации текста и различных эффектов, приятно выделяет его среди подобных плагинов....

Карусель (плагин Circular Content)Карусель (плагин Circular Content)

На данной странице представлена карусель бесконечной прокрутки контента «плагин Circular Content», идея заключается в том, что бы вращать......

Слайдер на jQuery для сайтаСлайдер на jQuery для сайта "Estro ...

Красивый слайдер на jQuery для прокрутки изображения (картинки) на вашем сайте....
Интересные публикации:

Контактная форма (дизайн)Контактная форма (дизайн)

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

Социальные иконки на css3Социальные иконки на css3

Социальные иконки на css3, при наведении курсора на иконку, она делается полупрозрачной....

Горизонтальное выпадающее меню с помощью jqueryГоризонтальное выпадающее меню с помощью...

Горизонтальное меню в темном стиле с выпадающими пунктами....

Стильный комплект форм «Zi-4-Forms»Стильный комплект форм «Zi-4-Forms»

Zi-4-Forms - это комплект форм использующий CSS3, комплект состоит с формы входа, регистрации, восстановления пароля, контактная форма....

Скрипт комментариев на PHPСкрипт комментариев на PHP

Скрипт комментариев написанный на php и работает в связке с MYSQL....

VLDPersonals v2.7VLDPersonals v2.7

VLDPersonals - это функциональный движок с огромным количеством возможностей, который вмещает в себе социальную сеть и сайт знакомств....

Прозрачная форма регистрации с прогресс баромПрозрачная форма регистрации с прогресс ...

Стильная прозрачная форма регистрации на css3 и JQuery. В форме имеется прогресс бар показывающий пользователю процесс заполнения формы....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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