Question

I am using devise in my rails app which comes with its own alert/flash helpers. I have modified it so that it looks like this

<% flash.each do |key, value| %>
<%= content_tag(:div, value, :class => "flash #{key}") %>
<% end %> 

What i want to do is to be able to close this alert with a X in the top corner, rather than refresh the page to make it disappear. I have created an alert box with css/jquery and surrounded the relevant divs around the above code, however as its in the layouts/application file it is always visible when the page loads

Here is the CSS and Jquery if it helps

$(function() {
$('.close').click(function(){
    $('.myDiv').fadeOut("fast");
});


.close {
background:red;
font-weight:bold;
padding:5px;
cursor:pointer;
display:inline-block;
 }

.myDiv {
padding:10px;
background:#ccc;
width: 200px;
margin:0 auto;
height:50px;
 }

Answer 1

You can wrap the custom divs to only render if flash is not blank:

<% if flash.present? -%>
  <div id='flash'>
  ...
  </div>
<% end -%>