Toggle List Items After Button Click Using Jquery

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

Solution 1:

The jquery syntax of the click function should be as given below and also in your css you are hiding all the li elements. So you have to toggle them back with the selector $('.showData li') instead of $('.showData'). Also use .icon-btn instead of .icon-button as you don't have such a class mentioned in your html.

$('.icon-btn').on('click', function() {
    $('.showData li').toggle();    
 });

Working snippet,

$(function() {
 $('.icon-btn').on('click', function() {
    //$('.showData li').toggle();  
    $(this).next('.showData').find('li').toggle();
 });
});

.services ul li {
display: none;
margin-left: -1.8em; 
/*color: #fff;*/
list-style: none;
margin-bottom: 1em;
font-size: 20px;
font-weight: bold;
font-family: 'Oswald', 'open-sans';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid text-center bg-black" id="services">
<div class="services">
<h2>SERVICES</h2>
<br>
<div class="row">
<div class="col-sm-3 iconpad-even">
  <img src="img/icons/icon_data_edit.png" alt="data"/>
  <button class="icon-btn" data-button="btnData">DATA</button>
  <ul class="showData">
    <li>Design</li>
    <li>Cable Installation</li>
    <li>Testing</li>
    <li>CAT5e, CAT6, CAT6A</li>
    </ul>
</div>

<div class="col-sm-3 iconpad-odd">
  <img src="img/icons/fiber-icon-edit.png" alt="fiber-icon" />
  <button class="icon-btn" data-button="btnFiber">FIBER</button>
  <ul class="showData">
    <li>Consultancy</li>
    <li>Building to Building</li>
    <li>Network Backbone</li>
    <li>Testing</li>
    </ul>
</div>

Solution 2:

Please try it

$( "body" ).on( "click", ".icon-button", function(){
    $('.showData').toggle();    
});

Solution 3:

The problem is that you don't have an element with a class icon-button your button has a class icon-btn so use $('.icon-btn') instead of $('.icon-button')

and you can use

$(function() {
 $('.icon-btn').on('click', function() {
    $('.showData').toggle();    
 });
});

and in css use

.showData{
   display: none;
}

and remove display:none from .services ul li

Note: be sure to include jquery