Button click makes content appear in _Layout.cshtml

Question

At the top of my view /Home/Clear.cshtml, I have

<button type="button" id="show" class="find-proj">Find Project</button>

At the bottom of my /Shared/_Layout.cshtml view, I have a table that is wrapped in

<div class="wrapper">...</div>

My CSS has

.wrapper { display: none; }

And in the head of my /Shared/_Layout.cshtml view I have the following script:

<script>
$(document).ready(function(){
  $("#show").click(function(){
    $(".wrapper").show();
  });
});
</script>

The goal is that when I press the button, the table appears at the bottom of the page. The table is currently invisible, but when I press the button, nothing happens.
EDIT: The mistake was that for some reason jQuery was being loaded at the bottom of the page for some strange reason. I changed $(".wrapper").show(); to $(".wrapper").css('display','block'); and moved jQuery to load before it, and it works like a charm. Thanks everyone!

I just put your code into a snippet and it works as expected. Did you forget to include jquery? Any errors in the browser console? Is the rendered HTML in your browser appearing correctly? — James, May 26 '17 at 15:25

Brian Mains · Answer 1 · 2017-05-26T15:51:53.233

Make sure there aren't any JS errors, and the $("#show") selector returns a result, as well as the $(".wrapper") selector. That might be the issue; however, it could also be the show() call isn't overriding the wrapper display:none definition. A way to work around that is:

1) Add a class to the DIV:

<div class="find-project wrapper">...</div>

2) And then change the button click handler to:

<script>
$(document).ready(function(){
  $("#show").click(function(){
    $(".find-project").removeClass("wrapper");
  });
});
</script>

Later you can then hide it again by adding the class back via:

$(".find-project").addClass("wrapper");

Since the wrapper class defines display: none, calling show() seems to not be overriding that, having one class to identify the element and one class to show/hide it is the perfect combo in this situation.

score 0 · Accepted Answer · answered May 26 '17 at 16:13

I think you can try with the following way.

$('.wrapper').css('display','block');

And also kindly take a look at the comment of the following link:

https://stackoverflow.com/a/5059661/3397630

Hope it was helpful, kindly let me know your thoughts or feedbacks Thanks

karthik

score 0 · Answer 3 · answered May 26 '17 at 20:14

.show() set the style attribute, where the display:none exists in the .wrapper class. These tend to conflict. Use one or the other. I find it easier to have a .hidden{display:none;} class and toggle between .addClass('hidden') and .removeClass('hidden'), or $('.wrapper').toggleClass('hidden')

Button click makes content appear in _Layout.cshtml

3 Answers3