title: Toggle multiple divs while showing only one div, possibility a jquery accordion?
body: <p>Currently when the user clicks on the link, the <code>$('#user');</code> slides out. When the user clicks on another (NOT THE SAME LINK) <code>$('.more-info-arrow').find('a')</code> link, the user's information from the previous goes away but does not reappear with the second request. I would like this to do this only if the <code>$('#user');</code> is visible.  </p>
  
  <p><a href="http://jsfiddle.net/QSapW/" rel="nofollow noreferrer">http://jsfiddle.net/QSapW/</a></p>
  
  <p>=======================Jquery====================</p>
  
  <pre><code>            //User detail information
          $('.more-info-arrow').find('a').live('click', function () {
              var $this = $(this);
              var user = $('#user');
              var userInfo = $('#user-info');
  
              // If display is none, that means it is hidden
              if (user.css('display') == 'none') {
                  $this.addClass('active');
                  user.hide().animate({
                      width: 'toggle'
                  }, 400, function () {
                      userInfo.fadeIn('fast');
                  });
              }
  
              // Second Click
              else {
                  $this.removeClass('active');
                  userInfo.fadeOut('fast', function () {
                      user.animate({
                          width: 'toggle'
                      }, 400);
                  });
              }
          });
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/Zz1iV.jpg" alt="phone book web app"></p>