ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Проект от команды FD

☑ Поиск роли, партнёра, игрока.
☑ Легко. Удобно. Современно.
☑ Мы в процессе разработки.

Читать спойлеры

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Начался второй тур лотереи для форумов "Новогодний кот". Подаём заявки на участие до 8.12. Не пропустите!
Ищешь чем бы украсить свой форум или сайт к Новому году? 🎄 Мы поможем нарядиться! 🎄

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Вертикальные аккордеоны

Сообщений 1 страница 7 из 7

1

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

Демо:
[html]<div class="accordion">
<h3>Заголовок</h3>
<p>Ваш текст </p>
<h3>Заголовок 2</h3>
<p>Ваш текст Ваш текст Ваш текст Ваш текст Ваш текст Ваш текст Ваш текст Ваш текст Ваш текст Ваш текст </p>
</div>
<style type="text/css">

.accordion {
width: 880px;
border-bottom: solid 1px #c4c4c4;
margin-left: 20px;
}
.accordion h3 {
background-color: #c2c2c2 !important;
padding: 7px 15px !important;
margin: 0 !important;
font: bold 110% verdana, arial, helvetica, sans-serif !important;
border: solid 1px #c4c4c4 !important;
border-bottom: none !important;
cursor: pointer !important;
color: #111111 !important;
position: relative !important;
top: auto !important;
right: auto !important;
}
.accordion h3:hover {
background-color: #e3e2e2;
}

