Не так давно я писал о применении псевдо класса :target. В сегодняшнем уроке вы узнаете, как создать простой аккордеон, используя этот элемент CSS3. Что такое аккордеон? Если вы никогда не сталкивались с подобным элементом, то хочу сказать, что аккордеон - это прекрасное решение вопроса размещения контента на странице. Основная выгода – экономия места на странице. HTML5 Для демонстрации примера я буду использовать лишь один новый HTML5 элемент, который называется section. Когда мы ориентируемся на старые браузеры, нам необходимо воспользоваться следующим трюком: 1 <script>document.createElement('section');</script> А для Internet Explorer я использую следующую уловку: 1 <!--[if lt IE 9]> 2 <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> 3 <![endif]--> Разметка Давайте, наконец, закончим с теорией и приступим к практике: 1 <div class="accordion"> 2 <section id="one"> 3 <h2><a href="#one">Heading 1</a></h2> 4 <div> 5 <p>content</p> 6 </div> 7 </section> 8 </div> Секция accordion будет содержать всё содержимое аккордеона; Каждый элемент section содержит заголовок и контент; CSS 01 section 02 { 03 display: block; 04 } 05 06 .accordion 07 { 08 background-color: #eee; 09 border: 1px solid #ccc; 10 width: 600px; 11 padding: 10px; 12 margin: 50px auto; 13 -moz-border-radius: 3px; 14 -webkit-border-radius: 3px; 15 border-radius: 3px; 16 -moz-box-shadow: 0 1px 0 #999; 17 -webkit-box-shadow: 0 1px 0 #999; 18 box-shadow: 0 1px 0 #999; 19 } 20 21 .accordion section 22 { 23 border-bottom: 1px solid #ccc; 24 margin: 5px; 25 background-color: #fff; 26 background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee)); 27 background-image: -webkit-linear-gradient(top, #fff, #eee); 28 background-image: -moz-linear-gradient(top, #fff, #eee); 29 background-image: -ms-linear-gradient(top, #fff, #eee); 30 background-image: -o-linear-gradient(top, #fff, #eee); 31 background-image: linear-gradient(top, #fff, #eee); 32 -moz-border-radius: 5px; 33 -webkit-border-radius: 5px; 34 border-radius: 5px; 35 } 36 37 .accordion h2, 38 .accordion p 39 { 40 margin: 0; 41 } 42 43 .accordion p 44 { 45 padding: 10px; 46 } 47 48 .accordion h2 a 49 { 50 display: block; 51 position: relative; 52 font: 14px/1 'Trebuchet MS', 'Lucida Sans'; 53 padding: 10px; 54 color: #333; 55 text-decoration: none; 56 -moz-border-radius: 5px; 57 -webkit-border-radius: 5px; 58 border-radius: 5px; 59 } 60 61 .accordion h2 a:hover 62 { 63 background: #fff; 64 } 65 66 .accordion h2 + div 67 { 68 height: 0; 69 overflow: hidden; 70 -moz-transition: height 0.3s ease-in-out; 71 -webkit-transition: height 0.3s ease-in-out; 72 -o-transition: height 0.3s ease-in-out; 73 transition: height 0.3s ease-in-out; 74 } 75 76 .accordion :target h2 a:after 77 { 78 content: ''; 79 position: absolute; 80 right: 10px; 81 top: 50%; 82 margin-top: -3px; 83 border-top: 5px solid #333; 84 border-left: 5px solid transparent; 85 border-right: 5px solid transparent; 86 } 87 88 .accordion :target h2 + div 89 { 90 height: 100px; 91 } Результат Демо работает только в тех браузерах, которые поддерживают псевдо класс :target. Так что, если вы вздумаете использовать этот аккордеон в ваших проектах, учтите, что решение, представленное в этом уроке, не является кроссбраузерным. Для тех из вас, кого это не устраивает, приглашаю посетить вот эту страницу для того, чтобы познакомиться с точно таким же примером, только на jQuery.