I want to show a different version of the same paragraph when I click on different buttons. If I click the "English" paragraph after it appears, but not after France. Similarly, when I click France, only the paragraph after that appears. I have the code below, but none of the paragraphs appear when I click. Any idea what's wrong?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <link rel="stylesheet" href="style.css" /> <style> .panels { display: none; } </style> </head> <body> <div class="text"> <img src="closed.png" alt="Under Maintenance" /> <div class="links"> <a href="#Eng">English</a> <a href="#Fra">France</a> </div> <p id="Eng" class="panels"> Site is currently down for maintenance.</p> <p id="Fra" class="panels"> French version goes here.</p> </div> <script> $(".links a").click(function() { $(".panels").hide(); $(this.hash).fadeIn(); }); </script> </body> </html>
source share