{"id":2241,"date":"2020-12-10T15:24:11","date_gmt":"2020-12-10T07:24:11","guid":{"rendered":"http:\/\/jilin.hydesign.tw\/?p=2241"},"modified":"2021-10-23T21:14:03","modified_gmt":"2021-10-23T13:14:03","slug":"css-checked","status":"publish","type":"post","link":"http:\/\/jilin.hydesign.tw\/index.php\/2020\/12\/10\/css-checked\/","title":{"rendered":"CSS checked  toggle  \u986f\u793a\u96b1\u85cf"},"content":{"rendered":"\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!--html\u7bc4\u4f8b- [table] \u986f\u793a\u96b1\u85cf class=\"expandable\" tr\u5167\u5bb9-->\n\n&lt;input type=\"checkbox\" id=\"expand-toggle\" \/>\n\n&lt;table>\n  &lt;thead>\n    &lt;tr>&lt;th>Column #1&lt;\/th>&lt;th>Column #2&lt;\/th>&lt;th>Column #3&lt;\/th>&lt;\/tr>\n  &lt;\/thead>\n  &lt;tbody>\n    &lt;tr class=\"expandable\">&lt;td>[more text]&lt;\/td>&lt;td>[more text]&lt;\/td>&lt;td>[more text]&lt;\/td>&lt;\/tr>\n    &lt;tr>&lt;td>[cell text]&lt;\/td>&lt;td>[cell text]&lt;\/td>&lt;td>[cell text]&lt;\/td>&lt;\/tr>\n    &lt;tr>&lt;td>[cell text]&lt;\/td>&lt;td>[cell text]&lt;\/td>&lt;td>[cell text]&lt;\/td>&lt;\/tr>\n    &lt;tr class=\"expandable\">&lt;td>[more text]&lt;\/td>&lt;td>[more text]&lt;\/td>&lt;td>[more text]&lt;\/td>&lt;\/tr>\n    &lt;tr class=\"expandable\">&lt;td>[more text]&lt;\/td>&lt;td>[more text]&lt;\/td>&lt;td>[more text]&lt;\/td>&lt;\/tr>\n  &lt;\/tbody>\n&lt;\/table>\n\n&lt;label for=\"expand-toggle\" id=\"expand-btn\">Toggle hidden rows&lt;\/label><\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/*css\u7bc4\u4f8b-  [table] \u986f\u793a\u96b1\u85cf class=\"expandable\" *\/\n\n\/* Hide the toggle checkbox *\/\n#expand-toggle {\n  display: none;\n}\n\n\/* Hide expandable content by default *\/\n.expandable {\n  visibility: collapse;\n  background: #ddd;\n}\n\n\/* Style the button *\/\n#expand-btn {\n  display: inline-block;\n  margin-top: 12px;\n  padding: 5px 11px;\n  background-color: #ff7;\n  border: 1px solid;\n  border-radius: 3px;\n}\n\n\/* Show hidden content when the checkbox is checked *\/\n#expand-toggle:checked ~ * .expandable {\n  visibility: visible;\n}\n\n\/* Style the button when the checkbox is checked *\/\n#expand-toggle:checked ~ #expand-btn {\n  background-color: #ccc;\n}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!--html\u7bc4\u4f8b - [input:checked gallery example]\u9078\u53d6\u6548\u679c-->\n\n&lt;div class=\"gallery-item\">\n    &lt;label for=\"gallery-item1\" class=\"gallery-label\">&lt;img src=\"images\/1s.jpg\" class=\"gallery-preview\" \/>&lt;\/label>\n    &lt;input type=\"radio\" name=\"gallery-list\" class=\"gallery-selector\" value=\"1.jpg\" id=\"gallery-item1\" \/>\n    &lt;img src=\"images\/1.jpg\" class=\"gallery-fullsize\" \/>\n&lt;\/div>\n&lt;div class=\"gallery-item\">\n    &lt;label for=\"gallery-item2\" class=\"gallery-label\">&lt;img src=\"images\/2s.jpg\" class=\"gallery-preview\" \/>&lt;\/label>\n    &lt;input type=\"radio\" name=\"gallery-list\" class=\"gallery-selector\" value=\"2.jpg\" id=\"gallery-item2\" \/>\n    &lt;img src=\"images\/2.jpg\" class=\"gallery-fullsize\" \/>\n&lt;\/div>\n&lt;div class=\"gallery-item\">\n    &lt;label for=\"gallery-item3\" class=\"gallery-label\">&lt;img src=\"images\/3s.jpg\" class=\"gallery-preview\" \/>&lt;\/label>\n    &lt;input type=\"radio\" name=\"gallery-list\" class=\"gallery-selector\" value=\"3.jpg\" id=\"gallery-item3\" \/>\n    &lt;img src=\"images\/3.jpg\" class=\"gallery-fullsize\" \/>\n&lt;\/div>\n&lt;div class=\"gallery-item\">\n    &lt;label for=\"gallery-item4\" class=\"gallery-label\">&lt;img src=\"images\/4s.jpg\" class=\"gallery-preview\" \/>&lt;\/label>\n    &lt;input type=\"radio\" name=\"gallery-list\" class=\"gallery-selector\" value=\"4.jpg\" id=\"gallery-item4\" \/>\n    &lt;img src=\"images\/4.jpg\" class=\"gallery-fullsize\" \/>\n&lt;\/div>\n<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* html\u7bc4\u4f8b-  [input:checked gallery example] *\/\n\n#gallery-container {\n\tposition: relative;\n\twidth: 500px;\n\theight: auto;\n\tpadding-top: 350px;\n\tpadding-bottom: 15px;\n\tmargin-left: auto;\n\tmargin-right: auto;\n\ttext-align: center;\n\tborder: 1px #aaaaaa solid;\n}\n\nimg.gallery-fullsize {\n\tposition: absolute;\n\ttop: 15px;\n\tleft: 50px;\n\tdisplay: none;\n}\n\ndiv.gallery-item {\n\tdisplay: inline-block;\n}\n\ninput.gallery-selector {\n\tdisplay: none;\n}\n\nlabel.gallery-label {\n\tcursor: pointer;\n}\n\ninput.gallery-selector:checked ~ img.gallery-fullsize {\n\tdisplay: block;\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,12,4],"tags":[],"class_list":["post-2241","post","type-post","status-publish","format-standard","hentry","category-css","category-front-end","category-notes"],"_links":{"self":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/2241","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/comments?post=2241"}],"version-history":[{"count":13,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/2241\/revisions"}],"predecessor-version":[{"id":2689,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/2241\/revisions\/2689"}],"wp:attachment":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/media?parent=2241"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/categories?post=2241"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/tags?post=2241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}