Skip to content

Instantly share code, notes, and snippets.

@badcommandorfilename

badcommandorfilename/hide-sidebar.html

Created February 25, 2019 01:50
Show Gist options
  • Save badcommandorfilename/db08fc1e0c28e5b628a079c8dc5f0461 to your computer and use it in GitHub Desktop.
Save badcommandorfilename/db08fc1e0c28e5b628a079c8dc5f0461 to your computer and use it in GitHub Desktop.
Download ZIP
CSS only hide sidebar or navbar toggle
Raw
hide-sidebar.html
<style>
#sidebar {
width: 250px;
}
#hide-sidebar:checked ~ #sidebar {
width: 0;
display: none;
}
#hide-sidebar-control > a::before {
content: "Hide";
}
#hide-sidebar:checked ~ #hide-sidebar-control > a::before {
content: "Show";
}
</style>
<input type="checkbox" name="hide-sidebar" id="hide-sidebar" value="true" style="display: none;" />
<label class="radio" for="hide-sidebar" id="hide-sidebar-control">
<a class="button is-small"></a>
</label>
<div id="sidebar" class="sidebar" role="navigation">
...
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment