显示一个隐藏元素的jQuery

Question

I don't know why it doesn't work with bootstrap modal .

I want to show the hidden element.

I tried 3 different way's

(with display:none; and in javascript a did $('..').show() ,

visibility:hidden and in the javascript $('..').css('visibilty','visible') ,

and the class="hidden" and in the javascript $('..').removeClass('hidden') )

here is my code :

 $('.btn[id="zaki"]').click(function() { $('#show_1524').show(); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="btn btn-danger" id="zaki">ilyes_show</button> <div> <p style="display:none;" id="show_1524">..................</p> </div> 

Answer 1

Though your code works fine but since inline styles have highest specificity replace the inline style with a class and then on button click use removeClass to remove it

 $('.btn[id="zaki"]').click(function() { $('#show_1524').removeClass('hideElem'); }) 

 .hideElem { display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="btn btn-danger" id="zaki">ilyes_show</button> <div> <p class="hideElem" id="show_1524">..................</p> </div> 

Answer 2

 $('.btn[id="zaki"]').click(function() { $('#show_1524').show(); }) $('.btn[id="zaki-hide"]').click(function() { $('#show_1524').hide(); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <button class="btn btn-danger" id="zaki">ilyes_show</button> <button class="btn btn-danger" id="zaki-hide">ilyes_hide</button> <div> <p style="display:none;" id="show_1524">..................</p> </div>