How to change css of tag from an outside link
- You can use input type='checkbox' for it :
<input type="checkbox" style="display: none" id="cb"><label for="cb">Click Here</label><div> Hello. This is some stuff.</div>- One more better solution using
:target
#menu .menu{ display:none; }#menu:target .menu{ display: block;}#menu:target .menu__open{ display: none;}#menu .menu__close{ display: none;}#menu:target .menu__close{ display: block;}<div id="menu"> <a href="#menu" class="menu__open">Open menu</a> <a href="#" class="menu__close">Close menu</a> <div class="menu"> Hello. This is some stuff. </div></div>
If you are using jquery, you can use jquery.toggle()
Example:
$(".closed").click(function(event) { event.stopPropagation() $(".sf-menu").toggle();});Source: https://api.jquery.com/toggle/
You can do it using only CSS. The trick is to leave a trail that could be clicked and work as a switch/button for turning display on or off. You can accomplish that by wrapping your content needed to be toggled into some div or any other element suitable to you.
Here is a little example for that.
label { cursor: pointer;}#menu-toggle { display: none; /* hide the checkbox */}#menu { display: none;}#menu-toggle:checked + #menu { display: block;}<label for="menu-toggle">Click me to toggle menu</label><input type="checkbox" id="menu-toggle"/><ul id="menu"> <li><a href="#">First link</a></li> <li><a href="#">Second link</a></li> <li><a href="#">Third link</a></li></ul>