Consistent scroll-to-bottom when the page loads on overflown content

Question

I'm currently working on a chat layout with minimal JS/jQuery using Bootstrap Tabs and custom CSS (the sending & receiving of the messages would be worked on later during programming).

I have already used a bit of jQuery to make a chat box div (.messages) scroll to bottom if the content of the box is taller than the available height. But the one issue I've come across with this is that the script only works for the active tab pane. In the example below, you can see that the script does its work by scrolling the first tab pane to the bottom. But if we switch to the fourth tab, the script doesn't work anymore.

Is there a way to have the messages be scrolled to the bottom my default?

EDIT: Here's a jsfiddle link for easier viewing since the inline snippets tool isn't working that well for this example. Do make the preview panel taller.

$(document).ready(function(){
  // Scroll the chat messages to bottom
  $(".messages").animate({
    scrollTop: $('.messages').prop("scrollHeight")
  }, 1000);
});

.inbox-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid #ccc; }
  .inbox-section .message-sidebar {
    width: 320px;
    background: #fff;
    border-right: 1px solid #ddd; }
    .inbox-section .message-sidebar .nav-tabs {
      border: none; }
      .inbox-section .message-sidebar .nav-tabs li {
        float: none; }
        .inbox-section .message-sidebar .nav-tabs li.active a {
          background: #eeeeee; }
          .inbox-section .message-sidebar .nav-tabs li.active a:hover {
            background: #eeeeee; }
            .inbox-section .message-sidebar .nav-tabs li.active a:hover h6 {
              color: #000; }
            .inbox-section .message-sidebar .nav-tabs li.active a:hover p {
              color: #777777; }
          .inbox-section .message-sidebar .nav-tabs li.active a h6 {
            color: #000; }
          .inbox-section .message-sidebar .nav-tabs li.active a p {
            color: #777777; }
        .inbox-section .message-sidebar .nav-tabs li + li {
          border-top: 1px solid #ddd; }
        .inbox-section .message-sidebar .nav-tabs li a {
          border: none;
          border-radius: 0;
          margin: 0;
          padding: 16px; }
          .inbox-section .message-sidebar .nav-tabs li a h6 {
            color: #555555; }
          .inbox-section .message-sidebar .nav-tabs li a p {
            color: #aaa; }
          .inbox-section .message-sidebar .nav-tabs li a:hover {
            background: #fff; }
            .inbox-section .message-sidebar .nav-tabs li a:hover h6 {
              color: #000; }
            .inbox-section .message-sidebar .nav-tabs li a:hover p {
              color: #777777; }
    .inbox-section .message-sidebar .message-preview h6,
    .inbox-section .message-sidebar .message-preview p {
      margin: 0;
      line-height: 1; }
    .inbox-section .message-sidebar .message-preview h6 {
      color: #000;
      font-size: 16px;
      margin-bottom: 6px; }
      .inbox-section .message-sidebar .message-preview h6:after {
        content: " ";
        display: table; }
      .inbox-section .message-sidebar .message-preview h6:after {
        clear: both; }
      .inbox-section .message-sidebar .message-preview h6 .label {
        float: right;
        padding: 0.25em 0.5em 0.25em;
        border-radius: 10px; }
    .inbox-section .message-sidebar .message-preview > p {
      font-size: 14px;
      color: #777777;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis; }
      .inbox-section .message-sidebar .message-preview > p strong:after {
        content: ':'; }
  .inbox-section .message-holder {
    width: 100%;
    padding: 20px;
    padding-right: 0;
    background: #fff; }
    .inbox-section .message-holder .messages-header {
      margin: 0 20px 20px 0;
      padding-bottom: 16px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      border-bottom: 1px solid #ddd; }
      .inbox-section .message-holder .messages-header h5 {
        margin: 0; }
      .inbox-section .message-holder .messages-header .buttons {
        list-style: none;
        margin: 0;
        padding: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        font-size: 20px; }
        .inbox-section .message-holder .messages-header .buttons li + li {
          margin-left: 8px; }
        .inbox-section .message-holder .messages-header .buttons li a {
          display: block;
          width: 32px;
          height: 32px;
          line-height: 30px;
          text-align: center; }
    .inbox-section .message-holder .messages {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: end;
          -ms-flex-align: end;
              align-items: flex-end;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      overflow-y: scroll;
      height: 300px;
      padding-right: 20px; }
      .inbox-section .message-holder .messages .received,
      .inbox-section .message-holder .messages .sent {
        border-radius: 10px;
        padding: 12px;
        font-size: 14px;
        line-height: 1.25; }
        .inbox-section .message-holder .messages .received + .sent,
        .inbox-section .message-holder .messages .received + .received,
        .inbox-section .message-holder .messages .sent + .sent,
        .inbox-section .message-holder .messages .sent + .received {
          margin-top: 24px; }
        .inbox-section .message-holder .messages .received p,
        .inbox-section .message-holder .messages .sent p {
          margin: 0; }
          .inbox-section .message-holder .messages .received p + p,
          .inbox-section .message-holder .messages .sent p + p {
            margin-top: 8px; }
        .inbox-section .message-holder .messages .received .name,
        .inbox-section .message-holder .messages .sent .name {
          font-size: 14px;
          font-style: italic;
          margin-bottom: 8px; }
          .inbox-section .message-holder .messages .received .name strong,
          .inbox-section .message-holder .messages .sent .name strong {
            font-size: 16px;
            font-style: normal; }
        .inbox-section .message-holder .messages .received .time,
        .inbox-section .message-holder .messages .sent .time {
          font-size: 12px;
          font-style: italic;
          text-align: right;
          margin-top: 8px; }
      .inbox-section .message-holder .messages .received {
        background: #eeeeee;
        margin-right: 48px;
        color: #555555; }
        .inbox-section .message-holder .messages .received .name {
          color: #222222; }
        .inbox-section .message-holder .messages .received .time {
          color: #aaa; }
      .inbox-section .message-holder .messages .sent {
        background: #238def;
        margin-left: 48px;
        color: #fff; }
        .inbox-section .message-holder .messages .sent .name {
          color: #fff; }
        .inbox-section .message-holder .messages .sent .time {
          color: #b1d7f9; }
    .inbox-section .message-holder .text-area {
      margin: 20px 20px 0 0;
      padding-top: 20px;
      border-top: 1px solid #ddd; }
      .inbox-section .message-holder .text-area textarea {
        resize: none;
        height: 100px !important; }
      .inbox-section .message-holder .text-area p {
        margin: 0;
        margin-top: 20px; }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="inbox-section">
  <div class="message-sidebar">
    <ul class="nav nav-tabs" role="tablist">
      <li class="active">
        <a href="#message1" class="message-preview" data-toggle="tab">
          <h6>ABC Treks &amp; Travels Pvt. Ltd.</h6>
          <p><strong>You</strong> Thanks for the info. What's your number?</p>
        </a>
      </li>
      <li>
        <a href="#message2" class="message-preview" data-toggle="tab">
          <h6>Everest Trekking <span class="label label-danger">4</span></h6>
          <p><strong>Everest Trekking</strong> Yes sir, we do provide a lot of discount offers during the season</p>
        </a>
      </li>
      <li>
        <a href="#message3" class="message-preview" data-toggle="tab">
          <h6>Sunrise Travels Pvt. Ltd.</h6>
          <p><strong>You</strong> Inventore modi eveniet harum.</p>
        </a>
      </li>
      <li>
        <a href="#message4" class="message-preview" data-toggle="tab">
          <h6>Safari From The East</h6>
          <p><strong>Safari From The East</strong> Quod iure eos eveniet animi maiores fuga sint aliquam.</p>
        </a>
      </li>
    </ul>
  </div>
  <div class="message-holder">
    <div class="tab-content">
      <div class="tab-pane active" id="message1">
        <div class="messages-header">
          <h5>ABC Treks &amp; Travels</h5>
          <ul class="buttons">
            <li><a href=""><i class="fa fa-user-o"></i></a></li>
            <li><a href=""><i class="fa fa-trash-o"></i></a></li>
          </ul>
        </div>
        <div class="messages">
          <div class="received">
            <div class="name"><strong>ABC Treks &amp; Travels</strong> wrote</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum suscipit repellendus doloribus, ad quidem pariatur error temporibus commodi.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <div class="time">Received on 14:55PM, 12th August 2018</div>
          </div>
          <div class="sent">
            <div class="name"><strong>You</strong> wrote</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat blanditiis optio, ad magni ducimus minus laudantium mollitia, sequi et dolorem, quo, laborum nihil architecto saepe error. Velit ipsum quis consequatur, non doloremque quae tenetur.</p>
            <div class="time">Sent on 15:03PM, 12th August 2018</div>
          </div>
          <div class="received">
            <div class="name"><strong>ABC Treks &amp; Travels</strong> wrote</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum odio alias itaque perferendis fugiat molestiae, odit consequatur quia, laudantium dicta est expedita maiores similique suscipit beatae.</p>
            <div class="time">Received on 14:55PM, 12th August 2018</div>
          </div>
          <div class="received">
            <div class="name"><strong>ABC Treks &amp; Travels</strong> wrote</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum odio alias itaque perferendis fugiat molestiae, odit consequatur quia, laudantium dicta est expedita maiores similique suscipit beatae.</p>
            <div class="time">Received on 14:55PM, 12th August 2018</div>
          </div>
          <div class="received">
            <div class="name"><strong>ABC Treks &amp; Travels</strong> wrote</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum odio alias itaque perferendis fugiat molestiae, odit consequatur quia, laudantium dicta est expedita maiores similique suscipit beatae.</p>
            <div class="time">Received on 14:55PM, 12th August 2018</div>
          </div>
          <div class="sent">
            <div class="name"><strong>You</strong> wrote</div>
            <p>Thanks for the info.</p>
            <div class="time">Sent on 15:03PM, 12th August 2018</div>
          </div>
        </div>
        <form action="" class="text-area">
          <textarea class="form-control" name="" id="" cols="30" rows="4"></textarea>
          <p class="text-right"><a href="" class="btn btn-primary">Send</a></p>
        </form>
      </div>
      <div class="tab-pane" id="message2">
        <div class="messages-header">
          <h5>Everest Trekking</h5>
          <ul class="buttons">
            <li><a href=""><i class="fa fa-user-o"></i></a></li>
            <li><a href=""><i class="fa fa-trash-o"></i></a></li>
          </ul>
        </div>
        <div class="messages">
          <div class="sent">
            <div class="name"><strong>You</strong> wrote</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat blanditiis optio, ad magni ducimus minus laudantium mollitia, sequi et dolorem, quo, laborum nihil architecto saepe error. Velit ipsum quis consequatur, non doloremque quae tenetur.</p>
            <div class="time">Sent on 15:03PM, 12th August 2018</div>
          </div>
          <div class="received">
            <div class="name"><strong>Everest Trekking</strong> wrote</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum odio alias itaque perferendis fugiat molestiae, odit consequatur quia, laudantium dicta est expedita maiores similique suscipit beatae.</p>
            <div class="time">Received on 14:55PM, 12th August 2018</div>
          </div>
          <div class="sent">
            <div class="name"><strong>You</strong> wrote</div>
            <p>Thanks for the info.</p>
            <div class="time">Sent on 15:03PM, 12th August 2018</div>
          </div>
        </div>
        <form action="" class="text-area">
          <textarea class="form-control" name="" id="" cols="30" rows="4"></textarea>
          <p class="text-right"><a href="" class="btn btn-primary">Send</a></p>
        </form>
      </div>
      <div class="tab-pane" id="message3">
        <div class="messages-header">
          <h5>Sunrise Travels Pvt. Ltd.</h5>
          <ul class="buttons">
            <li><a href=""><i class="fa fa-user-o"></i></a></li>
            <li><a href=""><i class="fa fa-trash-o"></i></a></li>
          </ul>
        </div>
        <div class="messages">
          <div class="received">
            <div class="name"><strong>Sunrise Travels Pvt. Ltd.</strong> wrote</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum odio alias itaque perferendis fugiat molestiae, odit consequatur quia, laudantium dicta est expedita maiores similique suscipit beatae.</p>
            <div class="time">Received on 14:55PM, 12th August 2018</div>
          </div>
          <div class="sent">
            <div class="name"><strong>You</strong> wrote</div>
            <p>Thanks for the info.</p>
            <div class="time">Sent on 15:03PM, 12th August 2018</div>
          </div>
        </div>
        <form action="" class="text-area">
          <textarea class="form-control" name="" id="" cols="30" rows="4"></textarea>
          <p class="text-right"><a href="" class="btn btn-primary">Send</a></p>
        </form>
      </div>
      <div class="tab-pane" id="message4">
        <div class="messages-header">
          <h5>Safari From The East</h5>
          <ul class="buttons">
            <li><a href=""><i class="fa fa-user-o"></i></a></li>
            <li><a href=""><i class="fa fa-trash-o"></i></a></li>
          </ul>
        </div>
        <div class="messages">
          <div class="received">
            <div class="name"><strong>Safari From The East</strong> wrote</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi placeat consectetur iste iusto inventore ipsam porro aliquid, facere similique neque eum repudiandae possimus doloremque. Voluptatum modi non vel consequuntur repellendus libero earum, labore eaque, veritatis, nisi quos eveniet dolore cum dignissimos aliquam atque aliquid similique hic molestias quod. Consectetur, magni.</p>
            <div class="time">Received on 14:55PM, 12th August 2018</div>
          </div>
          <div class="sent">
            <div class="name"><strong>You</strong> wrote</div>
            <p>Thanks for the info. Consectetur adipisicing elit. Nulla incidunt vel maiores atque, quaerat ab.</p>
            <div class="time">Sent on 15:03PM, 12th August 2018</div>
          </div>
          <div class="received">
            <div class="name"><strong>Safari From The East</strong> wrote</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat quibusdam dicta porro animi ipsum aspernatur cum vitae ex eos architecto, delectus, sed laudantium. Quasi repellat ad veniam ullam hic! Voluptas!</p>
            <div class="time">Received on 14:55PM, 12th August 2018</div>
          </div>
          <div class="sent">
            <div class="name"><strong>You</strong> wrote</div>
            <p>Consectetur adipisicing elit quaerat ab.</p>
            <div class="time">Sent on 15:03PM, 12th August 2018</div>
          </div>
        </div>
        <form action="" class="text-area">
          <textarea class="form-control" name="" id="" cols="30" rows="4"></textarea>
          <p class="text-right"><a href="" class="btn btn-primary">Send</a></p>
        </form>
      </div>
    </div>
  </div>
</div>

Answer 1

Check if this helps you?

I have animated on click of button.

$(document).ready(function() {
  // Scroll the chat messages to bottom
  var tabID, wrapHeight;
  $(".messages").animate({
    scrollTop: $('.messages').prop("scrollHeight")
  }, 1000);
  $('.nav a').click(function() {
    tabID = $(this).attr("href");
    setTimeout(function() {
      wrapHeight = $(tabID + " .msgWrapper").height();
      $(tabID + " .messages").animate({
        scrollTop: wrapHeight
      }, 1000);
    }, 0);
  });
});

.inbox-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.inbox-section .message-sidebar {
  width: 320px;
  background: #fff;
  border-right: 1px solid #ddd;
}

.inbox-section .message-sidebar .nav-tabs {
  border: none;
}

.inbox-section .message-sidebar .nav-tabs li {
  float: none;
}

.inbox-section .message-sidebar .nav-tabs li.active a {
  background: #eeeeee;
}

.inbox-section .message-sidebar .nav-tabs li.active a:hover {
  background: #eeeeee;
}

.inbox-section .message-sidebar .nav-tabs li.active a:hover h6 {
  color: #000;
}

.inbox-section .message-sidebar .nav-tabs li.active a:hover p {
  color: #777777;
}

.inbox-section .message-sidebar .nav-tabs li.active a h6 {
  color: #000;
}

.inbox-section .message-sidebar .nav-tabs li.active a p {
  color: #777777;
}

.inbox-section .message-sidebar .nav-tabs li+li {
  border-top: 1px solid #ddd;
}

.inbox-section .message-sidebar .nav-tabs li a {
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 16px;
}

.inbox-section .message-sidebar .nav-tabs li a h6 {
  color: #555555;
}

.inbox-section .message-sidebar .nav-tabs li a p {
  color: #aaa;
}

.inbox-section .message-sidebar .nav-tabs li a:hover {
  background: #fff;
}

.inbox-section .message-sidebar .nav-tabs li a:hover h6 {
  color: #000;
}

.inbox-section .message-sidebar .nav-tabs li a:hover p {
  color: #777777;
}

.inbox-section .message-sidebar .message-preview h6,
.inbox-section .message-sidebar .message-preview p {
  margin: 0;
  line-height: 1;
}

.inbox-section .message-sidebar .message-preview h6 {
  color: #000;
  font-size: 16px;
  margin-bottom: 6px;
}

.inbox-section .message-sidebar .message-preview h6:after {
  content: " ";
  display: table;
}

.inbox-section .message-sidebar .message-preview h6:after {
  clear: both;
}

.inbox-section .message-sidebar .message-preview h6 .label {
  float: right;
  padding: 0.25em 0.5em 0.25em;
  border-radius: 10px;
}

.inbox-section .message-sidebar .message-preview>p {
  font-size: 14px;
  color: #777777;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.inbox-section .message-sidebar .message-preview>p strong:after {
  content: ':';
}

.inbox-section .message-holder {
  width: 100%;
  padding: 20px;
  padding-right: 0;
  background: #fff;
}

.inbox-section .message-holder .messages-header {
  margin: 0 20px 20px 0;
  padding-bottom: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
}

.inbox-section .message-holder .messages-header h5 {
  margin: 0;
}

.inbox-section .message-holder .messages-header .buttons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 20px;
}

.inbox-section .message-holder .messages-header .buttons li+li {
  margin-left: 8px;
}

.inbox-section .message-holder .messages-header .buttons li a {
  display: block;
  width: 32px;
  height: 32px;
  line-height: 30px;
  text-align: center;
}

.inbox-section .message-holder .messages {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow-y: scroll;
  height: 300px;
  padding-right: 20px;
}

.inbox-section .message-holder .messages .received,
.inbox-section .message-holder .messages .sent {
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  line-height: 1.25;
}

.inbox-section .message-holder .messages .received+.sent,
.inbox-section .message-holder .messages .received+.received,
.inbox-section .message-holder .messages .sent+.sent,
.inbox-section .message-holder .messages .sent+.received {
  margin-top: 24px;
}

.inbox-section .message-holder .messages .received p,
.inbox-section .message-holder .messages .sent p {
  margin: 0;
}

.inbox-section .message-holder .messages .received p+p,
.inbox-section .message-holder .messages .sent p+p {
  margin-top: 8px;
}

.inbox-section .message-holder .messages .received .name,
.inbox-section .message-holder .messages .sent .name {
  font-size: 14px;
  font-style: italic;
  margin-bottom: 8px;
}

.inbox-section .message-holder .messages .received .name strong,
.inbox-section .message-holder .messages .sent .name strong {
  font-size: 16px;
  font-style: normal;
}

.inbox-section .message-holder .messages .received .time,
.inbox-section .message-holder .messages .sent .time {
  font-size: 12px;
  font-style: italic;
  text-align: right;
  margin-top: 8px;
}

.inbox-section .message-holder .messages .received {
  background: #eeeeee;
  margin-right: 48px;
  color: #555555;
}

.inbox-section .message-holder .messages .received .name {
  color: #222222;
}

.inbox-section .message-holder .messages .received .time {
  color: #aaa;
}

.inbox-section .message-holder .messages .sent {
  background: #238def;
  margin-left: 48px;
  color: #fff;
}

.inbox-section .message-holder .messages .sent .name {
  color: #fff;
}

.inbox-section .message-holder .messages .sent .time {
  color: #b1d7f9;
}

.inbox-section .message-holder .text-area {
  margin: 20px 20px 0 0;
  padding-top: 20px;
  border-top: 1px solid #ddd;
}

.inbox-section .message-holder .text-area textarea {
  resize: none;
  height: 100px !important;
}

.inbox-section .message-holder .text-area p {
  margin: 0;
  margin-top: 20px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="inbox-section">
  <div class="message-sidebar">
    <ul class="nav nav-tabs" role="tablist">
      <li class="active">
        <a href="#message1" class="message-preview" data-toggle="tab">
          <h6>ABC Treks &amp; Travels Pvt. Ltd.</h6>
          <p><strong>You</strong> Thanks for the info. What's your number?</p>
        </a>
      </li>
      <li>
        <a href="#message2" class="message-preview" data-toggle="tab">
          <h6>Everest Trekking <span class="label label-danger">4</span></h6>
          <p><strong>Everest Trekking</strong> Yes sir, we do provide a lot of discount offers during the season</p>
        </a>
      </li>
      <li>
        <a href="#message3" class="message-preview" data-toggle="tab">
          <h6>Sunrise Travels Pvt. Ltd.</h6>
          <p><strong>You</strong> Inventore modi eveniet harum.</p>
        </a>
      </li>
      <li>
        <a href="#message4" class="message-preview" data-toggle="tab">
          <h6>Safari From The East</h6>
          <p><strong>Safari From The East</strong> Quod iure eos eveniet animi maiores fuga sint aliquam.</p>
        </a>
      </li>
    </ul>
  </div>
  <div class="message-holder">
    <div class="tab-content">
      <div class="tab-pane active" id="message1">
        <div class="messages-header">
          <h5>ABC Treks &amp; Travels</h5>
          <ul class="buttons">
            <li><a href=""><i class="fa fa-user-o"></i></a></li>
            <li><a href=""><i class="fa fa-trash-o"></i></a></li>
          </ul>
        </div>
        <div class="messages">
          <div class="msgWrapper">
            <div class="received">
              <div class="name"><strong>ABC Treks &amp; Travels</strong> wrote</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum suscipit repellendus doloribus, ad quidem pariatur error temporibus commodi.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
              <div class="time">Received on 14:55PM, 12th August 2018</div>
            </div>
            <div class="sent">
              <div class="name"><strong>You</strong> wrote</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat blanditiis optio, ad magni ducimus minus laudantium mollitia, sequi et dolorem, quo, laborum nihil architecto saepe error. Velit ipsum quis consequatur, non doloremque quae
                tenetur.
              </p>
              <div class="time">Sent on 15:03PM, 12th August 2018</div>
            </div>
            <div class="received">
              <div class="name"><strong>ABC Treks &amp; Travels</strong> wrote</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum odio alias itaque perferendis fugiat molestiae, odit consequatur quia, laudantium dicta est expedita maiores similique suscipit beatae.</p>
              <div class="time">Received on 14:55PM, 12th August 2018</div>
            </div>
            <div class="received">
              <div class="name"><strong>ABC Treks &amp; Travels</strong> wrote</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum odio alias itaque perferendis fugiat molestiae, odit consequatur quia, laudantium dicta est expedita maiores similique suscipit beatae.</p>
              <div class="time">Received on 14:55PM, 12th August 2018</div>
            </div>
            <div class="received">
              <div class="name"><strong>ABC Treks &amp; Travels</strong> wrote</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum odio alias itaque perferendis fugiat molestiae, odit consequatur quia, laudantium dicta est expedita maiores similique suscipit beatae.</p>
              <div class="time">Received on 14:55PM, 12th August 2018</div>
            </div>
            <div class="sent">
              <div class="name"><strong>You</strong> wrote</div>
              <p>Thanks for the info.</p>
              <div class="time">Sent on 15:03PM, 12th August 2018</div>
            </div>
          </div>
        </div>
        <form action="" class="text-area">
          <textarea class="form-control" name="" id="" cols="30" rows="4"></textarea>
          <p class="text-right"><a href="" class="btn btn-primary">Send</a></p>
        </form>
      </div>
      <div class="tab-pane" id="message2">
        <div class="messages-header">
          <h5>Everest Trekking</h5>
          <ul class="buttons">
            <li><a href=""><i class="fa fa-user-o"></i></a></li>
            <li><a href=""><i class="fa fa-trash-o"></i></a></li>
          </ul>
        </div>
        <div class="messages">
          <div class="msgWrapper">
            <div class="sent">
              <div class="name"><strong>You</strong> wrote</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat blanditiis optio, ad magni ducimus minus laudantium mollitia, sequi et dolorem, quo, laborum nihil architecto saepe error. Velit ipsum quis consequatur, non doloremque quae
                tenetur.
              </p>
              <div class="time">Sent on 15:03PM, 12th August 2018</div>
            </div>
            <div class="received">
              <div class="name"><strong>Everest Trekking</strong> wrote</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum odio alias itaque perferendis fugiat molestiae, odit consequatur quia, laudantium dicta est expedita maiores similique suscipit beatae.</p>
              <div class="time">Received on 14:55PM, 12th August 2018</div>
            </div>
            <div class="sent">
              <div class="name"><strong>You</strong> wrote</div>
              <p>Thanks for the info.</p>
              <div class="time">Sent on 15:03PM, 12th August 2018</div>
            </div>
          </div>
        </div>
        <form action="" class="text-area">
          <textarea class="form-control" name="" id="" cols="30" rows="4"></textarea>
          <p class="text-right"><a href="" class="btn btn-primary">Send</a></p>
        </form>
      </div>
      <div class="tab-pane" id="message3">
        <div class="messages-header">
          <h5>Sunrise Travels Pvt. Ltd.</h5>
          <ul class="buttons">
            <li><a href=""><i class="fa fa-user-o"></i></a></li>
            <li><a href=""><i class="fa fa-trash-o"></i></a></li>
          </ul>
        </div>
        <div class="messages">
          <div class="msgWrapper">
            <div class="received">
              <div class="name"><strong>Sunrise Travels Pvt. Ltd.</strong> wrote</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum odio alias itaque perferendis fugiat molestiae, odit consequatur quia, laudantium dicta est expedita maiores similique suscipit beatae.</p>
              <div class="time">Received on 14:55PM, 12th August 2018</div>
            </div>
            <div class="sent">
              <div class="name"><strong>You</strong> wrote</div>
              <p>Thanks for the info.</p>
              <div class="time">Sent on 15:03PM, 12th August 2018</div>
            </div>
          </div>
        </div>
        <form action="" class="text-area">
          <textarea class="form-control" name="" id="" cols="30" rows="4"></textarea>
          <p class="text-right"><a href="" class="btn btn-primary">Send</a></p>
        </form>
      </div>
      <div class="tab-pane" id="message4">
        <div class="messages-header">
          <h5>Safari From The East</h5>
          <ul class="buttons">
            <li><a href=""><i class="fa fa-user-o"></i></a></li>
            <li><a href=""><i class="fa fa-trash-o"></i></a></li>
          </ul>
        </div>
        <div class="messages">
          <div class="msgWrapper">
            <div class="received">
              <div class="name"><strong>Safari From The East</strong> wrote</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi placeat consectetur iste iusto inventore ipsam porro aliquid, facere similique neque eum repudiandae possimus doloremque. Voluptatum modi non vel consequuntur repellendus
                libero earum, labore eaque, veritatis, nisi quos eveniet dolore cum dignissimos aliquam atque aliquid similique hic molestias quod. Consectetur, magni.</p>
              <div class="time">Received on 14:55PM, 12th August 2018</div>
            </div>
            <div class="sent">
              <div class="name"><strong>You</strong> wrote</div>
              <p>Thanks for the info. Consectetur adipisicing elit. Nulla incidunt vel maiores atque, quaerat ab.</p>
              <div class="time">Sent on 15:03PM, 12th August 2018</div>
            </div>
            <div class="received">
              <div class="name"><strong>Safari From The East</strong> wrote</div>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat quibusdam dicta porro animi ipsum aspernatur cum vitae ex eos architecto, delectus, sed laudantium. Quasi repellat ad veniam ullam hic! Voluptas!</p>
              <div class="time">Received on 14:55PM, 12th August 2018</div>
            </div>
            <div class="sent">
              <div class="name"><strong>You</strong> wrote</div>
              <p>Consectetur adipisicing elit quaerat ab.</p>
              <div class="time">Sent on 15:03PM, 12th August 2018</div>
            </div>
          </div>
        </div>
        <form action="" class="text-area">
          <textarea class="form-control" name="" id="" cols="30" rows="4"></textarea>
          <p class="text-right"><a href="" class="btn btn-primary">Send</a></p>
        </form>
      </div>
    </div>
  </div>
</div>