使用A标签使用bootstrap折叠时出现问题

Question

我希望在点击另一个div时折叠一个div。我看了看并尝试了一些东西，但它仍然没有用。请检查并帮助我！

<div class="social-media" id="social-media">
      <a role="button" data-toggle="collapse" data-target="#collapseExample1" data-parent="#social-media" aria-expanded="false" aria-controls="collapseExample1">image1</a>
      <a role="button" data-toggle="collapse" data-target="#collapseExample2" data-parent="#social-media" aria-expanded="false" aria-controls="collapseExample2">image2</a>
      <a role="button" data-toggle="collapse" data-target="#collapseExample3" data-parent="#social-media" aria-expanded="false" aria-controls="collapseExample3">image3</a>
 <div class="collapse" id="collapseExample1">
  <input type="url" class="form-control"  name="github" placeholder="Github Url" />
 </div>
 <div class="collapse" id="collapseExample2">
  <input type="url" class="form-control" name="linkedin" placeholder="LinkedIn URL" />
 </div>
 <div class="collapse" id="collapseExample3">
  <input type="url" class="form-control"  name="angellist" placeholder="AngelList URL" />
 </div>
</div>