How to toggle visibility of 2 divs after clicking a mailto link?


Tags: jquery,html,css

Problem :

I have the following mailto link

<div class="send_email">
 <a href="mailto:name@email.com">Send email</a>
</div>

After it is clicked I want to hide the 'send email' div and show the 'email sent' div

<div class="email_sent">
 <p>Email sent</p>
 <a href="http://www.example.com/clear_sent">I changed my mind and didn't send the email</a>
</div>

Then after I click the I 'changed my mind' link it must then show the 'send email' div

CSS will be something like

.email_sent {
 visibility: hidden;
}

I have jquery installed but am not sure how to show and hide and then show the above divs



Solution :

$(function(){
  $('.send_email > a').click(function(){
    $('.send_email').hide();
    $('.email_sent').show();
  });
});
.email_sent { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="send_email">
 <a href="mailto:name@email.com">Send email</a>
</div>
<div class="email_sent">
 <p>Email sent</p>
 <a href="http://www.example.com/clear_sent">I changed my mind and didn't send the email</a>
</div>


    CSS Howto..

    CSS :hover - How to get lower DIVs to :hover as well?

    how can assign left of div to left of screen when margin set to auto?

    CSS show elements below each other

    How to align div blocks to be aligned in grid?

    How to change Google Chrome Arabic default font in css?

    How to apply CSS only if class exists elsewhere in code?

    How to make one circle inside of another using CSS

    How to make div background color transparent in CSS

    How to apply a property only to the submit button

    How to get multiple rotating background cover with css / Full screen slideshow

    How to change image size when nested in

    tag

    How do I get a div-based dropdown to gain a scrollbar instead of extend past the end of the screen using JavaScript and CSS? Struts are also involved

    How to make CSS triangles (with borders) compatible across browsers

    CSS html : non-standard picture frame: how to imlement with CSS and HTML?

    How to reorder controls of WYSIWYG editor

    Show just cursor (caret) but hide the letters in input

    How to display css multiple columns with dynamic height

    CSS how to position element fixed just for y-axis?

    How can I use CSS to create a middle column that fills the height of the page?

    how to do responsive with css grid and reversed order of elements

    How to make my right-box float right…?

    How do I get one element to respond to the click of another element? - CSS/jQuery

    How to create a scrollable Div Tag Vertically?

    how to position/resize image after rotation using css/js so that the image is not positioned outside the div holding it or cropped out

    How to make a dotted underline link on hover?

    How to make a image stay at the bottom but not rise up

    How do I make this lightbox I am creating only open on the div I am clicking?

    How to apply CSS using User Scripts

    css boxes are not shown in the right place (when adding doctype)

    CSS, IE7… how to not move down the content