title: Toggle list items after button click using jQuery
body: <p>So i managed to get my buttons to show the list items in the unordered list. But now every time i click a button all the list items nested in unordered list appears and disappears when the button is clicked again.</p>
  
  <p>This is my updated HTML:</p>
  
  <pre><code>&lt;div class="container-fluid text-center bg-black" id="services"&gt;
  &lt;div class="services"&gt;
  &lt;h2&gt;SERVICES&lt;/h2&gt;
  &lt;br&gt;
  &lt;div class="row"&gt;
  &lt;div class="col-sm-3 iconpad-even"&gt;
    &lt;img src="img/icons/icon_data_edit.png" alt="data"/&gt;
    &lt;button class="icon-btn" data-button="btnData"&gt;DATA&lt;/button&gt;
    &lt;ul class="showData"&gt;
      &lt;li&gt;Design&lt;/li&gt;
      &lt;li&gt;Cable Installation&lt;/li&gt;
      &lt;li&gt;Testing&lt;/li&gt;
      &lt;li&gt;CAT5e, CAT6, CAT6A&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class="col-sm-3 iconpad-odd"&gt;
    &lt;img src="img/icons/fiber-icon-edit.png" alt="fiber-icon" /&gt;
    &lt;button class="icon-btn" data-button="btnFiber"&gt;FIBER&lt;/button&gt;
    &lt;ul class="showData"&gt;
      &lt;li&gt;Consultancy&lt;/li&gt;
      &lt;li&gt;Building to Building&lt;/li&gt;
      &lt;li&gt;Network Backbone&lt;/li&gt;
      &lt;li&gt;Testing&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Basically i have 6 div's that are structured the exact same way, only difference is the content on the list items. </p>
  
  <p>I've removed the display:none on the services ul li and added it to the css .showData class as suggested by @Mohammed-Yusef</p>
  
  <p>Here's the current jQuery:</p>
  
  <pre><code>$(function() {
  $('.icon-btn').on('click', function() {
  $('.showData').toggle();    
  });
  });
  </code></pre>