CODEWITHSUNDEEP
javascripthtmlcss
Alexander
Alexander

Reputation: 151

Toggle showing/disappearing an element upon clicking another

I'm trying to make an element disappear when you open a menu, and disappear when you close that menu. The IDs and classes of what I'm working with are below if it helps, but I don't actually have any idea where to start. If this is possible in CSS, I'd prefer that, but I have a feeling it's not so JS is fine. I just don't know JS very well and I try to use as little as possible.

/* Element to disappear/reappear */
#logo

/* Element to click to open menu */
.menu-icon-open

/* Element to click to close menu */
.menu-icon-close

Upvotes: 0

Views: 250

Answers (1)

G.Artun
G.Artun

Reputation: 80

Only Css:

If you don't want to use JS, you need to use checkbox.

/*
what we are doing here is basically called 'checkbox hack' if I'm not wrong.
I recommend you to Google it.
*/
.menu-btn {
  apperance: none;
  -webkit-appearance: none;
}

nav#menu {
  display: none;  
}

.menu-btn:checked::after {
  content: "Close Menu";
}

.menu-btn::after {
  content: "Open Menu";
  background: rgba(233, 233, 33, 0.6);
  padding: 0.5em;
}

.menu-btn:checked + nav#menu {
  display: block;
}

.menu-btn:checked ~ div#logo{
  display: none;
}
<input type="checkbox" class="menu-btn" /> <!-- our checkbox -->

<!-- our menu, IMPORTANT: it comes right after our checkbox -->  
<nav id="menu">
  <ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
  </ul>
</nav>

<!-- our logo, IMPORTANT: it must have the same parent as our checkbox and
come after it. Doesn't have to be adjacent though. -->
<div id="logo">Logo</div>

Upvotes: 2

Related Questions