javascript - How to changes the jquery code below to more dynamic code? -

i have done sample jquery code below. question how make in dynamic code.

html:

<div class="row"> <div class="deal-mode col-md-6">     <div class="panel-group" id="accordion">         <div class="panel panel-default">             <div class="panel-heading">                 <h4 class="panel-title">                     <a id="click-joan" data-toggle="collapse" data-parent="#accordion" href="#collapseone">1. joan</a>                 </h4>             </div>             <div id="collapseone" class="panel-collapse collapse in">                 <div class="panel-body">                     <p>content</p>                 </div>             </div>         </div>         <div class="panel panel-default">             <div class="panel-heading">                 <h4 class="panel-title">                     <a id="click-kelvin" data-toggle="collapse" data-parent="#accordion" href="#collapsetwo">2. kelvin</a>                 </h4>             </div>             <div id="collapsetwo" class="panel-collapse collapse">                 <div class="panel-body">                     <p>content</p>                 </div>             </div>         </div>         <div class="panel panel-default">             <div class="panel-heading">                 <h4 class="panel-title">                     <a id="click-may" data-toggle="collapse" data-parent="#accordion" href="#collapsethree">3. may</a>                 </h4>             </div>             <div id="collapsethree" class="panel-collapse collapse">                 <div class="panel-body">                     <p>content</p>                 </div>             </div>         </div>     </div> </div>  <div class="col-md-6 wrap-chat-room">   <div id="chat-joan" class="chat-room">     <p>chat joan</p>   </div>   <div id="chat-kelvin" class="chat-room">     <p>chat kelvin</p>   </div>   <div id="chat-may" class="chat-room">     <p>chat may</p>   </div> </div> </div> 

js:

$(document).ready(function(){     $('.wrap-chat-room').css('border', '1px solid red');   $('#chat-joan').fadein();   $("#click-joan").click(function() {     //alert(this.id);     $('#chat-joan').fadein();     $('#chat-kelvin').fadeout();     $('#chat-may').fadeout();     });    $("#click-kelvin").click(function() {     //alert(this.id);     $('#chat-kelvin').fadein();     $('#chat-joan').fadeout();     $('#chat-may').fadeout();     });    $("#click-may").click(function() {     //alert(this.id);     $('#chat-may').fadein();     $('#chat-kelvin').fadeout();     $('#chat-joan').fadeout();     });   }); 

css:

.row { padding: 0 2%; } .col-md-6 { width: 46%; padding: 2%; float: left; } .chat-room { display: none; } 

here jsfiddle

any solution or idea welcome.

thanks.

here example started. updated fiddle

note: have added class="click" 3 <a> , used jquery selector.

$(document).ready(function() {    $('.wrap-chat-room').css('border', '1px solid red');    $('#chat-joan').fadein();      $(".click").click(function() {      var id = '#' + $(this).attr('id').replace('click', 'chat');      $('[id^=chat]').fadeout();      $(id).fadein();    });  });

.row {    padding: 0 2%;  }    .col-md-6 {    width: 46%;    padding: 2%;    float: left;  }    .chat-room {    display: none;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />  <div class="row">    <div class="deal-mode col-md-6">      <div class="panel-group" id="accordion">        <div class="panel panel-default">          <div class="panel-heading">            <h4 class="panel-title">              <a class="click" id="click-joan" data-toggle="collapse" data-parent="#accordion" href="#collapseone">1. joan</a>            </h4>          </div>          <div id="collapseone" class="panel-collapse collapse in">            <div class="panel-body">              <p>content</p>            </div>          </div>        </div>        <div class="panel panel-default">          <div class="panel-heading">            <h4 class="panel-title">              <a class="click" id="click-kelvin" data-toggle="collapse" data-parent="#accordion" href="#collapsetwo">2. kelvin</a>            </h4>          </div>          <div id="collapsetwo" class="panel-collapse collapse">            <div class="panel-body">              <p>content</p>            </div>          </div>        </div>        <div class="panel panel-default">          <div class="panel-heading">            <h4 class="panel-title">              <a class="click" id="click-may" data-toggle="collapse" data-parent="#accordion" href="#collapsethree">3. may</a>            </h4>          </div>          <div id="collapsethree" class="panel-collapse collapse">            <div class="panel-body">              <p>content</p>            </div>          </div>        </div>      </div>    </div>      <div class="col-md-6 wrap-chat-room">      <div id="chat-joan" class="chat-room">        <p>chat joan</p>      </div>      <div id="chat-kelvin" class="chat-room">        <p>chat kelvin</p>      </div>      <div id="chat-may" class="chat-room">        <p>chat may</p>      </div>    </div>  </div>