Не могу понять как сделать блок div открытым

@Код - Альфа · Регистрация: 27.04.2013

Студворк — интернет-сервис помощи студентам

Нашел в интернете одну статью про аккордеон (на снимке видно то, о чём идет речь). Скачал код. Попробовал сделать нечто подобное. Вроде все нормально работает. Но есть проблема. Хотелось бы, чтобы первая вкладка по умолчанию была открыта. Как такое можно сделать? Очень буду благодарен.

Вот html этого блока:

HTML5

    <div class="accordion">
 
        <div id="tab-1">
 
            <a href="#tab-1" class="tab">Первая вкладка</a>
 
            <div class="content">
 
                <img src="img/post-img-1.png" alt="">
 
                <h1>Большой слон в городе</h1>
 
                <span>5 дней назад</span> <em class="bullet"></em> <span>17 комментариев</span>
 
                <p>Known locally as "SoMa", this neighborhood was home to the dot.com boom and boasts cutting-edge restaurants and boutiques.</p>
 
                <ul>
                    <li><img src="img/thumb-1.png" alt=""></li>
                    <li><img src="img/thumb-2.png" alt=""></li>
                    <li><img src="img/thumb-3.png" alt=""></li>
                                        <li><img src="img/thumb-3.png" alt=""></li>
                </ul>
            </div>
        </div>
        
        <div id="tab-2">
 
            <a href="#tab-2" class="tab">Вторая вкладка</a>
 
            <div class="content">
 
                <img src="img/post-img-2.png" alt="">
 
                <h1>Большой слон в городе</h1>
 
                <span>3 часа назад</span> <em class="bullet"></em> <span>9 комментариев</span>
 
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua.</p>
 
                <ul>
                    <li><img src="img/thumb-3.png" alt=""></li>
                    <li><img src="img/thumb-2.png" alt=""></li>
                    <li><img src="img/thumb-1.png" alt=""></li>
                    <li><img src="img/thumb-2.png" alt=""></li>
                </ul>
            </div>
        </div>
 
        <div id="tab-3">
 
            <a href="#tab-3" class="tab">Третья вкладка</a>
 
            <div class="content">
 
                <img src="img/post-img-2.png" alt="">
 
                <h1>Большой слон в городе</h1>
 
                <span>2 часа назад</span> <em class="bullet"></em> <span>1 комментарий</span>
 
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua.</p>
 
                <ul>
                    <li><img src="img/thumb-2.png" alt=""></li>
                    <li><img src="img/thumb-1.png" alt=""></li>
                    <li><img src="img/thumb-3.png" alt=""></li>
                                        <li><img src="img/thumb-3.png" alt=""></li>
                </ul>   
            </div>
        </div>
    </div>

А вот CSS:

CSS

.accordion {
    width: 270px;
    padding: 1px 5px 5px 5px;
    background: #141517;
 
    -webkit-box-shadow: 0px 1px 0px rgba(255,255,255, .05);
    -moz-box-shadow: 0px 1px 0px rgba(255,255,255, .05);
    box-shadow: 0px 1px 0px rgba(255,255,255, .05);
 
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}
 
.accordion .tab {
    display: block;
    height: 35px;
    margin-top: 4px;
    padding-left: 20px;
    font: bold 12px/35px Arial, sans-serif;
    text-decoration: none;
    color: #eee;
    
    text-shadow: 1px 1px 0px rgba(0,0,0, .2);
 
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
 
    background: #6c6e74; /* Old browsers */
    background: -moz-linear-gradient(top,  #6c6e74 0%, #4b4d51 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #6c6e74 0%,#4b4d51 100%); /* IE10+ */
    background: linear-gradient(top,  #6c6e74 0%,#4b4d51 100%); /* W3C */
 
    -webkit-box-shadow: 0px 1px 0px rgba(0,0,0, .1), inset 0px 1px 0px rgba(255,255,255, .1);
    -moz-box-shadow: 0px 1px 0px rgba(0,0,0, .1), inset 0px 1px 0px rgba(255,255,255, .1);
    box-shadow: 0px 1px 0px rgba(0,0,0, .1), inset 0px 1px 0px rgba(255,255,255, .1);
}
 
.accordion .tab:hover,
.accordion div:target .tab {
    color: #2b3b06;
    
    text-shadow: 0px 1px 0px rgba(255,255,255, .15);
 
    background: #a5cd4e; /* Old browsers */
    background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* IE10+ */
    background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%); /* W3C */
 
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .3), inset 1px 1px 1px rgba(255,255,255, .45);
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0, .3), inset 1px 1px 1px rgba(255,255,255, .45);
    box-shadow: 1px 1px 1px rgba(0,0,0, .3), inset 1px 1px 1px rgba(255,255,255, .45);
}
 
