Изменить текст кнопки на основе скрытого div

Question

У меня есть два простых div с кнопкой для переключения их видимости. Я бы хотел, чтобы название кнопки отображало название скрытого div. Поэтому, когда вы видите «Пейзаж», кнопка будет говорить «Переключиться в портрет». При отображении div «Портрет» кнопка должна указывать «Переключиться в альбомную».

<div class="container"> 
<div class="row"> 
    <div class="span12"> 
    <div class="panel panel-heading"> 
    <div class="span4"></div> 
    <div class="span4"> 
     <button type="button" class="btn btn-default switch">16:9/9:16</button> 
    </div> 
    <div class="span4"></div> 
    </div> 
    </div> 
</div> 
<div class="row"> 
<div class="panel panel-body"> 
    <div class="span4 cropme" id="landscape" style="width: 1136px; height: 720px;"></div> 
    <div class="span4 cropme" id="portrait" style="width: 720px; height: 1136px;"></div> 
</div> 
</div> 

$('#portrait').hide(); 
$('.switch').click(function(){ 
    $('#portrait').toggle(); 
    $('#landscape').toggle(); 
}); 

http://jsfiddle.net/z2ursLfw/

Answer 1

DEMO

HTML

<button type="button" class="btn btn-default switch">Switch to Portrait</button> 

JS

$('#portrait').hide(); 
$('.switch').click(function(){ 
    $(this).text("Switch to "+($('#portrait').is(":visible") ? "Portrait" : "Landscape")); 
    $('#portrait').toggle(); 
    $('#landscape').toggle(); 
}); 

Answer 2

$('#portrait').hide(); 
$('.switch').click(function() { 
    $('#portrait, #landscape').toggle(); 
    $('button').text('Switch to ' + $('.cropme:hidden').text()) 
}); 

jsFiddle example