There are several blocks on the page ... Initially they are hidden by display: none;

When you select the radio function is triggered

$(function() { "use strict"; $('#d_1').change( function(event){ event.preventDefault(); $('#helpblock') .css('display', 'block') .animate({opacity: 1}, 200); }); });

But it works for the first block. And how to make the rest id = "helpblock" also become display: block ;?

  • class="helpblock" and $('.helpblock') The id attribute is the unique identifier of the DOM element. - Igor

1 answer 1

The page can not have two elements with the same id , and even if they are, the browser will interact only with the first of them (in your case just this behavior)

Change id to class

 $(function() { "use strict"; $('#d_1').change( function(event){ event.preventDefault(); $('.helpblock') // поиск по селектору класса .css('display', 'block') .animate({opacity: 1}, 200); }); }); // html <div class='helpblock'></div>