Last active
February 28, 2021 12:21
-
-
Save ktokot/7f26d5ceb5d8e3d64964d2934b7011d0 to your computer and use it in GitHub Desktop.
mdn div example togle hide/unhide row
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="ru"> | |
<head> | |
<link rel="stylesheet" href="style.css" /> | |
<meta charset="UTF-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Document</title> | |
</head> | |
<body> | |
<input type="checkbox" id="expand-toggle" /> | |
<label for="expand-toggle" id="expand-btn">Toggle hidden rows</label> | |
<div id='cardheader'> </div> | |
<div id='cardheader'> </div> | |
<div id='cardheader'> </div> | |
<div id='cardheader'> </div> | |
<div class=holder_expandable> | |
<div class="expandable"> | |
<div ><p>Single Characters:</p> | |
<fieldset> | |
<menuitem class="halfStyle" emtpy-star="☆" filled-star="★">☆</menuitem > | |
<menuitem class="halfStyle" emtpy-star="☆" filled-star="★">☆</menuitem > | |
<menuitem class="halfStyle" emtpy-star="☆" filled-star="★">☆</menuitem > | |
</fieldset> | |
</div> | |
</div> | |
</div> | |
<div><div id="outer"> | |
<div id="overlay" style="width:auto"></div> | |
<div id="inner"></div> | |
</div></div> | |
<div>[cell text]</div> | |
<div>[cell text]</div> | |
<div>[cell text]</div> | |
<div>[cell text]</div> | |
<div>[more text]</div> | |
<div>[more text]</div> | |
<div>[more text]</div> | |
<div>[more text]</div> | |
<div>[more text]</div> | |
<div>[more text]</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Hide the toggle checkbox */ | |
.holder_expandable { | |
margin : 0 auto 0 auto; | |
padding : auto; | |
display : inline-block; | |
width : 90vw; | |
position : relative; | |
z-index : 2; | |
background: rgba(255, 255, 255, 0); | |
} | |
.item { | |
float: left; | |
} | |
#expand-toggle { | |
display: none; | |
float : none; | |
} | |
/* Hide expandable content by default */ | |
.expandable { | |
visibility: hidden; | |
background: #ddd; | |
display : block; | |
} | |
/* Style the button */ | |
#expand-btn { | |
display : inline-block; | |
margin-top : 12px; | |
padding : 5px 11px; | |
background-color: #ff7; | |
border : 1px solid; | |
border-radius : 3px; | |
} | |
/* Show hidden content when the checkbox is checked */ | |
#expand-toggle:checked~* .expandable { | |
visibility: visible; | |
} | |
/* Style the button when the checkbox is checked */ | |
#expand-toggle:checked~#expand-btn { | |
background-color: #ccc; | |
content : "111"; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment