Hiding button after collapse is toggled in bootstrap

Question

Given the following code from the bootstrap website for the collapse functionality:

<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a> 
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

What I would like to do is hide the link, that invokes the collapse functionality once its open, does anyone know of a way I can do this without adding additional Js?

Answer 1

I used this to hide the button after it was clicked:

HTML (just added a class "hide-me"):

<button class="btn btn-default hide-me" data-toggle="collapse" data-target="#search" id="search-display">My Button</button>

CSS:

.hide-me[aria-expanded="true"] {display: none;}

Answer 2

This is what I was really looking for', without any CSS or JavaScript of my own, simply leveraging Bootstrap:

<a class="btn btn-primary hook in" data-toggle="collapse" href=".hook" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a> 
<div class="collapse hook">
  <div class="well">
    ...
  </div>
</div>

Heres the fiddle:

http://jsfiddle.net/hptrpaxh/1/

Answer 3

Add this:

$('.btn').toggle();

I recommend you add an additional class to this button or give it an id to distinguish it from other buttons.