jQuery Toggles: show / hide a <div> located elsewhere in the page

Question

I found this handsome plugin by Simon Tabor to create easily-styleable toggle buttons (jQuery Toggles).

That's gorgeous, but unfortunately I'm a newbie on Javascript and jQuery and I can't make it work as a toggle button for displaying / hiding a <div> located elsewhere in my code.

So, here is the matter:

<div class="container">

  <div class="well well-lg">
   <div class="page-header">
    <h1>MY SITE <small>My site subtitle</small></h1>
   </div>
  </div>

   <div class="panel panel-info">
    <div class="panel-heading">

     <div style="width: 100px; margin-left: auto;">
      <div class="toggle-light">
       <div class="toggle on">
        <div class="toggle-slide active">
         <div class="toggle-inner" style="width: 165px; margin-left: 0px;">
          <div class="toggle-on italian active" style="height: 35px; width: 82.5px; text-align: center; text-indent: -17.5px; line-height: 35px;">ITA</div>
          <div class="toggle-blob" style="height: 35px; width: 35px; margin-left: -17.5px;"></div>
         <div class="toggle-off english" style="height: 35px; width: 82.5px; margin-left: -17.5px; text-align: center; text-indent: 17.5px; line-height: 35px;">ENG</div>
        </div>
       </div>
      </div>
     </div>
    </div>

<script type="text/javascript">$('.toggle').toggles({on:true, text:{on:'ITA',off:'EN'}});</script>
</div>
</div>

<div class="row">
   <div class="left-sidebar col-md-3" role="complementary">

     <ul class="hidden-xs hidden-sm nav nav-pills nav-stacked">
       <li class="active"><a style="cursor: default;" href="javascript: void(0);"><i class="icon-fixed-width icon-dark icon-reorder icon-large"></i><strong>MAIN MENU</strong></a></li>
       <li>...</li>
       <li>...</li>
       <li>...</li>
       <li>...</li>
     </ul>

   </div>

<div class="col-md-9">

  <div id="italian-text">
  <h1>Il mio titolo in italiano</h1>
  <p>Il mio paragrafo in italiano</p>
  </div>

  <div id="english-text">
  <h1>My English title</h1>
  <p>My English paragraph</p>
  </div>

</div>

</div>
</div>

I would like to create a script in order to dinamically change the visibility of

<div id="italian-text">

only when the toggle button is set to

class="toggle-on italian active"

and of

<div id="english-text">

only when the toggle button is set to

class="toggle-on english active"

I made a great deal of attempts, but I have been constantly failing: that's frustrating!

Thanks for reading and for your patience.

Answer 1

You can use

// Getting notified of changes, and the new state:
$('.toggle').on('toggle', function (e, active) {
    if (active) {
        foo();
    } else {
        bar();
    }
});

where foo() and bar() are the two functions executed depending of the toggle state, like

$('#english-text').hide();
$('#italian-text').show();

for the 'ITA' state, and

$('#italian-text').hide();
$('#english-text').show();

for the 'EN' state.

See the toggle plugin documentation ;)

Don't forget to hide the english paragraph when loading page (with $('#english-text').hide(); or with css : display:none )

Here is a working demo of what it looks like : DEMO

Hope that will help you!

EDIT : By the way, you can just use :

$('#english-text').hide();
$('.toggle').on('toggle', function (e) {
       $('#english-text, #italian-text').toggle();
});

to toggle italian and english paragraphs. It is much easier, but you won't get informations about the state of the button (ITA or ENG), you will just know when the button is clicked.