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();
 });
});

.servicesulli {
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';
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="container-fluid text-center bg-black"id="services"><divclass="services"><h2>SERVICES</h2><br><divclass="row"><divclass="col-sm-3 iconpad-even"><imgsrc="img/icons/icon_data_edit.png"alt="data"/><buttonclass="icon-btn"data-button="btnData">DATA</button><ulclass="showData"><li>Design</li><li>Cable Installation</li><li>Testing</li><li>CAT5e, CAT6, CAT6A</li></ul></div><divclass="col-sm-3 iconpad-odd"><imgsrc="img/icons/fiber-icon-edit.png"alt="fiber-icon" /><buttonclass="icon-btn"data-button="btnFiber">FIBER</button><ulclass="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