.accordion p {  color: #2f2f2f;
background-color: #8a8a8a;
background-image: url("…");  background-position: bottom right; background-repeat: no-repeat;
margin: 0;
padding:  10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
</style>
<script type="text/javascript">
$(document).ready(function(){

$(".accordion h3:first").addClass("active");
$(".accordion p:not(:first)").hide();

$(".accordion h3").click(function(){
    $(this).next("p").slideToggle("slow")
    .siblings("p:visible").slideUp("slow");
    $(this).toggleClass("active");
    $(this).siblings("h3").removeClass("active");
});

});
</script>[/html]

Платформа: любая

Сегодня хочется предоставить вашему вниманию вертикальный аккордеон: разворачивающиеся по клику разделы с заголовком и содержанием. Данный скрипт удобно использовать на страницах форума, чтобы разместить F.A.Q. или скрыть большой объем информации.

Для размещения в нужный контейнер ставится данный код:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Далее стилизуем наш контейнер. В данном деле ваши возможности безграничны, все зависит от желания и умения.

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Теперь – сам скрипт. Можно ставить два варианта, оба прекрасно работают; все зависит от Ваших нужд. В одном из них возможно открытие одновременно только одного раздела:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Во втором разделы остаются открытыми до тех пор, пока пользователь сам их не закроет.

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

В html-низ. Более ничего не нужно.

+3

2

Вертикальный слайдер от Кофемана
Вариант слайдера-аккордеона

[html]    <style>
    .ul-menu * {
            margin: 0;
            padding:  0;
            margin: 0;
            padding:  0;
            font-size: 15px;
            font-family: 'Times New Roman';
            -moz-user-select: none;
            -khtml-user-select: none;
            user-select: none;
        }
     .ul-menu {
            list-style: none;
            display:block;
            width:250px;
            height: 260px;
            border: 1px solid transparent!important;
     
        }
     
        .ul-menu li {
            list-style: none;
            margin: 3px 0 3px;
            background-color: #E0EDED;
            font-size:120%;
        }
     
    .ul-menu li .cat_lnk {
            background:transparent url(http://s3.uploads.ru/ue5ph.gif) no-repeat 0 0;
            text-align: center;
            padding: 6px;
            display: block;
            height: 28px;
            line-height: 28px;
            width: 96%;
            text-decoration: none;
     
    }
    .ul-menu li ul {
            list-style-position: outside;
            text-align:left;
            list-style: none;
            display: none;
            height: 80px;
            width: 94%;
            margin-top: 1px;
            padding: 6px;
    }
    .ul-menu li .cat_lnk+ul {
            border: 1px solid green;
            border-top-color:#A5B7B7;
    }
    a.cat_lnk:hover,a.cat_lnk:active,a.cat_lnk:visited {
            text-decoration: none;
    }
    .ul-menu li a.cat_lnk.active{
            background-position: 0 -44px;
    }
    .ul-menu li a.cat_lnk:hover{
            background-position: 0 -88px;
    }
    </style>
    <script type="text/javascript">
     
    $.fn.tree_menu = function() {
     
            var nav = this;
            var uls = nav.find("ul");
            var ulsL = uls.length-1;
     
     
            nav.find("a").click(function() {
                var Lnk=$(this).attr("href");
                var self = $(this).next();
                if ( self.length == 0 ) return;
     
     
                uls.each(function( index ){
     
                        if ( this === self[0] ) {
                            if ( self.css('display') == "none" ) {
                               $(this).prev('a').addClass('active');
                            }  else {
                                    $(this).prev('a').removeClass('active');$(this).slideUp(400);
                                     uls.eq(index-1).prev('a').click();return  false;
                                    }
                            $( this ).slideDown(400);return true;
                        }
                        if ( jQuery.inArray( this, self.parents( "ul" ) ) == -1 ) {
                            $(this).prev('a').removeClass('active');
                            $(this).slideUp(400);return true;
                        }
               });
     
                    return false;
     
            });
    }
    </script>
    <ul id="nav_menu_content1" class="ul-menu">

        <li><a href="#0" class="cat_lnk">Категория 4</a>
        <ul>Тут содержимое четвертой категории</ul>   
        </li>
        <li><a href="#0" class="cat_lnk">Категория 3</a>
        <ul>Тут содержимое третьей категории</ul>   
        </li>

        <li><a href="#0" class="cat_lnk">Категория 2</a>
        <ul>Тут содержимое второй категории</ul>   
        </li>
        <li><a href="#0" class="cat_lnk active">Категория 1</a>
        <ul  style="display:block">Тут содержимое первой категории</ul>   
        </li>
    </ul> <script>$('#nav_menu_content1').tree_menu();</script> <!-- Запуск -->[/html]
Автор: Кофеман
Платформа: любая

Скрипт и стиль:

Код:
    <style>
    .ul-menu * {
            margin: 0;
            padding:  0;
            margin: 0;
            padding:  0;
            font-size: 15px;
            font-family: 'Times New Roman';
            -moz-user-select: none;
            -khtml-user-select: none;
            user-select: none;
        }
     .ul-menu {
            list-style: none;
            display: block;
            width:250px;
            height: 330px;
            border: 1px solid transparent!important;
     
        }
     
        .ul-menu li {
            list-style: none;
            margin: 3px 0 3px;
            background-color: #E0EDED;
            font-size:120%;
        }
     
    .ul-menu li .cat_lnk {
            background:transparent url(http://s3.uploads.ru/ue5ph.gif) no-repeat 0 0;
            text-align: center;
            padding: 6px;
            display: block;
            height: 28px;
            line-height: 28px;
            width: 96%;
            text-decoration: none;
     
    }
    .ul-menu li ul {
            list-style-position: outside;
            text-align:left;
            list-style: none;
            display: none;
            height: 210px;
            width: 94%;
            margin-top: 1px;
            padding: 6px;
    }
    .ul-menu li .cat_lnk+ul {
            border: 1px solid green;
            border-top-color:#A5B7B7;
    }
    a.cat_lnk:hover,a.cat_lnk:active,a.cat_lnk:visited {
            text-decoration: none;
    }
    .ul-menu li a.cat_lnk.active{
            background-position: 0 -44px;
    }
    .ul-menu li a.cat_lnk:hover{
            background-position: 0 -88px;
    }
    </style>
    <script type="text/javascript">
     
    $.fn.tree_menu = function() {
     
            var nav = this;
            var uls = nav.find("ul");
            var ulsL = uls.length-1;
     
     
            nav.find("a").click(function() {
                var Lnk=$(this).attr("href");
                var self = $(this).next();
                if ( self.length == 0 ) return;
     
     
                uls.each(function( index ){
     
                        if ( this === self[0] ) {
                            if ( self.css('display') == "none" ) {
                               $(this).prev('a').addClass('active');
                            }  else {
                                    $(this).prev('a').removeClass('active');$(this).slideUp(400);
                                     uls.eq(index-1).prev('a').click();return  false;
                                    }
                            $( this ).slideDown(400);return true;
                        } 
                        if ( jQuery.inArray( this, self.parents( "ul" ) ) == -1 ) {
                            $(this).prev('a').removeClass('active');
                            $(this).slideUp(400);return true;
                        }
               });
     
                    return false;
     
            });
    }
    </script>

Код слайдера:

<ul id="nav_menu_content1" class="ul-menu">

        <li><a href="#0" class="cat_lnk">Категория 4</a>
        <ul>Тут содержимое четвертой категории</ul>   
        </li>

        <li><a href="#0" class="cat_lnk">Категория 3</a>
        <ul>Тут содержимое третьей категории</ul>   
        </li>

        <li><a href="#0" class="cat_lnk">Категория 2</a>
        <ul>Тут содержимое второй категории</ul>   
        </li>
        <li><a href="#0" class="cat_lnk active">Категория 1</a>
        <ul  style="display:block">Тут содержимое первой категории</ul>   
        </li>
    </ul> <script>$('#nav_menu_content1').tree_menu();</script> <!-- Запуск -->

Жирным выделен кусок для добавления очередного пункта меню

0

3

Ghоst
Хорошо бы привести скрин(-ы) и ссылку на демо. http://i.smiles2k.net/aiwan_smiles/smile3.gif

0

4

faiko
Понял, сейчас будет)

0

5

Ghоst
А есть горизонтальный аккордеон? Очень нужен...

0

6

J.E.V.T.
Горизонтальный слайдер

Подпись автора

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)

0

7

Печально что внутри блока не получается использовать другие дивы.
И вопрос: можно как-то настроить аккордеон так, чтобы в стандартном состоянии была открыта третья, скажем, вкладка, а не первая?

Отредактировано Eri (05.08.12 08:26)

Подпись автора


http://s1.uploads.ru/t/qWjmP.gif           
Я дизайнер, я не хочу ничего решать, я хочу       
кнопки "Поиграть со шрифтами" и "Сделать красиво".

0