Déplacer un élément avec jQuery

Question

J'ai une barre latérale avec des liens extensibles. Quand ils dépassent un certain point, je veux déplacer du texte d'un div à l'autre (du rouge au bleu). Lorsque j'élargis et que je réduis les liens, le texte que je prévoyais de déplacer disparaît à un moment donné.

Il y a deux problèmes:

1. Le texte devrait passer à la div bleu quand j'élargissons, retour au rouge quand je collapse
2. Le texte disparaît complètement, ne se déplace pas à l'autre div.

Voici mon html:

<div id="sidebar"> 
    <div> 
    <a href="#" class="cal-title">Test 1</a> 
    <p class="cal-desc">Lorem ipsum</p> 
    </div> 
    <div> 
    <a href="#" class="cal-title">Test 2</a> 
    <p class="cal-desc">Lorem ipsum</p> 
    </div> 
    <div> 
    <a href="#" class="cal-title">Test 3</a> 
    <p class="cal-desc">Lorem ipsum</p> 
    </div> 
</div> 

<div class="red"> 
    <p>Just some random text</p> 
</div> 

<div class="blue"> 
</div> 

Voici le code du jQuery /:

$(document).ready(function() { 
    var isExtended = false; 
    function placeTiles() { 
     // When to move content from .red to .blue 
     if ($('#sidebar').height() > 150 && isExtended == false) { 
      $('.red').appendTo($('.blue')); 
      isExtended = true; 
     // When to move content from .red to .blue 
     } else if ($('#sidebar').height() <= 150 && isExtended == true) { 
      $('.blue').appendTo($('.red')); 
      isExtended = false; 
     } 
    } 

    $('.cal-desc').hide(); 
    // Check how thing are on init 
    placeTiles(); 

    $('.cal-title').click(function() { 
    $(this).siblings('.cal-desc').toggle(); 
    placeTiles(); 
    }); 
}); 

Voici un lien vers mon jsfiddle. Je suis vraiment un débutant à javascript donc toute suggestion pour mon code est la bienvenue!

Answer 1

Voir ce violon mise à jour: http://jsfiddle.net/awden/3/

Le problème est que vous apposent l'ensemble de l'élément .red à l'intérieur de l'élément .blue

$('.red').appendTo($('.blue'))

, vous voulez au lieu d'ajouter les contenu de .red à .blue, et vice versa. En d'autres termes, vous voulez quelque chose comme:

$('.red > p').appendTo($('.blue'))

Answer 2

Je pense que vous voulez dire à faire est de déplacer le <p>.red-.blue et retour. Pour ce faire, il suffit d'ajouter > p à chaque sélecteur, comme ceci:

$('.red > p').appendTo($('.blue')); 

et

$('.blue > p').appendTo($('.red'));