Аккордеонный контроль с вложенными элементами

Question

Я создал аккордеонный контур и в этом аккордеоне contol у него есть 2 переключателя и кнопка. Я создал в HTML5 с помощью javascrip и css в Dot net.Когда любой из переключателей отмечен на той же панели аккордеона некоторые другие панели управления должны открыться. И когда проверяется другая радиокнопка, панель 1-й радиокнопки должна быть отключена, а другая панель должна быть видна в том же аккордеонном управлении.

Answer 1

Это можно сделать только с помощью CSS, используя псевдоним :checked. -селектор.

Пример:

input[type="radio"] + div { 
    height: 0; 
} 

input[type="radio"]:checked + div { 
    height: 100px; 
} 

jsFiddle (в комплекте с переходами): http://jsfiddle.net/dH65w/

К сожалению переходы не работают правильно с height: auto, так что вам необходимо фиксированных высот. Кроме того, «+» часть CSS не работает в IE7, а переходы даже не работают в IE9.

Answer 2

Вот версия jQuery, по существу, такая же, как и мой другой ответ (более совместимый с браузером, но это JavaScript).

$('input[type="radio"]').change(function() { 
    $('input[type="radio"]:checked + div').animate({ 
     height: "100px" 
    }, ".25s"); 
    $('input[type="radio"]:not(:checked) + div').animate({ 
     height: 0 
    }, ".25s"); 
}); 

jsFiddle: http://jsfiddle.net/dH65w/1/

Путь JQuery является более гибким в том, что вы можете делать вещи, которые не будут разрешены по правилам CSS (такие как затрагивающие элементы вне родительского элемента), как и в это jsFiddle: http://jsfiddle.net/dH65w/2/