Псевдокласс :checked

[evanre]

Здравствуйте, помогите пожалуйста. Есть блок типа "Аккордеон" (вертикальные вкладки).

<ul class="accordion">    <li class="accordion_item">        <input type="radio" class="accordion_toggle" name="accordion-01" id="toggle-01" checked/>         <label class="accordion_trigger" for="toggle-01"><div  class="accordion-arrow"></div><span>Accordion Title 1</span></label>         <div class="accordion_target"><p>text1</p></div>    </li>    <li class="accordion_item">        <input type="radio" class="accordion_toggle" name="accordion-01" id="toggle-02"/>         <label class="accordion_trigger" for="toggle-02"><div  class="accordion-arrow"></div><span>Accordion Title 2</span></label>         <div class="accordion_target"><p>text2</p></div>    </li>    <li class="accordion_item">        <input type="radio" class="accordion_toggle" name="accordion-01" id="toggle-03"/>         <label class="accordion_trigger" for="toggle-03"><div  class="accordion-arrow"></div><span>Accordion Title 3</span></label>         <div class="accordion_target"><p>text1</p></div>    </li></ul>

ul.accordion {list-style: none;}li.accordion_item {border-bottom: 1px solid #d2d2d2;} /* Элемент label который запускает открыть/закрыть.*/label.accordion_trigger {    font: normal 14px "Droid Serif";    display: block;    background-color: #fff;    font-weight: bold;    cursor: pointer;    padding: 0.5rem;}div.accordion-arrow{    float: left;    background:url(../images/sprites.png) no-repeat;    background-position:-85px -95px;    width:24px;    height:24px;    margin-right: 15px;}/*элементы radio/checkbox всегда должны быть скрыты c помощью нулевых значений свойства clip*/.accordion_toggle {    border: 0;    clip: rect(0 0 0 0);    height: 1px;    margin: -1px;    overflow: hidden;    padding: 0;    position: absolute;    width: 1px;}/**скрытое содержание аккордеона c помощью нулевых значений свойства clip*/.accordion_target {    border: 0;    clip: rect(0 0 0 0);    height: 1px;    margin: -1px;    overflow: hidden;    padding: 0;    position: absolute;    width: 1px;    background-color: #fff;    color: #333;}/* когда переключатель checked на radio, показать содержимое аккордеона.*/.accordion_toggle:checked ~ div.accordion_target {    position: static;    overflow: visible;    width: auto;    height: 170px;    margin: auto;    clip: auto;    padding: 15px 15px 0 15px;}.accordion_toggle:checked ~ div.accordion-arrow{    background:url(../images/sprites.png) no-repeat;    background-position:-85px -65px;}

 

Все работает кроме класса ".accordion-arrow", этот класс подразумевает под собой стрелку которая находится рядом с заголовком одного из 3х элементов и меняется в зависимости от состояния радио-инпута.

Стрелка есть, но на всех элементах она отображается как "не-активная". т.е. когда элемент чекнутый, стрелка не меняется.

[Jack_V]

Здравствуйте, помогите пожалуйста. Есть блок типа "Аккордеон" (вертикальные вкладки).

 

Чем скорее дадите ссылку на код в сюда или сюда, тем скорее вам помогут.

Edited May 7, 2015 by Jack_V

[evanre]

Уже разобрался, просто более точно описал класс в стилях. Спасибо.

[Jack_V]

Уже разобрался, просто более точно описал класс в стилях. Спасибо.

 

Не за что же)