jQuery toggle between 4 divs

Question

I have a problem with jQuery toggle between 4 divs. I have no idea why it doesn't work. It just showed me the first div and didn't do anything. When I used it on another webpage, it worked. Code is below:

HTML:

<table style="width: 75%; border: 0; text-align: center; margin: 0 auto;" align="center" padding="10"><tr>
<td width="50%" align="center"><a class="ukaz" target="1"></a></td>
<td width="50%" align="center"><a class="ukaz" target="2"></a></td></tr>
<tr>
<td width="50%" align="center"><a class="ukaz" target="3"></a></td>
<td width="50%" align="center"><a class="ukaz" target="4"></a></td>
</tr>
</table>

<div id="div1" class="cil" style="display:block;">
text
</div>
<div id="div2" class="cil">
text
</div>
<div id="div3" class="cil">
text
</div>
<div id="div4" class="cil">
text
</div> 

CSS:

 .cil {
 display: none;
 } 

JS:

jQuery(function () {
    jQuery('.ukaz').click(function () {
        var index = $(this).index(),
            newTarget = jQuery('.cil').eq(index).slideDown();
        jQuery('.cil').not(newTarget).slideUp();

    });
});

Answer 1

Your current expression finds the index of the clicked element but it doesn't know the context to which element it needs to find index to. You need to find the index of the click element via using all elements matching class .ukaz

$('.ukaz').click(function () {
    var index = $('.ukaz').index($(this));
    $('.cil').slideUp();
   $('.cil').eq(index).slideDown();
});

Example : https://jsfiddle.net/DinoMyte/qgo90beb/1/