Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body>


<input type=checkbox name=gh id=ghc unchecked> <label for=ghc id=ghl> Good Hours Times</label>

<span class="gh"> works	1	</span>
<span class="gh"> works	2	</span>
<span class="gh"> works	3	</span>
<span class="gh"> works	4	</span>
<span class="gh"> works	5	</span>
<span class="gh"> works	6	</span>
<span class="gh"> works	7	</span>
<span class="gh"> works	8	</span>
<span class="gh"> works	9	</span>
<span class="gh"> works	10	</span>
<span class="gh"> works	11	</span>
<span class="gh"> works	12	</span>
<span class="gh"> works	13	</span>
<span class="gh"> works	14	</span>
<span class="gh"> works	15	</span>
<span class="gh"> works	16	</span>
<span class="gh"> works	17	</span>
<span class="gh"> works	18	</span>
<span class="gh"> works	19	</span>
<span class="gh"> works	20	</span>
<span class="gh"> works	21	</span>
<span class="gh"> works	22	</span>
<span class="gh"> works	23	</span>
<span class="gh"> works	24	</span>
<span class="gh"> works	25	</span>
<span class="gh"> works	26	</span>
<span class="gh"> works	27	</span>
<span class="gh"> works	28	</span>
<span class="gh"> works	29	</span>
<span class="gh"> works	30	</span>
<span class="gh"> works	31	</span>
<span class="gh"> works	32	</span>
<span class="gh"> works	33	</span>
<span class="gh"> works	34	</span>
<span class="gh"> works	35	</span>
<span class="gh"> works	36	</span>
<span class="gh"> works	37	</span>
<span class="gh"> works	38	</span>
<span class="gh"> works	39	</span>
<span class="gh"> works	40	</span>
<span class="gh"> works	41	</span>
<span class="gh"> works	42	</span>
<span class="gh"> works	43	</span>
<span class="gh"> works	44	</span>
<span class="gh"> works	45	</span>
<span class="gh"> works	46	</span>
<span class="gh"> works	47	</span>
<span class="gh"> works	48	</span>
<span class="gh"> works	49	</span>
<span class="gh"> works	50	</span>
<span class="gh"> works	51	</span>
<span class="gh"> works	52	</span>
<span class="gh"> works	53	</span>
<span class="gh"> works	54	</span>
<span class="gh"> works	55	</span>
<span class="gh"> works	56	</span>
<span class="gh"> works	57	</span>
<span class="gh"> works	58	</span>
<span class="gh"> works	59	</span>
<span class="gh"> works	60	</span>
<span class="gh"> works	61	</span>
<span class="gh"> works	62	</span>
<span class="gh"> works	63	</span>
<span class="gh"> works	64	</span>
<span class="gh"> works	65	</span>
<span class="gh"> works	66	</span>
<span class="gh"> works	67	</span>
<span class="gh"> works	68	</span>
<span class="gh"> works	69	</span>
<span class="gh"> works	70	</span>
<span class="gh"> works	71	</span>
<span class="gh"> works	72	</span>
<span class="gh"> works	73	</span>
<span class="gh"> works	74	</span>
<span class="gh"> works	75	</span>
<span class="gh"> works	76	</span>
<span class="gh"> works	77	</span>
<span class="gh"> works	78	</span>
<span class="gh"> works	79	</span>
<span class="gh"> works	80	</span>
<span class="gh"> works	81	</span>
<span class="gh"> works	82	</span>
<span class="gh"> works	83	</span>
<span class="gh"> works	84	</span>
<span class="gh"> works	85	</span>
<span class="gh"> works	86	</span>
<span class="gh"> works	87	</span>
<span class="gh"> works	88	</span>
<span class="gh"> works	89	</span>
<span class="gh"> works	90	</span>
<span class="gh"> works	91	</span>
<span class="gh"> works	92	</span>
<span class="gh"> works	93	</span>
<span class="gh"> works	94	</span>
<span class="gh"> works	95	</span>
<span class="gh"> works	96	</span>
<span class="gh"> works	97	</span>
<span class="gh"> works	98	</span>
<span class="gh"> works	99	</span>
<span class="gh"> works	100	</span>
<span class="gh"> works	101	</span>
<span class="gh"> works	102	</span>
<span class="gh"> works	103	</span>
<span class="gh"> works	104	</span>
<span class="gh"> works	105	</span>
<span class="gh"> works	106	</span>
<span class="gh"> works	107	</span>
<span class="gh"> works	108	</span>
<span class="gh"> works	109	</span>
<span class="gh"> works	110	</span>
<span class="gh"> works	111	</span>
<span class="gh"> works	112	</span>
<span class="gh"> works	113	</span>
<span class="gh"> works	114	</span>
<span class="gh"> works	115	</span>
<span class="gh"> works	116	</span>
<span class="gh"> works	117	</span>
<span class="gh"> works	118	</span>
<span class="gh"> works	119	</span>
<span class="gh"> works	120	</span>
<span class="gh"> works	121	</span>
<span class="gh"> works	122	</span>
<span class="gh"> works	123	</span>
<span class="gh"> works	124	</span>
<span class="gh"> works	125	</span>
<span class="gh"> works	126	</span>
<span class="gh"> works	127	</span>
<span class="gh"> works	128	</span>
<span class="gh"> works	129	</span>
<span class="gh"> works	130	</span>
<span class="gh"> works	131	</span>
<span class="gh"> works	132	</span>
<span class="gh"> works	133	</span>
<span class="gh"> works	134	</span>
<span class="gh"> works	135	</span>
<span class="gh"> works	136	</span>
<span class="gh"> works	137	</span>
<span class="gh"> works	138	</span>
<span class="gh"> works	139	</span>
<span class="gh"> works	140	</span>
<span class="gh"> works	141	</span>
<span class="gh"> works	142	</span>
<span class="gh"> works	143	</span>
<span class="gh"> works	144	</span>
<span class="gh"> works	145	</span>
<span class="gh"> works	146	</span>
<span class="gh"> works	147	</span>
<span class="gh"> works	148	</span>
<span class="gh"> works	149	</span>
<span class="gh"> works	150	</span>
<span class="gh"> works	151	</span>
<span class="gh"> works	152	</span>
<span class="gh"> works	153	</span>
<span class="gh"> works	154	</span>
<span class="gh"> works	155	</span>
<span class="gh"> works	156	</span>
<span class="gh"> works	157	</span>
<span class="gh"> works	158	</span>
<span class="gh"> works	159	</span>
<span class="gh"> works	160	</span>
<span class="gh"> works	161	</span>
<span class="gh"> works	162	</span>
<span class="gh"> works	163	</span>
<span class="gh"> works	164	</span>
<span class="gh"> works	165	</span>
<span class="gh"> works	166	</span>
<span class="gh"> works	167	</span>
<span class="gh"> works	168	</span>
<span class="gh"> works	169	</span>
<span class="gh"> works	170	</span>
<span class="gh"> works	171	</span>
<span class="gh"> works	172	</span>
<span class="gh"> works	173	</span>
<span class="gh"> works	174	</span>
<span class="gh"> works	175	</span>
<span class="gh"> works	176	</span>
<span class="gh"> works	177	</span>
<span class="gh"> works	178	</span>
<span class="gh"> works	179	</span>
<span class="gh"> works	180	</span>
<span class="gh"> works	181	</span>
<span class="gh"> works	182	</span>
<span class="gh"> works	183	</span>
<span class="gh"> works	184	</span>
<span class="gh"> works	185	</span>
<span class="gh"> works	186	</span>
<span class="gh"> works	187	</span>
<span class="gh"> works	188	</span>
<span class="gh"> works	189	</span>
<span class="gh"> works	190	</span>
<span class="gh"> works	191	</span>
<span class="gh"> works	192	</span>
<span class="gh"> works	193	</span>
<span class="gh"> works	194	</span>
<span class="gh"> works	195	</span>
<span class="gh"> works	196	</span>
<span class="gh"> works	197	</span>
<span class="gh"> works	198	</span>
<span class="gh"> works	199	</span>
<span class="gh"> works	200	</span>
<span class="gh"> works	201	</span>
<span class="gh"> works	202	</span>
<span class="gh"> works	203	</span>
<span class="gh"> works	204	</span>
<span class="gh"> works	205	</span>
<span class="gh"> works	206	</span>
<span class="gh"> works	207	</span>
<span class="gh"> works	208	</span>
<span class="gh"> works	209	</span>
<span class="gh"> works	210	</span>
<span class="gh"> works	211	</span>
<span class="gh"> works	212	</span>
<span class="gh"> works	213	</span>
<span class="gh"> works	214	</span>
<span class="gh"> works	215	</span>
<span class="gh"> works	216	</span>
<span class="gh"> works	217	</span>
<span class="gh"> works	218	</span>
<span class="gh"> works	219	</span>
<span class="gh"> works	220	</span>
<span class="gh"> works	221	</span>
<span class="gh"> works	222	</span>
<span class="gh"> works	223	</span>
<span class="gh"> works	224	</span>
<span class="gh"> works	225	</span>
<span class="gh"> works	226	</span>
<span class="gh"> works	227	</span>
<span class="gh"> works	228	</span>
<span class="gh"> works	229	</span>
<span class="gh"> works	230	</span>
<span class="gh"> works	231	</span>
<span class="gh"> works	232	</span>
<span class="gh"> works	233	</span>
<span class="gh"> works	234	</span>
<span class="gh"> works	235	</span>
<span class="gh"> works	236	</span>
<span class="gh"> works	237	</span>
<span class="gh"> works	238	</span>
<span class="gh"> works	239	</span>
<span class="gh"> works	240	</span>
<span class="gh"> works	241	</span>
<span class="gh"> works	242	</span>
<span class="gh"> works	243	</span>
<span class="gh"> works	244	</span>
<span class="gh"> works	245	</span>
<span class="gh"> works	246	</span>
<span class="gh"> works	247	</span>
<span class="gh"> works	248	</span>
<span class="gh"> works	249	</span>
<span class="gh"> works	250	</span>
<span class="gh"> works	251	</span>
<span class="gh"> works	252	</span>
<span class="gh"> works	253	</span>
<span class="gh"> works	254	</span>
<span class="gh"> works	255	</span>
<span class="gh"> works	256	</span>
<span class="gh"> works	257	</span>
<span class="gh"> works	258	</span>
<span class="gh"> works	259	</span>
<span class="gh"> works	260	</span>
<span class="gh"> works	261	</span>
<span class="gh"> works	262	</span>
<span class="gh"> works	263	</span>
<span class="gh"> works	264	</span>
<span class="gh"> works	265	</span>
<span class="gh"> works	266	</span>
<span class="gh"> works	267	</span>
<span class="gh"> works	268	</span>
<span class="gh"> works	269	</span>
<span class="gh"> works	270	</span>
<span class="gh"> works	271	</span>
<span class="gh"> works	272	</span>
<span class="gh"> works	273	</span>
<span class="gh"> works	274	</span>
<span class="gh"> works	275	</span>
<span class="gh"> works	276	</span>
<span class="gh"> works	277	</span>
<span class="gh"> works	278	</span>
<span class="gh"> works	279	</span>
<span class="gh"> works	280	</span>
<span class="gh"> works	281	</span>
<span class="gh"> works	282	</span>
<span class="gh"> works	283	</span>
<span class="gh"> works	284	</span>
<span class="gh"> works	285	</span>
<span class="gh"> works	286	</span>
<span class="gh"> works	287	</span>
<span class="gh"> works	288	</span>
<span class="gh"> works	289	</span>
<span class="gh"> works	290	</span>
<span class="gh"> works	291	</span>
<span class="gh"> works	292	</span>
<span class="gh"> works	293	</span>
<span class="gh"> works	294	</span>
<span class="gh"> works	295	</span>
<span class="gh"> works	296	</span>
<span class="gh"> works	297	</span>
<span class="gh"> works	298	</span>
<span class="gh"> works	299	</span>
<span class="gh"> works	300	</span>
<span class="gh"> works	301	</span>
<span class="gh"> works	302	</span>
<span class="gh"> works	303	</span>
<span class="gh"> works	304	</span>
<span class="gh"> works	305	</span>
<span class="gh"> works	306	</span>
<span class="gh"> works	307	</span>
<span class="gh"> works	308	</span>
<span class="gh"> works	309	</span>
<span class="gh"> works	310	</span>
<span class="gh"> works	311	</span>
<span class="gh"> works	312	</span>
<span class="gh"> works	313	</span>
<span class="gh"> works	314	</span>
<span class="gh"> works	315	</span>
<span class="gh"> works	316	</span>
<span class="gh"> works	317	</span>
<span class="gh"> works	318	</span>
<span class="gh"> works	319	</span>
<span class="gh"> works	320	</span>
<span class="gh"> works	321	</span>
<span class="gh"> works	322	</span>
<span class="gh"> works	323	</span>
<span class="gh"> works	324	</span>
<span class="gh"> works	325	</span>
<span class="gh"> works	326	</span>
<span class="gh"> works	327	</span>
<span class="gh"> works	328	</span>
<span class="gh"> works	329	</span>
<span class="gh"> works	330	</span>
<span class="gh"> works	331	</span>
<span class="gh"> works	332	</span>
<span class="gh"> works	333	</span>
<span class="gh"> works	334	</span>
<span class="gh"> works	335	</span>
<span class="gh"> works	336	</span>
<span class="gh"> works	337	</span>
<span class="gh"> works	338	</span>
<span class="gh"> works	339	</span>
<span class="gh"> works	340	</span>
<span class="gh"> works	341	</span>
<span class="gh"> works	342	</span>
<span class="gh"> works	343	</span>
<span class="gh"> works	344	</span>
<span class="gh"> works	345	</span>
<span class="gh"> works	346	</span>
<span class="gh"> works	347	</span>
<span class="gh"> works	348	</span>
<span class="gh"> works	349	</span>
<span class="gh"> works	350	</span>
<span class="gh"> works	351	</span>
<span class="gh"> works	352	</span>
<span class="gh"> works	353	</span>
<span class="gh"> works	354	</span>
<span class="gh"> works	355	</span>
<span class="gh"> works	356	</span>
<span class="gh"> works	357	</span>
<span class="gh"> works	358	</span>
<span class="gh"> works	359	</span>
<span class="gh"> works	360	</span>
<span class="gh"> works	361	</span>



              
            
!

CSS

              
                

.gh {
display: none;
}
#ghc:checked ~ .gh{
display:block;
}

              
            
!

JS

              
                
              
            
!
999px

Console