Spoiler with css ...
On the pre-holiday days, there was a moment, I wanted to distract myself - to plunge into the world of amusing ideas, moving away from the worries of the holiday. In the end, the idea: not waiting for the coming of html5, - to make a spoiler "on click" through css and HTML.
Earlier in the internet, attempts were made to implement this through pseudo-classes, mainly through: focus, which led to the container self-concealment, when the focus was lost.
The basis of this design - pseudo-class : checked
')
As you can see, the cross-browser code was obtained, starting with IE9, where there is already a “: checked” pseudo-class and ending with current versions of other browsers. According to the plan, this is a “pure” html-css implementation.
When trying to expand the effect on IE6-8, (here, as usual for IE, the “purity” of the implementation is lost), and we include the Google Pseudo-Class Library for IE:
there is a dotted stroke of the check-box at the focus; // fixed (hint from fcunited )
in IE6-7, the vintage check panel is pushed to the left of the spoiler; (But we did not set ourselves the task of supporting the data of Yeh in the original designs.
PS: The code allows you to view the content of the spoiler when java-script is disabled, which is required when surfing from old mobile phones, anonymizers or from hard-tuned firewalls.
I want to express my gratitude to Octane with the javascript.ru forum and devote , without which the idea could not be realized.
Earlier in the internet, attempts were made to implement this through pseudo-classes, mainly through: focus, which led to the container self-concealment, when the focus was lost.
The basis of this design - pseudo-class : checked
')
Minimalist idea looks like this:
/* CSS */ .spoiler > input + .box { display: none; } .spoiler > input:checked + .box { display: block; } <!--// HTML //--> <div class="spoiler"> <input type="checkbox" > <div class="box"> . </div> </div> As you can see, the cross-browser code was obtained, starting with IE9, where there is already a “: checked” pseudo-class and ending with current versions of other browsers. According to the plan, this is a “pure” html-css implementation.
When trying to expand the effect on IE6-8, (here, as usual for IE, the “purity” of the implementation is lost), and we include the Google Pseudo-Class Library for IE:
<!-- Compliance patch for Microsoft browsers --> <!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/trunk/lib/IE9.js"></script><![endif]-->
Under the cut the final code of “cross-browser dances” * was tested in P, Win7-8 *
<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>C css</title> <style> .spoiler > input + .box > blockquote{ display: none; } .spoiler > input:checked + .box > blockquote { display: block; } .spoiler > input[type="checkbox"] { cursor: pointer; border-color:transparent!important; border-style:none!important; background:transparent none!important; position:relative;z-index:1; margin:-10px 0 -30px -230px; } .spoiler > input[type="checkbox"]:focus { outline:none; /* 8 "" */ } .spoiler span.close, .spoiler span.open{ padding-left:22px; color: #00f!important; text-decoration: underline; } .spoiler > input + .box > span.close { display: none; } .spoiler > input:checked + .box > span.close { background: url(http://st0.bbcorp.ru/img/minus.png) 4px 60% no-repeat; display: inline; } .spoiler > input:checked + .box > span.open { display: none; } .spoiler > input + .box > span.open { background: url(http://st0.bbcorp.ru/img/plus.png) 4px 60% no-repeat; display: inline; } .spoiler blockquote, .spoiler{ padding:1em; border-radius:15px; -webkit-border-radius:15px; -khtml-border-radius:15px; -moz-border-radius:15px; -o-border-radius:15px; -ms-border-radius:15px; } .spoiler { overflow-x:hidden; box-shadow: 0px 3px 8px #808080; border:#E5E5E5 solid 2px; -webkit-box-shadow:0px 3px 8px #808080; -khtml-box-shadow:0px 3px 8px #808080; -moz-box-shadow:0px 3px 8px #808080; -ms-box-shadow:0px 3px 8px #808080; } .spoiler blockquote { margin-top:12px; min-height: 23px; border:#CDCDCD 2px dashed; } </style> <!-- Compliance patch for Microsoft browsers --> <!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/trunk/lib/IE9.js"></script><![endif]--> </head> <body> <div id="wrap" style="padding:200px 40px;width:70%;margin:0 auto;background-color:#fff;height:100%"> <div class="spoiler"> <!--* tabindex="-1" "tab" --> <input style="width:360px;height:45px;" type="checkbox" tabindex="-1" > <div class="box"> <span class=close></span><span class=open></span> <blockquote class="Untext"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </blockquote> </div> </div> </div> </body> </html> Minuses:
In IE8 -in IE6-7, the vintage check panel is pushed to the left of the spoiler; (But we did not set ourselves the task of supporting the data of Yeh in the original designs.
Demo
PS: The code allows you to view the content of the spoiler when java-script is disabled, which is required when surfing from old mobile phones, anonymizers or from hard-tuned firewalls.
I want to express my gratitude to Octane with the javascript.ru forum and devote , without which the idea could not be realized.
Source: https://habr.com/ru/post/167151/
All Articles