Changement de largeur de bascule (jQuery)

Question

J'ai créé une mise en page de message iPhone et je souhaite activer un <div> en cliquant sur un bouton. La chose est quand ce <div> est basculé, j'ai besoin du message width pour diminuer ainsi tout tient dans la ligne. Je l'ai essayé avec ce code, mais cela n'a pas fonctionné:

$('.my-post .fa-chevron-left').click(function(){ 
 
    $('.controls').toggle(); 
 
      var toggleWidth = $(".message .mine").width() == 430 ? "350px" : "430px"; 
 
     $('.message .mine').animate({ width: toggleWidth }); 
 
});

/* -- POST INFO -- */ 
 
    .info2 { 
 
    width:500px; 
 
    height: auto; 
 
    margin-bottom: 10px; 
 
    height: auto; 
 
    } 
 
    .reblogged img{ 
 
     border-radius:5px; 
 
     vertical-align:middle; 
 
    } 
 
    .reblogged.source img{ 
 
     float:right; 
 
    } 
 
.my-post{ 
 
    overflow:hidden; 
 
    display:inline-block; 
 
    background:#fff; 
 
    padding:5px; 
 
} 
 
.my-post .fa-chevron-left{ 
 
    cursor:pointer; 
 
    vertical-align:middle; 
 
    font-size:12px; 
 
    padding:5px; 
 
    background:#aaa; 
 
    color:#fff; 
 
    border-radius:5px 
 
} 
 
.message i{ 
 
    font-size:12px; 
 
    color:#fff; 
 
    padding:5px; 
 
    float:right; 
 
    border-radius:100%; 
 
    background:#37ce00; 
 
} 
 
    
 
.message 
 
{ 
 
position: relative; 
 
display: inline-block; 
 
width: 440px; 
 
height: 20px; 
 
line-height:20px; 
 
padding: 5px; 
 
margin-left:15px; 
 
background: #58acfa; 
 
color:#fff; 
 
-webkit-border-radius: 10px; 
 
-moz-border-radius: 10px; 
 
border-radius: 6px; 
 
} 
 
    .reblogged.source{ 
 
    margin-bottom:5px; 
 
    } 
 

 
.message:after 
 
{ 
 
content: ''; 
 
position: absolute; 
 
border-style: solid; 
 
border-width: 8px 10px 8px 0; 
 
border-color: transparent #58acfa; 
 
display: block; 
 
width: 0; 
 
z-index: 1; 
 
left: -10px; 
 
top: 7px; 
 
} 
 

 
.message.via{ 
 
    background:#dadada; 
 
    color:#000; 
 
} 
 
.message.via:after{ 
 
    border-color: transparent #dadada; 
 
} 
 
.message.source{ 
 
    text-align:right; 
 
    margin-left:0; 
 
    margin-right:15px; 
 
} 
 
.message.source:after{ 
 
    border-width: 8px 0 8px 10px; 
 
    left:auto; 
 
    right:-10px; 
 
} 
 
.message.mine{ 
 
    width:430px; 
 
    color:#303030; 
 
    background:#fff; 
 
    border:1px solid #dadada; 
 
    border-radius:15px 
 
} 
 
.message.mine:after{ 
 
    display:none 
 
} 
 

 
    /*-- PERMALINK, LIKE AND REBLOG BUTTONS --*/ 
 

 
.controls{ 
 
    float:left; 
 
    line-height:25px; 
 
    width:auto; 
 
    height:auto; 
 
} 
 

 
.controls .reblog a:hover{ 
 
    color:#fe9a2e; 
 
} 
 
.controls .permalink a:hover{ 
 
    color:#ffde07; 
 
} 
 

 
.controls li{ 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
    width:17px; 
 
    height:17px; 
 
     margin-left:10px; 
 
    text-align:center; 
 
    position:relative; 
 
} 
 

 
.controls li a{ 
 
    display:block; 
 
    font-size:14px; 
 
    color:{color:Post Icons}; 
 
} 
 

 
.custom-like-button{ 
 
    position:relative; 
 
    width:10px; 
 
    height:10px; 
 
} 
 

 
.like_button{ 
 
    position:absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 0; 
 
    z-index:10; 
 
} 
 

 
.like_button iframe{ 
 
    width: 100%!important; 
 
    height: 100%!important; 
 
} 
 

 
.like-button-heart{ 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    z-index:1; 
 
} 
 

 
.like_button:hover + .like-button-heart{ 
 
    color: red; 
 
} 
 

 
.like_button.liked + .like-button-heart{ 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 
 

 
<div class="info2"> 
 

 
<div class="reblogged source"> 
 
<a href="{ReblogRootURL}" target=blank title="{ReblogRootTitle}"> 
 
    <img src="{ReblogRootPortraitURL-30}"/></a> 
 
    <div class="message source">This is my original work!</div> 
 
</div> 
 

 
<div class="reblogged via"> 
 
    <a href="{ReblogParentURL}" target=blank title="{ReblogParentTitle}"> 
 
    <img src="{ReblogParentPortraitURL-30}"/></a> 
 
    <div class="message via">I enjoyed this post and reposted it!</div> 
 
</div> 
 
    
 
<div class="my-post"> 
 

 
    <!-- controls --> 
 
<div class="controls"> 
 
<li class="custom-like-button"><a class="like-button-heart"><span class="fa fa-heart-o"></span></a></li> 
 
<li class="reblog"><a href="{ReblogURL}" target="_blank" class="reblog-button"><span class="fa fa-retweet"></span></a></li> 
 
<li class="permalink"><a href="{Permalink}" class="permalink-button"><span class="fa fa-bookmark-o"></span></a></li> 
 
    </div><!-- End controls --> 
 
    
 
    
 
    <i class="fa fa-chevron-left"></i> 
 
    <div class="message mine">So did I and {NoteCount} others!<i class="fa fa-arrow-up"></i></div> 
 
</div> 
 

 
</div><!-- End info2 -->

Merci pour l'aide!

PS: codepen

Answer 1

peut vous essayer de changer comme suit. Il fonctionne here

$('.my-post .fa-chevron-right').click(function(){ 
    $('.controls').toggle(); 
    $('.my-post .fa-chevron-right').toggleClass('active'); 
     var toggleWidth = ($(".message.mine").width() == 430) ? "370px" : "430px"; 
     $('.message.mine').animate({ width: toggleWidth }); 
});