jQuery Toggles: показать/скрыть a , расположенный в другом месте на странице

Question

Я нашел этот красивый плагин от Simon Tabor для создания легко настраиваемых кнопок переключения (jQuery Toggles).

Это великолепно, но, к сожалению, я новичок в Javascript и jQuery, и я не могу заставить его работать как кнопка переключения для отображения/скрытия <div>, расположенного в другом месте моего кода.

Итак, вот вопрос:

<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> 

Я хотел бы создать сценарий для того, чтобы динамически изменить видимость

<div id="italian-text">

только, когда кнопка-переключатель установлен в положение

class="toggle-on italian active"

и

<div id="english-text">

только, когда кнопка-переключатель установлен в положение

class="toggle-on english active"

Я сделал много попыток, но я постоянно неудачу: это расстраивает!

Спасибо за чтение и за ваше терпение.

Answer 1

Вы можете использовать

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

где foo() и bar() являются две функции, выполняемые в зависимости от состояния переключателя, как

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

для государства 'ITA', и

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

для состояния «EN».

См toggle plugin documentation;)

Не забудьте скрыть английский пункт при загрузке страницы (с $('#english-text').hide(); или с помощью CSS: display:none)

Вот рабочий пример того, что он выглядит следующим образом: DEMO

Надеюсь, что это поможет!

EDIT: Кстати, вы можете просто использовать:

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

для переключения итальянских и английских абзацев. Это намного проще, но вы не получите информацию о состоянии кнопки (ITA или ENG), вы просто узнаете, когда нажата кнопка.