title: How to make CSS drop down menu appear/change on click
body: <p>I have a web page, 1000px by 1000px for the main div. Inside the main div, at the top, there is a horizontal bar with four sections, each taking up 1/4 of the space. Each section has some text [wrapped in h2 tag], horizontally/vertically centered in the middle of the 1/4 section and each section must generate a drop-down menu. </p>
  
  <p>For the drop down menu [which must work both on mobile and desktop], I borrowed the idea of using a checkbox [check for make dropdown visible, uncheck for invisible], but it isn't working correctly. The checkbox is small and if it is invisible it is almost impossible to know where to click to check/uncheck. I want the drop down menu to appear if the user clicks/taps ANYWHERE in the 1/4 section area.</p>
  
  <p>The horizontal row of 1/4 section drop down menus looks like this:
  <a href="https://i.stack.imgur.com/a3IdR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/a3IdR.png" alt="Row of drop down menus"></a></p>
  
  <p>^ Note that they don't actually work.</p>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;div id="Media_Choices"&gt;
      &lt;div id="Video" class="media_choice"&gt; &lt;h2&gt;Video▼&lt;/h2&gt; &lt;/div&gt;
      &lt;div id="Pictures" class="media_choice"&gt; &lt;h2&gt;Pictures▼&lt;/h2&gt; &lt;/div&gt;
      &lt;div id="Audio" class="media_choice"&gt; &lt;h2&gt;Audio▼&lt;/h2&gt; &lt;/div&gt;
      &lt;div id="Stories" class="media_choice"&gt; &lt;h2&gt;Stories▼&lt;/h2&gt; &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#Media_Choices {
      width: 100%;
      max-height:40px;
      min-height:40px;
  }
  .media_choice {
      display: inline;
      float: left;
      width: 24.5%;
      max-height: 38px;
      min-height: 38px;
      text-align: center;
      vertical-align: middle;
      line-height: 38px;       /* the same as your div height */
  }
  #Video {
  }
  #Pictures {
  }
  #Audio {
  }
  #Stories {
  }
  </code></pre>
  
  <p>Extra credit if you can get the ▼ downward facing arrow to turn into a ▲ whenever the drop down menu is down and then revert back into a ▼ downward facing arrow whenever the menu is up. You don't need to use the check-box based technique [I know there is a hover option], but anything that works cross platform is good.</p>
  
  <p>For reference, check boxes were origionally implemented using the following code [taken from another question], but copy-pasting in this solution and changing the text inside the box isn't good enough:</p>
  
  <pre><code>&lt;input class="dropdowninput" type="checkbox" id="dropdownbox1"/&gt;
  &lt;div class="dropdownbox"&gt;
      &lt;label for="dropdownbox1"&gt;Open dropdown&lt;/label&gt;
      &lt;ul class="dropdown"&gt;
          &lt;li&gt;...&lt;/li&gt;&lt;li&gt;etc&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  with CSS:
  
  .dropdowninput, .dropdown {display:none;}
  .dropdowninput:checked + .dropdownbox .dropdown {display:block;}
  </code></pre>