.accordion div .content {
    display: block;
    margin: 5px 0;
}
 
.accordion div:target .content {
    display: block;
}
 
.accordion > div {
    height: 40px;
    overflow: hidden;
 
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
 
.accordion > div:target {
    height: 360px;
}
 
/* Accordion Content Styles */
 
.accordion .content h1 {
    color: white;
    font: 18px/32px Arial, sans-serif;
}
 
.accordion .content p {
    margin: 10px 0;
    color: white;
    font: 11px/16px Arial, sans-serif;
}
 
.accordion .content span {
    font: italic 11px/12px Georgia, Arial, sans-serif;
    color: #4f4f4f;
}
 
.accordion .content em.bullet {
    width: 5px;
    height: 5px;
    margin: 0 5px;
    background: #6b8f1a;
    display: inline-block;
 
    -webkit-box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.4);
    -moz-box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.4);
    box-shadow: inset 1px 1px 1px rgba(255,255,255, 0.4);
 
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
 
.accordion .content ul li {
 
    list-style: none;
    float: left;
    margin: 5px 10px 5px 0;
}
 
.accordion .content img {
    -webkit-box-shadow: 2px 2px 6px rgba(0,0,0, .5);
    -moz-box-shadow: 2px 2px 6px rgba(0,0,0, .5);
    box-shadow: 2px 2px 6px rgba(0,0,0, .5);
}

@maximus2011 · 03.06.2013, 20:29

не, так дело не пойдет )) она всегда будет закрыта изначально. Плагин так устроен, что работает по клику. Кликнул - открылась... почитайте документацию, может что и есть из настроек

@Код - Альфа · 03.06.2013, 20:35 **[ТС]**

Сообщение от maximus2011

не, так дело не пойдет )) она всегда будет закрыта изначально. Плагин так устроен, что работает по клику. Кликнул - открылась... почитайте документацию, может что и есть из настроек

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

@maximus2011 · 03.06.2013, 21:03

ну это надо в плагине смотреть. Там есть что-то вроде активного класса, который присваивается при открытии пункта. Но это вряд ли...

@Код - Альфа · 03.06.2013, 21:20 **[ТС]**

Сообщение от maximus2011

ну это надо в плагине смотреть. Там есть что-то вроде активного класса, который присваивается при открытии пункта. Но это вряд ли...

В каком плагине? Там кроме css свойств, больше ничего нет. Никаких js файлов.

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	03.06.2013, 20:29	2
	не, так дело не пойдет )) она всегда будет закрыта изначально. Плагин так устроен, что работает по клику. Кликнул - открылась... почитайте документацию, может что и есть из настроек 0

@Код - Альфа 11 / 11 / 6 Регистрация: 27.04.2013 Сообщений: 138
	03.06.2013, 20:35 [ТС]	3
	Сообщение от maximus2011 не, так дело не пойдет )) она всегда будет закрыта изначально. Плагин так устроен, что работает по клику. Кликнул - открылась... почитайте документацию, может что и есть из настроек Может тогда как нибудь отделить два аккордеона, и в одном из них задать свойство, при котором он изначально будет не скрыт? Пытался, ничего не получается. 0

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	03.06.2013, 21:03	4
	ну это надо в плагине смотреть. Там есть что-то вроде активного класса, который присваивается при открытии пункта. Но это вряд ли... 0

@Код - Альфа 11 / 11 / 6 Регистрация: 27.04.2013 Сообщений: 138
	03.06.2013, 21:20 [ТС]	5
	Сообщение от maximus2011 ну это надо в плагине смотреть. Там есть что-то вроде активного класса, который присваивается при открытии пункта. Но это вряд ли... В каком плагине? Там кроме css свойств, больше ничего нет. Никаких js файлов. 0

Опции темы