Note that there are some explanatory texts on larger screens.

plurals
  1. POSwitch content jquery
    text
    copied!<p>I want to be able to show different language version of the same paragraph when I click on different buttons. If I click "English" the paragraph after it will show up but not the one after France. Similarly, when I click "France", only the paragraph after that will show up. I have the code below but none of the paragraphs are showing up when I click. Any idea what's wrong?</p> <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt; &lt;html class="no-js" lang="en"&gt; &lt;!--&lt;![endif]--&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;!-- Always force latest IE rendering engine &amp; Chrome Frame --&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt; &lt;title&gt;&lt;/title&gt; &lt;!-- CSS Styles --&gt; &lt;link rel="stylesheet" href="style.css" /&gt; &lt;style&gt; .panels { display: none; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="text"&gt; &lt;img src="closed.png" alt="Under Maintenance" /&gt; &lt;div class="links"&gt; &lt;a href="#Eng"&gt;English&lt;/a&gt; &lt;a href="#Fra"&gt;France&lt;/a&gt; &lt;/div&gt; &lt;p id="Eng" class="panels"&gt; Site is currently down for maintenance.&lt;/p&gt; &lt;p id="Fra" class="panels"&gt; French version goes here.&lt;/p&gt; &lt;/div&gt; &lt;script&gt; $(".links a").click(function() { $(".panels").hide(); $(this.hash).fadeIn(); }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload