jQuery - .on('click') not working on <li>

Question

so I've been tasked with making a website using Wordpress and on the homepage there's a slider that if you click on the buttons below, it's displays another image, simple right? Well, I've got the slider and I've got the buttons, I've added the jQuery and it doesn't want to work.

I first tried making the buttons actually buttons:

<button type="button" class="btn btn-success" id="hideshow-healthcare">Healthcare</button>

and that worked fine when I used this:

    jQuery(document).ready(function() {
    jQuery('#hideshow-healthcare').on('click', function() {
        jQuery('#healthcare').show();
    };
};

So after having it working like that, I moved on to making the buttons in to li's instead so that I could follow the design. Upon doing this, the slider no longer works. I've tried mulitple different things including adding the ID to everything in the li to see if that would work, and sadly not. I did some research and tried to change

    jQuery('#hideshow-healthcare').on('click', function() {

to

    jQuery('li#hideshow-healthcare').on('click', function() {

but still, no luck. I was hoping someone would be able to provide a solution to this problem.

Also, this is the li code I'm currently using:

<li><a id="hideshow-healthcare"><h5>HEALTHCARE</h5> Lighting to create a feeling of well being</a></li>

Answer 1

You need to add space after li element to find its descendants #hideshow-healthcare. It should be

 jQuery('li #hideshow-healthcare').on('click', function() {