title: Changing language with toggle button bootstrap
body: <p>I'm learning to code with bootstrap, html, css, js. And I'm wondering if it's possible to modify the language of my webpage with a toggle button?
  I'm using <a href="http://www.bootstraptoggle.com/" rel="nofollow noreferrer">bootstrap toggle</a> which can set events like this:</p>
  
  <pre><code>&lt;input id="toggle-event" type="checkbox" data-toggle="toggle"&gt;
  &lt;div id="console-event"&gt;&lt;/div&gt;
  &lt;script&gt;
    $(function() {
      $('#toggle-event').change(function() {
        $('#console-event').html('Toggle: ' + $(this).prop('checked'))
      })
    })
  &lt;/script&gt;
  </code></pre>
  
  <p>And I also saw <a href="https://stackoverflow.com/questions/13606290/html-change-language-using-element-lang#13607315">this thread on stack</a> about changing languageusing element.lang.</p>
  
  <p>And I'm not able to 'mix' the two methods to change the language on deman simply by clicking on the toggle button, and I don't understand why =/</p>
  
  <p>Here's my attempt:</p>
  
  <pre><code>&lt;script src="js/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/bootstrap-toggle.min.js"&gt;&lt;/script&gt;
  
  &lt;body class="fr" id="test1"&gt;
    &lt;p lang="en"&gt;
      Je parle la baguette
    &lt;/p&gt;
    &lt;p lang="fr"&gt;
      I speak the baguette
    &lt;/p&gt;
    &lt;input id="toggle-event" type="checkbox" checked data-toggle="toggle" data-size="large" data-onstyle="info" data-offstyle="info" data-on="Fr" data-off="En"&gt;
  &lt;!--&lt;script&gt;
        $(function() {
          $('#toggle-event').bootstrapToggle({
           on: document.body.className= 'fr',
           off: document.body.className = 'en'
          });
        })
  &lt;/script&gt;--&gt;
  &lt;script&gt;
    $(function() {
    $('#toggle-event').change(function() {
      $('#test1').body('Toggle: ' + $(this).prop('checked')).className='en'
    });
  });
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body.en :lang(en) {
    display: none;
  }
  body.fr :lang(fr){
    display: none;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/mttkchfc/1/" rel="nofollow noreferrer">https://jsfiddle.net/mttkchfc/1/</a></p>