jquery div collapse/expand in bootstrap -

i have jquery code

$("a.tabs").click(function (e) {    var $groupname = $(this).data("group");     $("[data-group='" + $groupname + "']").each(function () {       $($(this).data("target")).addclass('collapse').removeclass("in");     }); }); 

which expand div , collapse others:

<div class="container"> <div class="row">   <div>             <div>                 <a data-target="#fm1" class="tabs" data-group="footer-blocks" data-toggle="collapse">link1</a>             </div>             <div id="fm1" class="collapse show-in-md">                 link1 content                  </div>    </div>      <div>             <div>                 <a data-target="#fm2" class="tabs" data-group="footer-blocks" data-toggle="collapse">link2</a>             </div>             <div id="fm2" class="collapse show-in-md">                 link2 content                  </div>    </div>      <div>             <div>                 <a data-target="#fm3" class="tabs" data-group="footer-blocks" data-toggle="collapse">link3</a>             </div>             <div id="fm3" class="collapse show-in-md">                 link3 content                  </div>    </div> </div> </div> 

problem, when click on anchor , expand div wont collapse if click again. give me tip how fix jquery code. know it's simple i've tried couple of things , can't done.

here can find working example: http://www.bootply.com/jdx7qe6qkg

and, yes know bootstrap , use accordian classes, etc. want other way.

thank you

this take on it:

change class removal this

$(this).data("target").toggleclass('collapse').toggleclass("in");

it switch , forth between classes show/collapse targets

updated

if item expanded, clicking on again collapse it. non-clicked items collapsed too.

$(function() {    $("a.tabs").click(function(e) {      var target = $(this).data("target");      var istargetexpanded = $(target).hasclass('in');      $('.show-in-md').addclass('collapse').removeclass('in'); // collapse before expading clicked target        if (istargetexpanded) {        $(target).addclass('collapse').removeclass("in"); // collapse clicked target      } else {        $(target).removeclass('collapse').addclass("in"); // expand clicked target      }    });  });

.tabs {    display: block;    padding: 10px;    background: #4a4a4a;    margin-bottom: 2px;    color: #fff;  }  .tabs:hover {    color: #aaa;    font-weight: bold;  }

<!-- latest compiled , minified css -->  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <div class="container">    <div class="row">      <div>        <div>          <a data-target="#fm1" class="tabs" data-group="footer-blocks" data-toggle="collapse">link1</a>        </div>        <div id="fm1" class="collapse show-in-md">          link1 content        </div>      </div>        <div>        <div>          <a data-target="#fm2" class="tabs" data-group="footer-blocks" data-toggle="collapse">link2</a>        </div>        <div id="fm2" class="collapse show-in-md">          link2 content        </div>      </div>        <div>        <div>          <a data-target="#fm3" class="tabs" data-group="footer-blocks" data-toggle="collapse">link3</a>        </div>        <div id="fm3" class="collapse show-in-md">          link3 content        </div>      </div>    </div>  </div>