Today I start posting examples of working with css3, which may be useful in the study. Recently, while scouring the Internet, I came across such a simple example of a spoiler created in css3 and decided to share it with you.

See an example of work here.

Creating a structure for the future spoiler

Here is the structure and ready, I think further, it will be correct to create and include styles for our spoiler. As I said, our tabs, I will work on pure css3 and without any scripts.

spoiler styles

To understand, how everything works, must first understand, what does the attribute do for in the tag <label>. Attribute for indicates the label relationship Label to the desired checkbox. This feature allows you to write a tag label separately from input, and when you click on label there will be an imitation of a click on the checkbox itself.

The styles themselves play a significant and key role in this code., which allow you to keep the spoiler open or close with a different state of the checkbox.

Style closes all spoilers on load

Style allows you to open the spoiler, whose checkbox is in the checked state

The example itself is interesting., in the near future, when all browsers will work well with CSS3, it will be possible to use it and thereby speed up your site. So far I have tested in FF browsers, Opera, IE, Chrome, Safari, Yandex and the example proved to be quite tolerable, apart from the little details, I think you can start using.

We have reviewed the main points of work, concerning this example. If you have questions or corrections, write in the comments, thanks are also accepted. For CSS and HTML, I can advise you to read the site htmlbook.ru, it serves as a great reference for me..

You can view the work of the spoiler on the website jsfiddle.net. This concludes my css3 tutorial., suggest new scripts for review.

/* */